/* Lieblingsbilder Home – mobile first.
   Feedback 28.10.2026 (Christian, Jule): warmer Papiergrund, große Fotos, wenig Text,
   wenig Animation, Rot und Blau als Flächen, Symbole groß und bewusst als Hintergrund.
   Keine farbigen Texthervorhebungen, kein Rot neben Schwarz. */

@font-face { font-family: "Raftwork"; src: url("../assets/fonts/raftwork.woff2?v=2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mint Magnolia"; src: url("../assets/fonts/mint-magnolia.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Saans"; src: url("../assets/fonts/saans-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Saans"; src: url("../assets/fonts/saans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Saans"; src: url("../assets/fonts/saans-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F6F1E9;
  --paper-deep: #EDE6DA;
  --ink: #1D1D1B;
  --ink-soft: #5F5A54;
  --white: #FFFFFF;
  --coral: #EB6956;
  --blue: #3856A1;
  --line: rgba(29, 29, 27, .18);

  --f-display: "Raftwork", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Saans", "Helvetica Neue", Arial, sans-serif;
  /* Handschrift nur als persönlicher Akzent, nie für längere Texte. Kein Gedankenstrich im Zeichensatz. */
  --f-hand: "Mint Magnolia", "Snell Roundhand", cursive;

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --space: clamp(72px, 14vw, 180px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glide: cubic-bezier(.65, 0, .1, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper) url("../assets/img/papier.jpg") center top / 900px auto repeat;
  color: var(--ink);
  font: 300 17px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Typo: ruhig, nicht plakativ */
.h2 { font: 400 clamp(30px, 7.4vw, 56px)/1.08 var(--f-display); font-stretch: 92%; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
.h3 { font: 400 26px/1.1 var(--f-display); font-stretch: 92%; margin: 0; }
.link { display: inline-block; font: 400 15px/1 var(--f-text); text-decoration: none; padding: 10px 0 7px; background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 100% 1px; transition: background-size .5s var(--glide); }
@media (hover: hover) { .link:hover { background-position: 0 100%; animation: link-redraw .7s var(--glide); } }
@keyframes link-redraw { 0% { background-size: 100% 1px; background-position: 100% 100%; } 45% { background-size: 0% 1px; background-position: 100% 100%; } 46% { background-position: 0 100%; } 100% { background-size: 100% 1px; background-position: 0 100%; } }
.hand { font: 400 clamp(40px, 11vw, 54px)/1.1 var(--f-hand); letter-spacing: 0; text-transform: none; }
.hint { display: block; font: 400 13px/1.4 var(--f-text); color: var(--ink-soft); }

.button {
  display: inline-block; width: fit-content; cursor: pointer;
  font: 400 14px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: transparent; border: 1px solid currentColor; border-radius: 0;
  padding: 17px 26px;
}
.button-light { color: var(--white); }

/* Hover: Die Fläche füllt sich weich von unten mit der Rahmenfarbe, die Schrift wechselt zur Gegenfarbe.
   Gilt für alle CTAs. --fill ist die Füllung, --fill-ink die Schrift darauf. */
.button, .menu .menu-cta {
  --fill: var(--ink); --fill-ink: var(--paper);
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 0%;
  transition: background-size .6s var(--glide), color .45s var(--glide), border-color .45s var(--glide);
}
.button-light { --fill: var(--white); --fill-ink: var(--blue); }
.bar.on-hero .menu-cta { --fill: var(--white); --fill-ink: var(--ink); }
@media (hover: hover) {
  .button:hover, .menu .menu-cta:hover, .button:focus-visible { background-size: 100% 100%; color: var(--fill-ink); border-color: var(--fill); }
}

/* Kopfzeile */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) 10px;
  transition: transform .4s var(--ease), color .3s;
}
/* Fläche als eigene Ebene: backdrop-filter direkt am .bar würde das fixierte Vollbild-Menü auf die Kopfzeile begrenzen */
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(246, 241, 233, .94); backdrop-filter: blur(8px); transition: opacity .3s; }
.bar.on-hero::before { opacity: 0; }
/* Über dem Header-Foto: keine eigene Fläche, Logo und Navigation direkt auf dem Bild */
.bar.on-hero { color: var(--white); }
.bar-logo .logo-light, .bar.on-hero .logo-dark { display: none; }
.bar.on-hero .logo-light { display: block; }
.bar.on-hero .menu-button { color: var(--white); }
.bar.is-hidden { transform: translateY(-100%); }
.bar-logo img { height: 44px; width: auto; }
.menu-button { font: 400 14px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; color: var(--ink); padding: 12px 0 12px 12px; cursor: pointer; }
.menu {
  position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: stretch; overflow-y: auto;
  padding: calc(92px + env(safe-area-inset-top, 0px)) var(--gutter) 48px; background: var(--paper);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s linear .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s; }
/* Mobil: Punkte rechtsbündig mit „Schließen“, getrennt durch feine Linien */
.menu a { font: 400 34px/1.1 var(--f-display); font-stretch: 92%; text-decoration: none; text-align: right; padding: 16px 0 14px; border-top: 1px solid var(--line); }
.menu a:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.menu .menu-cta { font: 400 14px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; margin-top: 32px; border: 1px solid var(--ink); padding: 17px 26px; width: fit-content; align-self: flex-end; }

/* 1 · Header: ein großes Schwarzweiß-Foto */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #2a2826; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* Slideshow: das Band gleitet magnetisch zum nächsten Bild, das Foto im Bild läuft leicht versetzt mit */
.hero-track { display: flex; height: 100%; will-change: transform; transition: transform 1.25s var(--glide); }
.hero-track.is-dragging, .hero-track.is-jump, .hero-track.is-jump .hero-photo { transition: none; }
.hero-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.hero-slide picture { display: block; height: 100%; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.25s var(--glide); pointer-events: none; -webkit-user-drag: none; }
/* Nachbarbilder etwas größer, damit der Versatz (12 %) nie eine Lücke am Rand zeigt */
.hero-slide.is-before .hero-photo { transform: translateX(12%) scale(1.25); }
.hero-slide.is-after .hero-photo { transform: translateX(-12%) scale(1.25); }
.hero-track.is-dragging .hero-photo { transition: none; }
/* Fokuspunkte mobil (Hochformat) */
.s1 .hero-photo { object-position: 40% 30%; }
.s2 .hero-photo { object-position: 50% 30%; }
.s3 .hero-photo { object-position: 52% 40%; }
.s4 .hero-photo { object-position: 45% 30%; }
/* Bild unbearbeitet. Nur ein leichter Schatten oben und unten, damit Navigation und Logo lesbar bleiben */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .36), transparent 24%, transparent 60%, rgba(0, 0, 0, .38)); pointer-events: none; }
.hero-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; gap: 12px; padding: 0 var(--gutter); color: var(--white); text-align: center; pointer-events: none; }
.hero-logo { width: min(64vw, 300px); height: auto; }
.logo-on-light { display: none; }
.hero-line { font: 400 13px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; }
.hero-line.hand { font: 400 clamp(36px, 10vw, 46px)/1 var(--f-hand); letter-spacing: 0; text-transform: none; }
/* Home: Der Block ist so breit wie das Logo, der Name sitzt wie eine Unterschrift rechts darunter */
.hero-home .hero-text { width: fit-content; margin-inline: auto; }
.hero-home .hero-line.hand { justify-self: end; margin: -6px -4% 0 0; }
/* Fortschritt: vier feine Linien, die aktive füllt sich bis zum nächsten Bild */
.hero-dots { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 4px; }
.hero-dots button { width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.hero-dots span { display: block; height: 1px; background: rgba(255, 255, 255, .45); position: relative; overflow: hidden; }
.hero-dots span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.hero-dots [aria-current] span::after { animation: hero-progress var(--hero-delay, 6s) linear forwards; }
.hero.is-paused .hero-dots [aria-current] span::after { animation-play-state: paused; }
@keyframes hero-progress { to { transform: scaleX(1); } }

/* Symbole groß im Hintergrund, wie persönliche Notizen */
.bg-sign { position: absolute; z-index: 0; pointer-events: none; height: auto; }
.intro, .reviews, .invite { position: relative; overflow: clip; }
.intro > :not(.bg-sign), .reviews > :not(.bg-sign), .invite > :not(.bg-sign) { position: relative; z-index: 1; }

/* 2 · Julia */
.intro { display: grid; gap: 36px; padding: var(--space) var(--gutter); }
.intro-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro-text { display: grid; gap: 18px; max-width: 34em; }
.intro-text .button { margin-top: 10px; }
.sign-naehe { width: 120vw; max-width: 980px; right: -46vw; top: 34%; opacity: .18; }

/* 3 · Julias Welt */
.world { padding: 0 var(--gutter) var(--space); }
.world-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.world-list li { border-bottom: 1px solid var(--line); }
.world-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.world-list a { display: grid; justify-items: center; gap: 14px; padding: 28px 12px; text-decoration: none; text-align: center; font: 400 clamp(13px, 3.4vw, 17px)/1.1 var(--f-display); font-stretch: 92%; }
.world-list .sketch, .world-list .sketch-svg { height: 52px; width: auto; }

/* 4 · Liebe Worte (Coral als Fläche, nur große weiße Schrift für ausreichenden Kontrast) */
.coral { background: var(--coral); color: var(--white); }
/* Eingefasstes Modul: an den Rändern läuft das Papier weiter */
.reviews { --pad: clamp(20px, 4vw, 64px); margin: 24px var(--gutter) 0; padding: clamp(56px, 9vw, 120px) 0; display: grid; gap: 32px; }
.reviews .h2 { padding: 0 var(--pad); }
.review-track { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); scrollbar-width: none; }
.review-track::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; border: 1px solid rgba(255, 255, 255, .7); padding: 28px 24px; display: grid; gap: 20px; align-content: space-between; min-height: 240px; }
.review blockquote { margin: 0; font: 400 24px/1.3 var(--f-text); }
.review figcaption { font: 400 24px/1.2 var(--f-text); }
/* Auf Coral nur große weiße Schrift */
.reviews-foot { padding: 0 var(--pad); font: 400 24px/1.35 var(--f-text); }
.reviews-foot .link { font: inherit; padding: 0 0 4px; }
.sign-worte { width: 78vw; max-width: 560px; right: -18vw; top: -4%; opacity: .22; filter: brightness(0) invert(1); }

