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

html, body {
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  scroll-behavior: smooth;
  /* Kein Gummiband-Effekt am oberen/unteren Rand: Dort würde beim Überziehen
     sonst der Seitenhintergrund statt des Bildes sichtbar (iOS 16+, Chrome) */
  overscroll-behavior: none;
}

/* EINE einzige Bildebene: das Foto ist der Hintergrund der Seite selbst.
   Nur diese Fläche zieht iOS bis unter Status- und Bedienleiste durch – ein
   Element im Seiteninhalt wird am Fensterrand abgeschnitten. Die Randzugabe
   sorgt dafür, dass das Bild wirklich unter beide Leisten reicht.

   Es bleibt beim Scrollen stehen, OHNE background-attachment: fixed (das setzt
   iOS nicht um und streckt das Bild unscharf über die ganze Seitenlänge):
   Das Dokument selbst scrollt gar nicht, es scrollt nur .scroller darin.
   Dadurch kann der Seitenhintergrund sich von sich aus nicht bewegen. */
html {
  overflow: hidden;
  /* Zugabe NUR nach oben. Die Bildfläche endet an der KLEINEN Fensterhöhe
     (100svh = Fenster mit eingeblendeter Bedienleiste), damit unterhalb der
     Leiste kein Bild mehr liegt – dort erscheint dann nur die Farbe. */
  height: calc(100vh + var(--rand));
  height: calc(100svh + var(--rand));
  /* Exakt die Bildfarbe direkt unterhalb der Statusleiste (aus dem Foto
     gemessen). Safari faerbt die Statusleiste mit dieser Farbe – so faellt
     der Uebergang zum Bild nicht auf. Kein theme-color setzen: das wuerde
     auch die untere Leiste wieder deckend machen, wo jetzt das Bild steht. */
  background-color: #aba368;
  background-image: url("hintergrundbild.jpg");
  background-position: center calc(-1 * var(--rand));
  background-size: cover;
  background-repeat: no-repeat;
}

/* body ohne eigenen Hintergrund, sonst würde er das Bild überdecken */
body {
  overflow: hidden;
}

/* Weicher Übergang von der Statusleiste ins Foto.
   iOS füllt die Statusleiste nur mit der background-color (nachgemessen: ein
   background-image wird dort nie gezeichnet, auch nicht mit Randzugabe). Der
   Verlauf beginnt am Rand in genau dieser Farbe und läuft ins Bild aus, damit
   dazwischen keine Kante sichtbar ist – oben wie unten.

   Beide liegen ÜBER dem Inhalt (z-index: 5) und sind am Rand deckend: So löst
   sich der Inhalt schon im Verlauf auf statt erst an der Kante, und Safari
   "sieht" unter seiner Bedienleiste nur Farbe. Die deckende Fläche ist unten
   exakt so hoch wie die Bedienleiste selbst (100lvh - 100svh), damit der
   Verlauf nicht unnötig weit ins sichtbare Foto hineinreicht.

   Nur auf Touchgeräten: Am Rechner gibt es keine Statusleiste, dort wäre der
   Verlauf bloss ein Schleier ohne Zweck. */
@media (hover: none) and (pointer: coarse) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
      to bottom,
      rgb(171,163,104) 0,
      rgb(171,163,104) 18%,
      rgba(171,163,104,.55) 55%,
      rgba(171,163,104,0) 100%
    );
    pointer-events: none;
    z-index: 5;
  }

  /* Unterer Rand: Dieser Verlauf liegt ÜBER dem Inhalt und ist ganz unten
     deckend. Dadurch "sieht" Safari dort nur die Hintergrundfarbe und die
     Bedienleiste erscheint flächig wie die Statusleiste oben, statt einen
     verschwommenen Bildausschnitt zu zeigen. Gleichzeitig tauchen die
     Portfolio-Seiten weich daraus auf, statt an einer harten Kante zu enden. */
  body::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Nur ein schmaler Übergang direkt an der Fensterkante: Der Bereich unter
       der Bedienleiste gehört nicht zur Seite und trägt ohnehin schon die
       Hintergrundfarbe. Eine deckende Fläche wäre dort wirkungslos und würde
       nur unnötig Bild verdecken. */
    height: 48px;
    background: linear-gradient(
      to top,
      rgb(171,163,104) 0,
      rgb(171,163,104) 8%,
      rgba(171,163,104,.35) 45%,
      rgba(171,163,104,0) 100%
    );
    pointer-events: none;
    z-index: 5;
  }

}

/* Der eigentliche Scroll-Container – genau fenstergross */
.scroller {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  overscroll-behavior: none;
}

:root {
  --maxw: 900px;
  /* Randzugabe über und unter dem Fenster, damit das Bild bis unter Status-
     und Bedienleiste reicht. Preis dafür: das Bild ist minim stärker
     angeschnitten. */
  --rand: 70px;
}

