/* ============================================================
   Design tokens — all colors, type sizes, spacing live here
   ============================================================ */
:root {
  /* ---- §10 Basis-CSS, verbatim ---------------------------- */
  --bild: 44vh;                              /* fallback for dvh below */
  --bild: 44dvh;                             /* Bildzeilenhöhe */
  --logozeile: calc(var(--bild) * 0.20);
  --balken:    min(var(--bild), 70vw);
  --kreis:     calc(var(--bild) * 0.94);
  --gruen:   #7A945A;  /* Ankommen  */
  --petrol:  #46808E;  /* Aufbruch  */
  --flieder: #8A6E9E;  /* Königsweg */
  --cognac:  #8A5A30;  /* Stufen    */
  --grau:    #6B6560;  /* Infoseiten */
  --text:    #3E3A36;

  /* ---- project aliases onto the §10 names ------------------ */
  --paper: #fafaf8; /* neutral light, used by the footer's text shadow */
  --ink: var(--text);        /* body text, §4 */
  --ink-muted: var(--grau);  /* warm grey — sources and links, §4 */
  --border: rgba(62, 58, 54, 0.35);

  /* Per-slide band accents. NOTE: main.js reads the band color from each
     cell's `fillattr` attribute in index.html (an attribute cannot hold a
     var()), so these two must be kept in sync. */
  --accent-0: var(--gruen);
  --accent-1: var(--petrol);
  --accent-2: var(--flieder);
  --accent-3: var(--cognac);

  /* Per-slide full-bleed page tint — styleguide §3, exact values */
  --tint-0: #EFF2EB;
  --tint-1: #E9F0F1;
  --tint-2: #F1EEF3;
  --tint-3: #F1EBE6;

  /* §8 stack: Kopfzeile → Bildkreis → Balken → Text. The band line is derived
     from the two rows above it (§5: gap to the image above = 0), so it is
     identical on every page — headlines and both peeks stay on one line. */
  --band-top: calc(var(--logozeile) + var(--bild));
  --band-gap-text: 3rem; /* §5 — Abstand zum Text darunter */

  /* Carousel geometry. --cell-w / 100vw is the CELL_RATIO the parallax
     math uses; main.js re-measures it so the mobile value stays correct. */
  --cell-w: 50vw;
  --cell-gutter: 1.6vw;

  /* §5 — band height and headline size both derive from --balken, so the
     5.236:1 ratio and the type coupling hold at any viewport. */
  --band-h: calc(var(--balken) / 5.236);

  /* How much of a neighbour's band shows. The natural width is (100vw -
     --cell-w)/2 = 25vw; at that value the mask below is a no-op. Turn it down
     to narrow the peeks — this does NOT affect cell width or drag distance. */
  --peek-width: 25vw;
  --peek-opacity: 0.38;

  /* minimum width of the invisible paging zones, so they stay tappable when
     --drag-strip collapses on a phone (§9 uses the same 56px floor) */
  --zone-min: 56px;
  --zone-arrow-opacity: 0.8; /* arrow on hover */

  /* Drag surface. The vertical insets clear the chrome rows; the side strips
     are derived from the real cell geometry in main.js (--drag-strip). */
  --drag-top: 5.5rem;
  --drag-bottom: 3rem;
  --drag-strip: 0px; /* replaced on init/resize with peekWidth / 3 */

  /* Type */
  /* styleguide §1 — Lato 300/400/700, loaded in index.html */
  --font-body: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-title: calc(var(--balken) * 0.128); /* §5 — coupled to band width */
  --fs-body: 15px; /* §10 base */
  --fs-chrome: 0.72rem;
  --tracking-title: 0.06em;
  --tracking-wide: 0.12em;

  /* Layout — §8 Seitenpolster */
  --page-pad-x: 1.5rem;
  --page-pad-bottom: 1.2rem;
  --page-pad-top: 0rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;

  /* Motion */
  --dur-fill: 200ms;   /* band color cross-fade */
  --dur-image: 600ms;  /* background image cross-fade */
}

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