/* 5 · Kleine Momente: Collage aus mehreren Bildern derselben Welt */
.moments { padding: var(--space) var(--gutter); display: grid; gap: 32px; }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.collage figure { min-width: 0; overflow: hidden; }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .c1 { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.collage .c2, .collage .c3 { aspect-ratio: 3 / 4; }
.collage .c4 { aspect-ratio: 3 / 4; }
.collage .c5 { aspect-ratio: 3 / 4; }
.collage .c6 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.collage .c7, .collage .c8 { aspect-ratio: 3 / 4; }
/* Fokuspunkte: Gesichter und Blicke bleiben im Ausschnitt */
.collage .c1 img { object-position: 50% 50%; }
.collage .c2 img { object-position: 50% 20%; }
.collage .c3 img { object-position: 50% 20%; }
.collage .c4 img { object-position: 50% 45%; }
.collage .c5 img { object-position: 55% 50%; }
.collage .c7 img { object-position: 50% 40%; }
.collage .c8 img { object-position: 50% 45%; }
.moments-foot { display: grid; gap: 10px; }
/* Instagram-Posts: ganze Kachel ist der Link, beim Überfahren leicht heller */
.insta-link { display: block; height: 100%; }
.insta-link img { transition: opacity .3s; }
.insta-link:hover img { opacity: .88; }

/* 6 · Einladung (Blau als Fläche) */
.blue { background: var(--blue); color: var(--white); }
.invite { padding: var(--space) var(--gutter); display: grid; gap: 22px; justify-items: start; }
.invite p { font-size: 19px; }
.invite p.hand { font-size: clamp(40px, 11vw, 56px); }
.sign-moment { width: 90vw; max-width: 640px; right: -30vw; bottom: -18%; opacity: .2; filter: brightness(0) invert(1); }

/* Footer mit Anfrageformular */
.footer { padding: var(--space) var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 64px; }
.footer-form { display: grid; gap: 22px; max-width: 34em; }
.form { display: grid; gap: 8px; }
.form label { font: 400 14px/1.3 var(--f-text); margin-top: 10px; }
.form input[type="text"], .form input[type="email"], .form textarea {
  width: 100%; font: 300 17px/1.4 var(--f-text); color: var(--ink);
  background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 0; padding: 14px;
}
.form .check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--ink-soft); }
.form .check input { margin: 0; width: 22px; height: 22px; accent-color: var(--ink); }
.form .button { margin-top: 18px; }
.form-note { font: 400 13px/1.4 var(--f-text); color: var(--ink-soft); margin-top: 6px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note:empty { display: none; }
.footer-meta { display: grid; gap: 20px; border-top: 1px solid var(--line); padding-top: 32px; font-size: 15px; }
.footer-meta img { height: 56px; width: auto; }
.footer-meta nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-meta a { text-decoration: none; display: inline-block; padding: 6px 0; }

/* Sanftes Einblenden, sonst keine Effekte */
.js .fade { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .fade.is-in { opacity: 1; transform: none; }

/* Gezeichnete Symbole: Maske zieht den Strich einmal nach */
.sketch-svg { display: block; overflow: visible; }
.sketch-svg .ink path { fill: currentColor; }
.sketch-svg .trace { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease-in-out; }
.sketch-svg.is-drawn .trace { stroke-dashoffset: 0; }

/* Tablet und Desktop */
@media (min-width: 900px) {
  :root { --gutter: max(44px, env(safe-area-inset-left, 0px)); }
  body { font-size: 18px; }
  .bar { padding-top: 16px; padding-bottom: 16px; }
  .bar-logo img { height: 52px; }
  .menu-button { display: none; }
  .menu { position: static; z-index: auto; flex-direction: row; align-items: center; gap: 30px; padding: 0; background: none; opacity: 1; visibility: visible; }
  .menu a, .menu a:nth-last-child(2) { font: 400 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; padding: 8px 0; border: 0; }
  .menu .menu-cta { margin-top: 0; padding: 12px 18px; }
  .menu .menu-home { display: none; } /* Home nur in der mobilen Navigation, Wunsch Julia 12.11.2026 */
  .menu a:not(.menu-cta) { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size .5s var(--glide); }
  .menu a[aria-current="page"] { text-decoration: none; background-size: 100% 1px; }
  .menu a:not(.menu-cta):hover { background-size: 100% 1px; }
  .bar.on-hero .menu-cta { border-color: var(--white); }
  /* Querformat: Logo rechts unten, Fortschritt links unten */
  .hero-text { bottom: 56px; left: auto; right: var(--gutter); justify-items: end; text-align: right; padding: 0; }
  .hero-logo { width: 300px; }
  /* Home: Logo groß und linksbündig auf dem Foto. Beim Scrollen zieht es in die Kopfzeile (main.js) */
  /* Senkrecht mittig, links auf der Inhaltskante. Name mittelachsig unter dem Logo.
     translate zentriert, transform bleibt frei für den Übergang in main.js */
  .hero-home .hero-text { position: fixed; z-index: 31; top: 50%; bottom: auto; translate: 0 -50%; left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); right: auto; justify-items: center; text-align: center; gap: 18px; color: var(--white); transform-origin: 0 0; will-change: transform, opacity; }
  .hero-home .hero-logo { width: clamp(380px, 30vw, 540px); }
  /* Logo über der Hand des Babys: etwas höher als mittig, damit Name und Hand frei bleiben */
  /* Links am Fensterrand statt an der Inhaltskante, sonst rückt es auf großen Bildschirmen ins Baby */
  .hero-home .hero-text { top: 36%; left: max(var(--gutter), 4vw); }
  /* Startbild (hochkant) nur am Handy. Ab Tablet Julias Querformat (Baby auf dunkler Decke), Logo und Navigation in Weiß. Feedback 05.11.2026 */
  .hero-home .hero-text { margin: 0; }
  .hero-home .hero-line.hand { font-size: clamp(52px, 4.4vw, 76px); }
  .hero-dots { left: var(--gutter); transform: none; bottom: 52px; }
  .s1 .hero-photo { object-position: 50% 35%; }
  .s2 .hero-photo { object-position: 50% 30%; }
  .s3 .hero-photo { object-position: 50% 45%; }
  .s4 .hero-photo { object-position: 50% 50%; }

  .intro { grid-template-columns: 5fr 6fr; gap: clamp(48px, 7vw, 120px); align-items: center; max-width: 1400px; margin: 0 auto; }
  .sign-naehe { width: 60vw; right: -12vw; top: 10%; }

  .world { max-width: 1400px; margin: 0 auto; }
  .world-list { grid-template-columns: repeat(4, 1fr); }
  .world-list li:nth-child(odd) { border-right: 0; }
  .world-list li:not(:last-child) { border-right: 1px solid var(--line); }
  .world-list a { padding: 44px 16px; font-size: clamp(16px, 1.32vw, 20px); }
  .world-list .sketch, .world-list .sketch-svg { height: 64px; }

  .reviews { margin: 0 max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .review-track { grid-auto-columns: calc((100% - 32px) / 3); }

  .moments { max-width: 1400px; margin: 0 auto; }
  /* Festes Raster: drei gleich hohe Reihen, jedes Bild füllt seine Zelle. Keine Lücken bei keiner Breite */
  .collage { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(240px, 23vw, 360px)); gap: 14px; }
  .collage figure { aspect-ratio: auto; height: 100%; }
  .collage .c1 { grid-column: 1 / 7; grid-row: 1 / 3; aspect-ratio: auto; }
  .collage .c2 { grid-column: 7 / 10; grid-row: 1; aspect-ratio: auto; }
  .collage .c3 { grid-column: 10 / 13; grid-row: 1; aspect-ratio: auto; }
  .collage .c4 { grid-column: 7 / 10; grid-row: 2; aspect-ratio: auto; }
  .collage .c5 { grid-column: 10 / 13; grid-row: 2; aspect-ratio: auto; }
  .collage .c6 { grid-column: 1 / 7; grid-row: 3; aspect-ratio: auto; }
  .collage .c7 { grid-column: 7 / 10; grid-row: 3; aspect-ratio: auto; }
  .collage .c8 { grid-column: 10 / 13; grid-row: 3; aspect-ratio: auto; }
  .collage .c5 img { object-position: 50% 50%; }
  .moments-foot { grid-template-columns: auto 1fr; align-items: baseline; gap: 24px; }

  .invite { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .invite .h2 { max-width: 14em; }

  .footer { grid-template-columns: 6fr 4fr; gap: 80px; max-width: 1400px; margin: 0 auto; align-items: end; }
  .footer-meta { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-track, .hero-photo { transition: none; }
  .hero-dots [aria-current] span::after { animation: none; transform: scaleX(1); }
  .js .fade { opacity: 1; transform: none; transition: none; }
  .sketch-svg .trace { stroke-dashoffset: 0; transition: none; }
}

/* ───── Unterseiten (29.10.2026): Bilder, Über mich, Preise, Waldauszeit ───── */

/* Seitenkopf ohne Foto: Titel und kurzer Einstieg auf Papier */
.page-head { position: relative; overflow: clip; padding: calc(132px + env(safe-area-inset-top, 0px)) var(--gutter) calc(var(--space) * .6); display: grid; gap: 22px; }
.page-head > :not(.bg-sign) { position: relative; z-index: 1; }
.page-head .h1 { font: 400 clamp(44px, 12vw, 104px)/1 var(--f-display); font-stretch: 92%; margin: 0; text-wrap: balance; }
.page-head p { max-width: 30em; }
.lead { font-size: 19px; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* Textblöcke mit Zwischenüberschrift */
.text-block { padding: 0 var(--gutter) var(--space); display: grid; gap: 18px; max-width: 34em; box-sizing: content-box; }
.text-block .h2 { margin-bottom: 6px; }

/* Bilder: Kategorien untereinander, Bilder seitlich wischen */
.gallery { padding-bottom: calc(var(--space) * .7); }
.gallery-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 var(--gutter); padding-top: 22px; border-top: 1px solid var(--line); }
.gallery-head .h2 { font-size: clamp(30px, 7.4vw, 48px); }
.gallery-nav { display: flex; align-items: center; gap: 6px; font: 400 13px/1 var(--f-text); letter-spacing: .1em; color: var(--ink-soft); white-space: nowrap; }
.gallery-nav button { display: none; }
.gallery-sub { margin: 8px var(--gutter) 0; font: 400 14px/1.4 var(--f-text); color: var(--ink-soft); }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 22px var(--gutter) 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track figure { scroll-snap-align: start; min-width: 0; }
.gallery-track img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-deep); }
.gallery-track .wide img { aspect-ratio: 4 / 5; }
/* Querformate mit Menschen am rechten Rand: im Hochformat-Ausschnitt nach rechts schieben */
.gallery-track img.focus-right { object-position: 92% 50%; }
.gallery-more { margin: 14px var(--gutter) 0; }

/* Über mich */
.about-photo { padding: 0 var(--gutter) var(--space); }
/* Mobil: erst der erste Absatz, dann das Porträt, damit nicht zwei Fotos untereinander stehen */
.about { display: flex; flex-direction: column; }
.about > div { display: contents; }
.about > div > .text-block:first-child { order: 1; }
.about-photo { order: 2; }
.about > div > .text-block:nth-child(n+2) { order: 3; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-photo figcaption { margin-top: 10px; }
.world-pair { padding: 0 var(--gutter) var(--space); display: grid; gap: 48px; }
.world-pair article { display: grid; gap: 16px; }
.world-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.world-pair .h3 { margin-top: 6px; }

/* Preise: ruhige Liste, durch feine Linien getrennt */
.prices { padding: 0 var(--gutter) var(--space); }
.price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 34px 0 38px; border-top: 1px solid var(--line); }
.price:last-child { border-bottom: 1px solid var(--line); }
/* Preis immer rechts neben der Bezeichnung, auch am Handy (Feedback Julia, 04.11.2026) */
.price-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 16px; }
.price .h3 { font-size: clamp(28px, 7vw, 40px); }
.price-sub { font: 400 14px/1.4 var(--f-text); color: var(--ink-soft); }
.price-amount { text-align: right; font: 400 clamp(22px, 5.8vw, 40px)/1 var(--f-display); font-stretch: 92%; white-space: nowrap; }
.price ul, .check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.price li, .check-list li { padding-left: 22px; position: relative; }
.price li::before, .check-list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; border-top: 1px solid currentColor; }
.price-date { font-weight: 500; }
.price-cta { display: grid; gap: 14px; justify-items: start; }
.price .button { margin-top: 8px; }
.voucher { position: relative; overflow: clip; padding: var(--space) var(--gutter); display: grid; gap: 22px; justify-items: start; }
.voucher > :not(.bg-sign) { position: relative; z-index: 1; }
.voucher p { max-width: 30em; font-size: 19px; }
.sign-herz { width: 80vw; max-width: 560px; right: -24vw; bottom: -20%; opacity: .2; filter: brightness(0) invert(1); }