.section {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Inhalt bleibt frei von Notch / Home-Indicator, Bild läuft darunter durch */
  padding:
    max(8vh, env(safe-area-inset-top, 0px))
    max(6vw, env(safe-area-inset-right, 0px))
    max(8vh, env(safe-area-inset-bottom, 0px))
    max(6vw, env(safe-area-inset-left, 0px));
}

.frame {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

#home .frame {
  margin-top: -15vh;
}

h1 {
  font-weight: 500;
  letter-spacing: .018em;
  font-size: clamp(2.6rem, 9vw, 5.6rem);
  line-height: 1.2;
  margin-bottom: 2.8rem;
}

.links {
  display: flex;
  justify-content: center;
  gap: 1.7rem;
  margin-bottom: 2.8rem;
}

.links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.28rem);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  transition: .2s;
}

.links a:hover {
  opacity: .9;
  border-color: #fff;
}

.cta-down {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  transition: opacity .35s ease;
}
.cta-down.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.button {
  display: inline-flex;
  gap: .45rem;
  padding: .58rem 1.2rem;
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.05);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  transition: border-color .2s ease;
}

.portfolio {
  padding:
    6vh
    max(4vw, env(safe-area-inset-right, 0px))
    max(10vh, env(safe-area-inset-bottom, 0px))
    max(4vw, env(safe-area-inset-left, 0px));
  display: block;
}

.portfolio-head {
  max-width: var(--maxw);
  margin: 0 auto 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portfolio-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: .01em;
  padding-left: 0.6rem;
}

.portfolio-head .button {
  margin-right: 0.7rem;
}

.portfolio-pages {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.portfolio-page {
  background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: .7rem;
  border-radius: .85rem;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.portfolio-page img {
  width: 100%;
  display: block;
  border-radius: .5rem;
  background: #fff;
  aspect-ratio: 2382 / 1684; /* Seitenverhältnis der PDF-Seiten – verhindert Springen beim Laden */
}

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

.site-footer {
  text-align: center;
  font-size: .85rem;
  opacity: .7;
  padding:
    0
    max(6vw, env(safe-area-inset-right, 0px))
    max(4vh, env(safe-area-inset-bottom, 0px))
    max(6vw, env(safe-area-inset-left, 0px));
}

@media (max-width: 900px) {
  h1 {
    font-size: clamp(2rem, 10vw, 3.5rem);
    margin-bottom: 2.2rem;
  }

  .links {
    gap: 1.2rem;
    margin-bottom: 2.2rem;
  }

  #home .frame {
    margin-top: -5vh;
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(1.8rem, 12vw, 3rem);
    line-height: 1.15;
  }

  .links a {
    font-size: 1rem;
  }

  .button {
    padding: .5rem 1rem;
    font-size: 1rem;
  }

  .section {
    padding:
      max(6vh, env(safe-area-inset-top, 0px))
      max(5vw, env(safe-area-inset-right, 0px))
      max(6vh, env(safe-area-inset-bottom, 0px))
      max(5vw, env(safe-area-inset-left, 0px));
  }

  /* Titelblock (Titel bis Archiv-Button) höher setzen */
  #home .frame {
    margin-top: 1vh;
  }
}

/* Pascal Weidmann – Mobile Kurzform */
.pw-short {
  display: none;
}

@media (max-width: 600px) {
  .pw-full {
    display: none;
  }
  .pw-short {
    display: inline;
  }

  .links {
    flex-wrap: nowrap;
  }

  .links a {
    white-space: nowrap;
  }
}

/* Unterstützt durch – fix am unteren Rand der Startseite */
#home {
  position: relative;
}

.supporter-fixed {
  position: absolute;
  bottom: max(3vh, calc(env(safe-area-inset-bottom, 0px) + .5rem));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
}

.supporter-label {
  font-size: clamp(0.8rem, 1.4vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.supporter-fixed img {
  width: clamp(66px, 16vw, 96px);
  height: auto;
}

/* Muss nach den Grundregeln oben stehen, sonst überschreiben diese die Werte
   wieder (gleiche Spezifität – die spätere Regel gewinnt).
   Beides muss oberhalb des 120px hohen Verlaufs am unteren Rand liegen,
   sonst verschwindet es in dessen deckendem Teil. */
@media (hover: none) and (pointer: coarse) {
  /* So tief wie möglich, ohne in den Verlauf zu geraten (dort würde es
     verblassen). Der Verlauf ist dafür auf 48px verschmälert. */
  .supporter-fixed {
    bottom: max(7vh, calc(env(safe-area-inset-bottom, 0px) + 1.5rem));
  }

  .site-footer {
    padding-bottom: max(10vh, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
  }
}