html,
body {
  height: 100%;
  overflow: hidden; /* hard rule: no vertical page scrolling */
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5; /* §10 base */
  color: var(--ink);
  background: var(--tint-0);
  transition: background-color var(--dur-image) ease;
}

/* Full-bleed light accent tint per slide. body is already full-bleed and
   already transitions, so this cross-fades on change with no JS involved. */
body[slideid="slide-1"] { background: var(--tint-1); }
body[slideid="slide-2"] { background: var(--tint-2); }
body[slideid="slide-3"] { background: var(--tint-3); }

/* ============================================================
   Fixed chrome — three corners, never move
   ============================================================ */
/* §7 Kopfzeile — logo row, --logozeile tall, flush to the top-left. The four
   colour variants are stacked and cross-faded by main.js on slide change. */
.logos {
  position: fixed;
  z-index: 29;
  top: var(--page-pad-top);
  left: 0;
  height: var(--logozeile);
  width: auto;
  display: block;
  line-height: 0;
  cursor: pointer;
}

.logoimg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity var(--dur-image) ease;
}

.logoimg.is-selected { opacity: 1; }

/* keeps the row's width, since every variant is absolutely positioned */
.logoimg[data-i="0"] { position: relative; }

/* §7 — nav right in the header row */
.topnav {
  position: fixed;
  /* chrome sits above the paging zones (50), so the nav always wins even if
     --logozeile grows past --drag-top on a very tall viewport */
  z-index: 100;
  top: var(--page-pad-top);
  left: 0;
  right: 0;
  height: var(--logozeile);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0 0.7rem;
  font-size: clamp(0.56rem, 2.4vw, 0.72rem);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.topnav button,
.topnav .copy { pointer-events: auto; }

.topnav button {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--text);
  opacity: 0.75;
  cursor: pointer;
}

.topnav button:hover { opacity: 1; text-decoration: underline; }
.topnav .sep { opacity: 0.35; }
.topnav .copy { opacity: 0.55; margin-left: 0.5em; }
.topnav .kurz { display: none; }

@media (max-width: 560px) {
  .topnav .lang { display: none; }
  .topnav .kurz { display: inline; }
  .topnav .copy { display: none; }
}

/* ============================================================
   Parallax stage — three stacked layers, back to front
   ============================================================ */
.parallax {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  inset: 0;
}

/* --- Layer 1: the round image ------------------------------
   Static — it never translates; only the selected cell's opacity
   cross-fades. A square box with a 50% radius and `cover`, so every
   source aspect ratio yields the same circle. It hangs above the band,
   whose position it must never influence. */
.parallax__layer--bg { z-index: 1; }

.parallax__layer__cell--bg {
  position: absolute;
  /* §6 — centred in the --bild row, which sits directly under the header */
  top: calc(var(--logozeile) + (var(--bild) - var(--kreis)) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--kreis);
  height: var(--kreis);
  border-radius: 50%;
  background-size: cover; /* §6 — the background equivalent of object-fit: cover */
  background-repeat: no-repeat;
  background-position: center;
  /* §6 "Farbtiefe" — defined in index.html. Applied after the element is
     painted and clipped, so the circle and the cross-fade are unaffected. */
  filter: url(#farbtiefe);
  opacity: 0;
  transition: opacity var(--dur-image) ease;
}

/* holds the filter def; contributes no layout */
.filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.parallax__layer__cell--bg.is-selected { opacity: 1; }

.parallax__layer--bg .parallax__layer__cell--bg:nth-child(1) {
  background-image: url("Websitepictures/Bild1.jpeg");
}
.parallax__layer--bg .parallax__layer__cell--bg:nth-child(2) {
  background-image: url("Websitepictures/Bild2.jpeg");
}
.parallax__layer--bg .parallax__layer__cell--bg:nth-child(3) {
  background-image: url("Websitepictures/Bild3.jpeg");
}
.parallax__layer--bg .parallax__layer__cell--bg:nth-child(4) {
  background-image: url("Websitepictures/Bild4.jpeg");
}

/* --- Layer 2: faint oversized accent shape ----------------
   Translated by JS at 2x the (static) background — this is the
   depth cue. transform only, per the perf rule. */
.parallax__layer--fg {
  z-index: 2;
  will-change: transform;
}

.parallax__layer__cell--fg {
  position: absolute;
  top: 0;
  left: calc(var(--i) * 100%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The accent shapes were removed in favour of the full-bleed tint; the cells
   stay so the layer keeps translating at 2x and main.js is unchanged. */

/* --- Layer 3: the Flickity carousel ------------------------ */
/* Flickity binds its dragger to .flickity-viewport, so the drag hit area IS
   this box. It spans the tall central region (chrome rows excluded by the
   insets) and stays full width so the peeks are never clipped. */
.carousel {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--drag-top);
  bottom: var(--drag-bottom);
}

.carousel:focus { outline: none; }

/* height is ours now (setGallerySize: false), not Flickity's inline value */
.carousel .flickity-viewport { height: 100%; }

/* keeps the band at exactly the Y it had before the box grew */
.carousel .carousel-cell { top: calc(var(--band-top) - var(--drag-top)); }

/* --- transparent dead-zones over the outer third of each peek --- */
.drag-deadzone {
  position: fixed;
  z-index: 50; /* above the carousel (3), below the chrome (100) */
  /* Starts below the header row: the carousel viewport begins at --drag-top,
     so nothing above it is draggable anyway, and a full-height zone would sit
     over the nav and swallow clicks on "Datenschutz" / "© 2026". */
  top: var(--drag-top);
  bottom: 0;
  width: var(--drag-strip);
  /* Tap target: --drag-strip is derived from the peek and collapses to ~10px
     at the mobile breakpoint, far too small for a thumb. */
  min-width: var(--zone-min);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-deadzone--left { left: 0; }
.drag-deadzone--right { right: 0; }

/* invisible until the pointer finds it — §9's "Pfeil erscheint bei Mauskontakt" */
.drag-deadzone span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.drag-deadzone:hover span,
.drag-deadzone:focus-visible span { opacity: var(--zone-arrow-opacity); }

/* No arrow where there is nowhere to go — first page has no previous, last has
   no next. The zone itself stays, so the drag surface is identical on every
   page; only the arrow is suppressed. */
.drag-deadzone.is-end span { display: none; }

/* no hover on touch, so never reserve the arrow there */
@media (hover: none) {
  .drag-deadzone span { display: none; }
}

/* Half-width cells: the active band sits centered while the previous
   and next bands peek at the left and right edges. */
.carousel-cell {
  width: var(--cell-w);
  /* gutter so adjacent bands read as three separate bands rather than
     merging into one continuous strip (they all share the active accent) */
  padding: 0 var(--cell-gutter);
}

.slide-textbox { width: 100%; }

/* §5 knockout: white headline over the accent rect, blended with multiply.
   White multiplied by the backdrop leaves the backdrop, so the letters read as
   the page tint — a knockout without a mask. (The accent rect multiplies too,
   so the band sits a touch deeper than the raw accent; that pairing with the
   §3 light tints is the intent.) */
.svg-text {
  display: block;
  width: var(--balken); /* §5 — no longer the full cell */
  height: var(--band-h);
  margin: 0 auto;
  mix-blend-mode: multiply;
}

/* Neighbour peeks: the current page's accent (main.js already paints every
   .slide-color-svg) at §5's 38%. */
.carousel-cell:not(.is-selected) .svg-text {
  opacity: var(--peek-opacity);
  /* Keeps the outer --peek-width at each end of a non-selected band. At the
     25vw default the two stops overlap, so this is a no-op. */
  -webkit-mask-image: linear-gradient(to right,
    #000 var(--peek-width), transparent var(--peek-width),
    transparent calc(100% - var(--peek-width)), #000 calc(100% - var(--peek-width)));
  mask-image: linear-gradient(to right,
    #000 var(--peek-width), transparent var(--peek-width),
    transparent calc(100% - var(--peek-width)), #000 calc(100% - var(--peek-width)));
}

.knockout-text-container {
  display: block;
  width: 100%;
  height: 100%;
}

/* the accent rectangle the letters are punched out of */
.knockout-text-bg {
  transition: fill var(--dur-fill) ease;
}

/* §5 headline: Light by default, with the second word Bold */
.svg-text text {
  font-family: var(--font-body);
  font-size: var(--fs-title);
  font-weight: 300;
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
}

.svg-text .band-bold { font-weight: 700; }

/* --- slide body -------------------------------------------
   Sits directly under the band on a light scrim: the backgrounds are
   photographs now, so text needs its own ground to stay readable
   (the library image in particular is very dark). */
/* Sits directly under the band on the bare page — no card. The font scales
   with viewport HEIGHT: the block is otherwise a fixed pixel height and would
   eat a far larger share of a short laptop screen than of a tall one. */
/* §8 — text column max 620px, centred, 3rem below the band. §10 body: 15px/1.5 */
.slide-body {
  /* §8 caps the column at 620px. Take that width even when the 50vw cell is
     narrower — otherwise the cell dictates it, the text wraps far more and the
     block grows tall enough to be clipped on short screens. Safe to exceed the
     cell: neighbours' bodies are hidden, and the peeks sit at the band's Y. */
  width: min(620px, calc(100vw - 2rem));
  max-width: none;
  /* Centre on the cell's axis explicitly. `auto` margins collapse to zero
     when the column is wider than the cell (which it now can be on narrow
     screens), which pushed the block off-centre from the band and circle. */
  margin: var(--band-gap-text) 0 0 50%;
  transform: translateX(-50%);
  padding: 0 var(--page-pad-x);
  text-align: center;
  color: var(--ink); /* §4 body text */
  font-size: 15px;
  line-height: 1.5;
  transition: opacity var(--dur-fill) ease;
}

/* Only the active slide shows its body text — the neighbours peek as bands
   alone, as in the reference. It cross-fades in when selection flips. */
.carousel-cell:not(.is-selected) .slide-body {
  opacity: 0;
  pointer-events: none;
}

.slide-body p + p { margin-top: 1.1em; }

.slide-body a {
  color: var(--ink-muted); /* §4 links */
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.slide-kicker {
  font-size: 0.86em;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
  margin-bottom: 1.2em;
}

/* §1 — Zwischenüberschrift (H2): Bold 700, 1 rem, 0,9 rem oben / 0,25 rem unten */
.slide-body h3 {
  font-size: 1rem;
  font-weight: 700; /* Lato ships 300/400/700 — 600 would be synthesised */
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0.9rem 0 0.25rem;
}

.slide-body h3:first-child { margin-top: 0; }
.slide-body h3 + p { margin-top: 0; }

/* §1 — Zitat: Regular 400, kursiv, zentriert */
blockquote {
  font-size: 1.22em;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.5em;
}

/* §1 — Quellenangabe: Regular 400, aufrecht, 0,82 rem, #6B6560 */
cite {
  display: block;
  margin-top: 0.7em;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.verse {
  line-height: 1.85;
  color: var(--ink);
}

/* the text-heavy first slide gets a slightly wider, tighter column */
/* Slide 1 carries ~4x the copy of the others. The band line is fixed, so its
   only lever is its own type scale — hence a slightly smaller step than the
   poetic slides get. Sized for 1280x720, the worst case. */
/* §1 — Fließtext „Ankommen": Zeilenhöhe 1,35 · linksbündig */
.ankommen .inhalt {
  text-align: left;
  line-height: 1.35;
}

.ankommen .inhalt p { margin-bottom: 0.6rem; }

/* §1 — Zwischenüberschrift */
.inhalt h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.9rem 0 0.25rem;
}

.inhalt h2:first-child { margin-top: 0; }
.inhalt p { margin-bottom: 0.8rem; }

/* §1 — Zitat kursiv, zentriert; Quellenangabe aufrecht in Warmgrau */
.zitat {
  font-style: italic;
  text-align: center;
  margin-bottom: 1.2rem;
}

.zitat .quelle {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  margin-top: 0.4rem;
  color: var(--grau);
}

.vers {
  font-style: normal;
  text-align: center;
  white-space: pre-line; /* the verses keep their own line breaks */
  margin-bottom: 1.2rem;
}

.vers-zitat { font-style: italic; }

.slide-body--dense h3 { margin-bottom: 0.3em; }
.slide-body--dense p + h3 { margin-top: 1.1em; }

/* ============================================================
   Responsive — wider cells below 768px; main.js re-measures the
   cell ratio so the parallax math follows automatically.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --cell-w: 84vw;
    --cell-gutter: 3vw;
    /* --balken, --band-h and --fs-title follow from these automatically,
       keeping the §5 ratio and type coupling at this breakpoint too. */
    --peek-width: 8vw; /* natural peek here is (100 - 84)/2 */
    --space-3: 1.25rem;
    /* --bild/--logozeile/--balken/--kreis and the band line all follow the
       §10 chain here too; --balken's min(…, 70vw) is what keeps the band
       inside a narrow screen. */
  }
}

/* ============================================================
   Info subpages (§3 Infoseiten, §5 Balken der Infoseiten)
   Overlays above the carousel; they scroll on their own.
   ============================================================ */
.unterseite {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: #F2F1EE; /* §3 — Kontakt / Impressum / Datenschutz */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: calc(var(--logozeile) + 1.2rem) var(--page-pad-x) 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unterseite::-webkit-scrollbar { display: none; }
.unterseite[hidden] { display: none; }

/* Info-page heading: plain text in the body colour, not bold — the coloured
   band was removed. */
.ubalken {
  width: 100%;
  max-width: 620px;
  margin-bottom: 2rem;
}

.ubalken h1 {
  all: unset;
  display: block;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.ubalken h1 b { font-weight: 400; }

.utext {
  max-width: 620px;
  width: 100%;
  text-align: left;
}

.utext h2 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 0.35rem; }
.utext p { margin-bottom: 0.7rem; }
.utext ul { margin: 0 0 0.7rem 1.1rem; }
.utext li { margin-bottom: 0.2rem; }
.utext a { color: var(--grau); }

/* §8 — Porträt mit ovaler Maske zur randlosen Einbindung */
.portrait {
  display: block;
  margin: 0 auto 1.6rem;
  width: clamp(150px, 26vh, 240px);
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 46%, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 46%, #000 62%, rgba(0, 0, 0, 0) 100%);
}

.trenner { border: none; border-top: 1px solid #e8e4de; }

/* ============================================================
   Fitting the stack to short and small screens
   ------------------------------------------------------------
   The stack costs 1.391 x --bild + the two gaps before a word is drawn — a
   fixed FRACTION of height — while the text is a fixed PIXEL height. Tall
   screens have slack; short ones do not, and the overflow was being clipped.
   So --bild (and with it the circle, band and headline, which all derive from
   it) steps down as the viewport shortens or narrows.

   These tiers are gated so nothing matches at 1440x900 or larger: that layout
   is untouched. --cell-w is never changed here, so drag distance, cellRatio,
   parallax travel and FG_RATIO are all identical.
   ============================================================ */

/* B — shorter laptops (1366x768, 1280x720) */
@media (max-height: 820px) {
  :root {
    --bild: 40dvh;
    --band-gap-text: 2rem;
    --drag-bottom: 2rem;
  }
}

/* C — phones, where the narrow column makes the text much taller */
@media (max-width: 768px) {
  :root {
    --bild: 38dvh;
    --band-gap-text: 2rem;
    --drag-bottom: 2rem;
  }
}

/* C2 — short phones (e.g. 360x640) need a smaller circle again */
@media (max-width: 768px) and (max-height: 700px) {
  :root { --bild: 28dvh; }
}

/* D — landscape phones. Only ~50px was left for text here; the vertical stack
   cannot hold this much copy at 390px of height without also trimming the body
   type. --logozeile gets a floor because 0.2 x 28dvh would collapse the header
   row to ~22px and swallow the logo and nav. */
@media (max-height: 500px) {
  :root {
    --bild: 28dvh;
    --band-gap-text: 1rem;
    --drag-bottom: 1rem;
    --logozeile: max(2.5rem, calc(var(--bild) * 0.2));
  }

  .slide-body { font-size: 13px; }
}

/* The Kontakt and Datenschutz pages have no page title, so their first block
   starts the page — drop its top margin so nothing is left hanging. */
.utext > :first-child { margin-top: 0; }