/* Waldauszeit */
/* Seiten-Hero (Bilder, Über mich, Preise, Waldauszeit): ein großes Motiv, Titel links unten */
.hero-page .hero-photo { transform: none; }
.hero-page picture { display: block; height: 100%; }
.hero-page .hero-text { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); left: 0; right: auto; justify-items: start; text-align: left; gap: 14px; }
.hero-page .hero-title { text-wrap: balance; }
.hero-wald .hero-photo { object-position: 50% 64%; }
.hero-bilder .hero-photo { object-position: 30% 50%; }
.hero-preise .hero-photo { object-position: 46% 50%; }
.hero-ueber .hero-photo { object-position: 50% 30%; }
/* Helle Motive: Titel und Kopfzeile in Tinte, kein dunkler Verlauf */
.hero-light::after { background: linear-gradient(to bottom, rgba(246, 241, 233, .5), transparent 22%); }
.hero-light .hero-text { color: var(--ink); }
.bar.on-light { color: var(--ink); }
.bar.on-hero.on-light .logo-light { display: none; }
.bar.on-hero.on-light .logo-dark { display: block; }
.bar.on-light .menu-button { color: var(--ink); }
.bar.on-hero.on-light .menu-cta { --fill: var(--ink); --fill-ink: var(--white); border-color: var(--ink); }
/* Text unter dem Seiten-Hero */
.page-intro { padding-top: var(--space); }
.hero-page + .about { padding-top: var(--space); }
.hero-title { font: 400 clamp(48px, 13vw, 112px)/1 var(--f-display); font-stretch: 92%; margin: 0; }
.wald-intro { padding: var(--space) var(--gutter); display: grid; gap: 18px; max-width: 34em; box-sizing: content-box; position: relative; }
.wald-intro .h2 { margin-bottom: 6px; }
.dates { position: relative; overflow: clip; padding: var(--space) var(--gutter); display: grid; gap: 26px; }
.dates > :not(.bg-sign) { position: relative; z-index: 1; }
.dates-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dates-list li { font: 400 clamp(30px, 8vw, 56px)/1.1 var(--f-display); font-stretch: 92%; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .55); }
.dates-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .55); }
/* Auf Coral nur große weiße Schrift, sonst reicht der Kontrast nicht */
.dates p { font: 400 24px/1.3 var(--f-text); }
.sign-wald { width: 90vw; max-width: 600px; right: -26vw; top: -10%; opacity: .22; filter: brightness(0) invert(1); }
.included { padding: var(--space) var(--gutter); display: grid; gap: 22px; }
.included .price-amount { margin-top: 10px; }
.faq { padding: 0 var(--gutter) var(--space); display: grid; gap: 26px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 400 19px/1.35 var(--f-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 26px/1 var(--f-text); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; display: grid; gap: 12px; max-width: 36em; color: var(--ink-soft); }

@media (min-width: 900px) {
  .page-head { padding-top: 200px; max-width: 1400px; margin: 0 auto; }
  .page-head .lead { font-size: 21px; }
  .text-block { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }

  .gallery-head, .gallery-sub, .gallery-more { margin-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); margin-right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .gallery-nav button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: none; color: var(--ink); font: 300 20px/1 var(--f-text); cursor: pointer; transition: border-color .3s; }
  .gallery-nav button { background: linear-gradient(var(--ink), var(--ink)) no-repeat 50% 100% / 100% 0%; transition: background-size .5s var(--glide), color .35s var(--glide), border-color .35s; }
  .gallery-nav button:hover { border-color: var(--ink); background-size: 100% 100%; color: var(--paper); }
  .gallery-nav [data-count] { min-width: 4.5em; text-align: center; }
  .gallery-track { grid-auto-columns: max-content; gap: 14px; padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .gallery-track img, .gallery-track .wide img { height: min(78vh, 760px); width: auto; aspect-ratio: auto; }

  .about > div { display: block; }
  .about { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(48px, 7vw, 120px); align-items: start; max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
  .about .text-block, .about .about-photo { padding-left: 0; padding-right: 0; }
  .about-photo { position: sticky; top: 110px; }
  .world-pair { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); max-width: 1400px; margin: 0 auto; }

  .prices { max-width: 1400px; margin: 0 auto; }
  .price { grid-template-columns: 5fr 4fr 3fr; align-items: start; column-gap: 48px; }
  .price-top { grid-column: 1; grid-template-columns: 1fr; gap: 10px; }
  .price-amount { text-align: left; }
  .price ul { grid-column: 2; }
  .price .price-cta { grid-column: 3; justify-self: end; display: grid; gap: 14px; justify-items: end; text-align: right; }
  .price .price-cta .button { margin-top: 0; }
  .voucher { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }

  .hero-bilder .hero-photo { object-position: 50% 0%; }
  .hero-page .hero-text { left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); bottom: 56px; }
  .page-intro { padding-top: var(--space); }
  .wald-intro { padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .dates { grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: end; padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  .dates .h2 { grid-column: 1 / -1; }
  .included, .faq { max-width: 1400px; margin: 0 auto; }
  .included { grid-template-columns: 6fr 5fr; column-gap: 80px; align-items: start; }
  .included .h2 { grid-column: 1 / -1; }
  .faq { grid-template-columns: 4fr 7fr; column-gap: 80px; align-items: start; }

  /* Headline und Fließtext: Text etwa 50 % breiter als vorher (Wunsch Wolfram 05.11.2026), bündig unter der Headline
     (Wunsch Julia 10.11.2026, die Einrückung über --copy-offset ist auf 0 gesetzt). Nicht für Listen, FAQ und zweispaltige Module. */
  .wald-intro, .voucher, main > .text-block:has(> .h2 + p) { max-width: none; box-sizing: border-box; }
  .wald-intro > :not(.h2), .voucher > :not(.h2):not(.bg-sign), main > .text-block:has(> .h2 + p) > :not(.h2) { margin-left: var(--copy-offset); }
  .wald-intro > p, main > .text-block > p { max-width: 54rem; }
  .voucher p { max-width: 45em; }
  .wald-intro > .h2, main > .text-block > .h2 { max-width: 14em; }
}
:root { --copy-offset: 0px; }

/* Impressum und Datenschutz */
.legal { padding: 0 var(--gutter) var(--space); display: grid; gap: 14px; max-width: 46em; box-sizing: content-box; }
.legal .h3 { margin-top: 34px; }
.legal .h3:first-child { margin-top: 0; }
.legal h3:not(.h3) { font: 500 17px/1.4 var(--f-text); margin: 14px 0 0; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 1.2em; }
.legal a { overflow-wrap: anywhere; }
.page-legal .page-head { padding-bottom: 48px; }
@media (min-width: 900px) {
  .legal { max-width: 1400px; margin: 0 auto; box-sizing: border-box; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); column-gap: clamp(48px, 7vw, 120px); row-gap: 14px; align-items: start; }
  .legal > :not(.h3) { grid-column: 2; max-width: 54rem; }
  .legal .h3, .legal .h3 + * { margin-top: 44px; }
  .legal .h3 { grid-column: 1; }
  .legal .h3 + h3 { margin-top: 44px; }
  .legal .h3:first-child, .legal .h3:first-child + * { margin-top: 0; }
}

/* Instagram: feste Sektion, der Name des Kontos groß als Link, daneben das Profil im Handy. Baustein für alle Seiten */
.insta { position: relative; overflow: clip; padding: var(--space) var(--gutter); display: grid; gap: 48px; border-top: 1px solid var(--line); }
.insta > :not(.bg-sign) { position: relative; z-index: 1; }
.insta-text { display: grid; gap: 22px; justify-items: start; align-content: center; }
.insta-text .hand { margin: 0; }
.insta-text p { margin: 0; max-width: 30em; }
.insta-handle { margin: 0; font: 400 clamp(20px, 5.6vw, 64px)/1 var(--f-display); font-stretch: 92%; letter-spacing: -.01em; overflow-wrap: anywhere; }
.insta-handle a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: .08em; transition: background-size .5s var(--glide); }
.sign-insta { width: 70vw; max-width: 520px; left: -24vw; top: 6%; opacity: .12; }
@media (hover: hover) { .insta-handle a:hover { background-size: 0 1px; background-position: 100% 100%; } }

/* Handy-Mockup: Rahmen in Tinte, darin Julias Profil im Stil der App */
.phone { zoom: .8; justify-self: center; display: block; width: min(300px, 82vw); aspect-ratio: 9 / 19; padding: 10px; border-radius: 46px; background: var(--ink); box-shadow: 0 30px 60px -30px rgba(29, 29, 27, .45); text-decoration: none; color: #111; transition: transform .6s var(--ease); }
.phone-screen { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; overflow: hidden; border-radius: 37px; background: #fff; padding: 46px 14px 0; font: 400 12px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.phone-screen::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 88px; height: 24px; border-radius: 12px; background: var(--ink); }
.ig-top { font-weight: 700; font-size: 14px; }
.ig-head { display: flex; gap: 12px; align-items: flex-start; }
.ig-avatar { flex: 0 0 64px; height: 64px; border-radius: 50%; background: #efe4da; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d9cfc6; }
.ig-avatar img { width: 46px; height: auto; }
.ig-name { display: block; font-size: 11.5px; color: #333; }
.ig-name b { display: block; font-weight: 600; color: #111; margin-bottom: 2px; }
.ig-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ig-actions span { display: block; padding: 7px 10px; border-radius: 8px; background: #efefef; text-align: center; font-weight: 600; }
.ig-actions .ig-follow { background: #0064e0; color: #fff; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -14px; }
.ig-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
@media (hover: hover) { .phone:hover { transform: translateY(-6px) rotate(-1deg); } }

@media (min-width: 900px) {
  .insta { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: clamp(48px, 6vw, 120px); padding-left: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter))); }
  /* kleiner als vorher, damit der Pfeil zum externen Link in der Zeile bleibt (Feedback Julia 12.11.2026) */
  .insta-handle { font-size: clamp(28px, 3.3vw, 52px); white-space: nowrap; }
  .phone { width: 320px; rotate: 2deg; }
  .sign-insta { left: -10vw; top: auto; bottom: -34%; }
}

/* Pfeil an jedem Link auf eine fremde Seite (target="_blank"), einheitlich auf allen Seiten.
   Gezeichnet statt als Zeichen ↗, das iOS als Emoji darstellt. Ausnahme: das Handy-Mockup als Ganzes */
a[target="_blank"]:not(.phone)::after, .world-list a[target="_blank"] span::after {
  content: ""; display: inline-block; width: .62em; height: .62em; margin-left: .3em; vertical-align: .05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath d='M2 8 8 2M3.5 2H8v4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.world-list a[target="_blank"]::after { content: none; }
.insta-handle a::after { width: .42em; height: .42em; margin-left: .18em; vertical-align: .32em; }