/* ============================================================
   Natalja Bernatovic: Portfolio
   Vertikaler Vollbild-Pager: jede Seite rastet ein (scroll-snap),
   Kapitel-Punkte rechts, Hoch/Runter-Buttons, Fortschritt oben.
   Mobil-first, Animationen nur über Transform/Opacity.
   ============================================================ */

:root{
  --paper:   #f1efe9;
  --mat:     #f8f7f3;
  --ink:     #16150f;
  --ink-2:   #514d44;
  --ink-3:   #8c877b;
  --line:    #d9d4c8;
  --accent:  #1f5c4d;
  --accent-2:#2f8a72;
  --top: 56px;
  --foot: 30px;
  --pad-b: 14px;
  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "SFMono-Regular", ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --max: 1120px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Firefox für Android vergrößert Text in schmalen Spalten automatisch
   ("Font Inflation"), anders als Chrome. Das sprengt eng bemessene Boxen
   wie Kopf-/Fußleiste. Abschalten, damit unsere eigene Skalierung (clamp/rem)
   überall die einzige Quelle der Wahrheit bleibt. */
html{ text-size-adjust:100%; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; }
html,body{ height:100%; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
img{ display:block; max-width:100%; }
/* <picture> ist nur ein Container für die Handy-Variante, das <img> soll
   direktes Flex-Kind bleiben, damit max-height:100% weiter greift. */
picture{ display:contents; }
a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Kopfleiste ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--top); z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:0 clamp(1.1rem,4vw,2.4rem);
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* Blur nur auf großen Zeigegeräten, auf dem Handy kostet er beim Scrollen
   jeden Frame eine teure Neuberechnung der Fläche hinter der Leiste. */
@media (min-width:821px) and (hover:hover){
  .topbar{
    background:rgba(241,239,233,.9);
    -webkit-backdrop-filter:saturate(1.1) blur(8px); backdrop-filter:saturate(1.1) blur(8px);
  }
}
.topbar__brand{ font-family:var(--serif); font-size:1.05rem; text-decoration:none; white-space:nowrap; }
.topbar__tag{ font-family:var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
@media (max-width:700px){ .topbar__tag{ font-size:.5rem; letter-spacing:.16em; } }
@media (max-width:560px){ .topbar__tag{ display:none; } }

/* ---------- Fußleiste (Marke &amp; Impressum, immer sichtbar) ---------- */
.botbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  height:calc(var(--foot) + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
  padding:0 clamp(1.1rem,4vw,2.4rem) env(safe-area-inset-bottom, 0px);
  background:var(--paper);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
@media (min-width:821px) and (hover:hover){
  .botbar{
    background:rgba(241,239,233,.9);
    -webkit-backdrop-filter:saturate(1.1) blur(8px); backdrop-filter:saturate(1.1) blur(8px);
  }
}
.botbar a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.botbar a:hover{ color:var(--accent); border-color:var(--accent); }

/* Fortschritt oben, per Transform (läuft auf dem Compositor, kein Reflow) */
.vprogress{
  position:fixed; top:var(--top); left:0; height:2px; width:100%; z-index:51;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
}

/* ---------- Pager ---------- */
.pager{
  position:fixed; inset:0;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;   /* kein Pull-to-Refresh / Scroll-Chaining */
  scrollbar-width:none;
}
.pager::-webkit-scrollbar{ display:none; }

/* Höhe = 100 % des fixierten Pagers (nicht 100vh/100dvh!).
   vh/dvh ändern sich auf dem Handy beim Ein-/Ausblenden der Browserleiste;
   die Seiten passen dann nicht mehr exakt in den Snap-Container, genau das
   erzeugt das Wackeln beim Hochscrollen. */
.page{
  height:100%;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
  /* Fester Boden: Egal wie Firefox/Chrome das prozentuale max-height von
     .page__in im Detail auflösen, hier wird garantiert hart abgeschnitten,
     statt dass Inhalt unter der fixen Fuß-/Kopfleiste hervorschaut. */
  overflow:hidden;
  padding:calc(var(--top) + 14px) clamp(1.3rem,6vw,5rem)
          calc(var(--pad-b) + var(--foot) + env(safe-area-inset-bottom, 0px));
}
/* Bei zu hohem Inhalt zentriert Firefox anders als Chrome und schneidet dabei
   unten ab (statt oben), der Inhalt verschwindet dann hinter der Fußleiste.
   „safe center" erzwingt in beiden Browsern denselben Fallback: von oben statt
   mittig, damit nichts hinter Kopf-/Fußleiste verschwindet. Einfaches „center"
   bleibt als Fallback für Browser ohne safe/unsafe-Unterstützung stehen. */
.page{ align-items:safe center; }
/* Standardmäßig KEIN eigener Scroll-Container, sonst schluckt er den Wisch
   in der Seitenmitte, statt ihn an den Pager weiterzugeben. Nur Seiten, deren
   Inhalt wirklich nicht aufs Display passt, bekommen per JS `is-scrollable`. */
.page__in{
  width:100%; max-width:var(--max); max-height:100%;
  overflow:hidden; scrollbar-width:none;
}
.page__in.is-scrollable{ overflow-y:auto; }
.page__in::-webkit-scrollbar{ display:none; }

.eyebrow{ font-family:var(--mono); font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--accent); }

/* ---------- Intro ---------- */
.intro__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(1.6rem,5vw,4.5rem); align-items:center; }
.intro__name{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,7vw,5rem); line-height:1.0; letter-spacing:-.015em; margin-bottom:1.1rem; }
.intro__name span{ display:block; color:var(--accent); }
.intro__sub{ font-size:clamp(1.02rem,1.6vw,1.24rem); font-weight:300; color:var(--ink-2); max-width:36ch; margin-bottom:1.4rem; }
.intro__meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.8rem; }
.intro__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.intro__fig{ position:relative; }
.intro__fig img{ width:100%; height:auto; max-height:66vh; object-fit:contain; margin-inline:auto; border:1px solid var(--line); background:var(--mat); box-shadow:0 30px 60px -40px rgba(0,0,0,.45); }
.intro__cap{ margin-top:.7rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:.9rem 1.4rem; border:1px solid var(--ink); color:var(--ink); border-radius:2px; transition:background .2s,color .2s,border-color .2s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--fill{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--fill:hover{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

/* ---------- Titelkarten (Fotografie / Kunst) ---------- */
.card__in{ text-align:center; max-width:640px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.card__no{ font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; color:var(--accent); margin-bottom:1rem; }
.card__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,6vw,4.4rem); line-height:1; letter-spacing:-.01em; margin-bottom:1.2rem; }
.card__intro{ font-size:clamp(.98rem,1.5vw,1.15rem); line-height:1.6; font-weight:300; color:var(--ink-2); }
.card__hint{ margin-top:1.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:.5rem; }
.card__hint::after{ content:"↓"; color:var(--accent); font-size:1rem; }

/* ---------- Bild-Seite (Foto / Werk) ---------- */
.shot{ flex-direction:column; }
.shot__img{ flex:1 1 auto; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
.shot__img img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
.shot__cap{ flex:0 0 auto; padding-top:14px; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:.7rem; text-align:center; }
.shot__cap b{ color:var(--accent); font-weight:400; letter-spacing:.2em; }
.shot__cap .sep{ width:4px; height:4px; border-radius:50%; background:var(--line); flex:0 0 auto; }

.shot--art .shot__img img{ border:9px solid #fff; box-shadow:0 26px 50px -34px rgba(0,0,0,.5); }
.shot--art .shot__cap{ flex-direction:column; gap:.35rem; font-family:var(--serif); font-style:italic; text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--ink-2); }
.shot__meta{ display:block; font-family:var(--mono); font-style:normal; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Notiz ---------- */
.note__in{ text-align:center; max-width:540px; margin-inline:auto; }
.note__in p{ font-family:var(--serif); font-style:italic; font-size:1.3rem; }
.note__in a{ color:var(--accent); border-bottom:1px solid var(--accent); text-decoration:none; }
.note__in small{ display:block; margin-top:.8rem; font-family:var(--sans); font-style:normal; font-size:.95rem; color:var(--ink-3); }

/* ---------- Über mich ---------- */
.about__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.about__body p{ font-weight:300; margin-bottom:1rem; max-width:52ch; }
.about__body .muted{ color:var(--ink-2); }
.about__lead{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:1.4rem 0 .7rem !important; }
.offer{ list-style:none; margin-bottom:1rem; }
.offer li{ padding:.5rem 0; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.8rem; font-weight:300; }
.offer li::before{ content:"•"; color:var(--accent); }
.about__body a{ color:var(--accent); }
.facts{ list-style:none; border-top:1px solid var(--line); }
.facts li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding:.8rem 0; border-bottom:1px solid var(--line); }
.facts strong{ font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.facts span{ font-weight:300; text-align:right; }

/* ---------- Kontakt ---------- */
.contact__in{ text-align:center; max-width:680px; margin-inline:auto; }
.contact__in .eyebrow{ justify-content:center; }
.contact__head{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.02; letter-spacing:-.01em; }
.contact__sub{ color:var(--ink-2); max-width:44ch; margin:1.1rem auto 2rem; }
.contact__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.contact__hint{ margin-top:1.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Kapitel-Punkte (rechts) ---------- */
.dots{ position:fixed; right:clamp(10px,1.8vw,22px); top:50%; transform:translateY(-50%); z-index:46; display:flex; flex-direction:column; gap:.8rem; }
.dot-btn{ position:relative; appearance:none; border:0; background:none; cursor:pointer; padding:.2rem; display:block; }
.dot-btn i{ display:block; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .25s, transform .25s; }
.dot-btn .lbl{ position:absolute; right:20px; top:50%; transform:translateY(-50%); white-space:nowrap; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); opacity:0; pointer-events:none; transition:opacity .2s; }
.dot-btn:hover i{ background:var(--ink-3); }
.dot-btn:hover .lbl{ opacity:1; }
.dot-btn.is-current i{ background:var(--accent); transform:scale(1.35); }
.dot-btn.is-current .lbl{ opacity:1; color:var(--ink); }
@media (max-width:640px){ .dots{ display:none; } }

/* ---------- Hoch / Runter ---------- */
.pnav{
  position:fixed; z-index:46; display:flex; flex-direction:column; gap:.5rem;
  right:clamp(14px,3vw,26px);
  bottom:calc(var(--foot) + clamp(14px,3vw,24px) + env(safe-area-inset-bottom, 0px));
}
.pnav button{ width:40px; height:40px; border-radius:50%; padding:0; border:1px solid var(--line); background:var(--mat); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .15s; }
.pnav button svg{ display:block; }
.pnav button:not(:disabled):hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-1px); }
.pnav button:disabled{ opacity:.35; cursor:default; }
/* Auf dem Handy reicht Wischen, Buttons weg spart Fläche und Compositing */
@media (hover:none) and (max-width:640px){ .pnav{ display:none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){ .pager{ scroll-behavior:auto; } * { transition:none !important; } }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  :root{ --top:50px; --foot:26px; --pad-b:8px; }
  body{ font-size:16px; }
  .page{ padding-left:clamp(1rem,5vw,2rem); padding-right:clamp(1rem,5vw,2rem); }
  .intro__grid{ grid-template-columns:1fr; gap:1.2rem; }
  .intro__fig{ order:-1; }
  .intro__fig img{ max-height:38vh; box-shadow:none; }
  .intro__sub{ margin-bottom:1rem; }
  .intro__meta{ margin-bottom:1.1rem; }
  .about__grid{ grid-template-columns:1fr; gap:.8rem; }
  .about__body p{ max-width:none; margin-bottom:.6rem; line-height:1.5; }
  .about__body .eyebrow{ margin-bottom:.8rem; }
  .about__lead{ margin:.9rem 0 .45rem !important; }
  .offer li{ padding:.32rem 0; }
  .offer{ margin-bottom:.6rem; }
  .facts li{ padding:.45rem 0; }
  /* Weiche Schlagschatten sind beim Scrollen teuer → auf klein/mobil dünner */
  .shot--art .shot__img img{ border-width:6px; box-shadow:0 8px 18px -14px rgba(0,0,0,.5); }
  .shot__cap{ font-size:.58rem; padding-top:10px; }
  .shot--art .shot__cap{ font-size:.88rem; }
  .btn{ padding:.8rem 1.1rem; }
}
@media (max-width:400px){
  .intro__actions{ gap:.6rem; }
  .btn{ font-size:.6rem; padding:.75rem .9rem; }
}
/* Kurze Displays: Intro so straffen, dass es ohne eigenes Scrollen passt.
   Schwelle um die Höhe der Fußleiste angehoben, da die weniger Raum lässt
   als vorher. */
@media (max-width:820px) and (max-height:760px){
  .intro__fig img{ max-height:30vh; }
  .intro__grid{ gap:.9rem; }
  .intro__name{ margin-bottom:.7rem; }
  .intro__sub{ font-size:1rem; margin-bottom:.8rem; }
  .intro__meta{ margin-bottom:.9rem; }
  .intro__cap{ display:none; }
  .intro .eyebrow{ margin-bottom:.7rem; }
}
/* Sehr kurze Displays (z. B. kleinere Android-Handys): eine Stufe weiter
   strafft, damit der Intro-Inhalt wirklich ohne inneres Scrollen passt,
   auf manchen Handy-Browsern lässt sich innerhalb der Seite nicht sauber
   scrollen, dann würde sonst der zweite Button abgeschnitten bleiben. */
@media (max-width:820px) and (max-height:660px){
  .intro__fig img{ max-height:22vh; }
  .intro__grid{ gap:.6rem; }
  .intro__name{ font-size:2rem; margin-bottom:.5rem; }
  .intro__sub{ font-size:.92rem; margin-bottom:.6rem; }
  .intro__meta{ margin-bottom:.6rem; }
  .intro .eyebrow{ margin-bottom:.5rem; }
  .intro__actions{ gap:.5rem; }
}
/* Niedrige Querformat-Displays (Handy gedreht) */
@media (max-height:520px){
  :root{ --pad-b:4px; }
  .intro__fig img{ max-height:32vh; }
  .card__hint{ margin-top:1rem; }
}

/* ============================================================
   Dokument-Seiten (Impressum): normales Scrollen statt Pager
   ============================================================ */
body.doc{ overflow:auto; height:auto; }
.doc__main{
  max-width:760px; margin-inline:auto;
  padding:calc(var(--top) + clamp(2rem,7vw,4.5rem)) clamp(1.2rem,6vw,2rem)
          calc(3rem + env(safe-area-inset-bottom, 0px));
}
.doc__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,6vw,3.4rem); line-height:1.05; letter-spacing:-.01em; margin-bottom:1rem; }
.doc__note{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); background:var(--mat); border:1px solid var(--line); border-left:2px solid var(--accent); padding:.85rem 1rem; margin-bottom:2.4rem; line-height:1.7; }
.doc__sec{ margin-bottom:2.2rem; }
.doc__sec h2{ font-family:var(--mono); font-weight:400; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.doc__sec p{ font-weight:300; color:var(--ink-2); margin-bottom:.6rem; }
.doc__sec p:last-child{ margin-bottom:0; }
.tbd{ color:var(--ink-3); font-style:italic; }
.doc__back{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; }
.doc__back:hover{ color:var(--accent); border-color:var(--accent); }
.doc__foot{ margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }