/* ==========================================================================
   my-reisefotografie.de - Redesign (Startseite + Unterseiten)
   Ein Stylesheet, keine Abhaengigkeiten. Aufbau:

   01 Token
   02 Grundlagen
   03 Bausteine (Button, Eyebrow, Section, Karte)
   04 Kopf und Navigation
   05 Hero
   06 Claim-Band
   07 Fotoreisen
   08 Lernwege
   09 Seminar / Coaching (Split)
   10 Buch
   11 Ueber mich
   12 Videos
   13 Newsletter
   14 Galerie und Lightbox
   15 Partner
   16 Kontakt und Fuss
   17 Einblenden beim Scrollen
   18 Schmale Ansichten
   19 Unterseiten (Hero, Brotkrumen, Detail, Dropdown)
   ========================================================================== */

/* -- 01 Token ------------------------------------------------------------- */

:root {
    /* Orange ist die Hausfarbe des bestehenden Auftritts und bleibt unveraendert. */
    --orange: #e86a1e;
    --orange-dark: #c9541a;
    --orange-light: #f4923f;
    --orange-tint: #fdf1e7;

    /* Dunkle Flaechen: warmes Anthrazit, damit die Fotos nicht kaltblau kippen. */
    --ink: #191b1f;
    --ink-soft: #23262b;
    --text: #23262b;
    --muted: #6d737b;

    --paper: #ffffff;
    --sand: #f8f5f0;
    --line: #e6e1d8;

    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Oswald', 'Inter', system-ui, sans-serif;

    --container: 1240px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow: 0 1px 2px rgba(25, 27, 31, .06), 0 12px 28px -18px rgba(25, 27, 31, .35);
    --shadow-lg: 0 24px 60px -28px rgba(25, 27, 31, .5);
    --header-h: 78px;
}

/* -- 02 Grundlagen -------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--text);
    font: 400 17px/1.65 var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--orange-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.01em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Ankerziele muessen unter dem klebenden Kopf landen, nicht darunter verschwinden. */
[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(18px, 4vw, 40px);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:where(a, button, input, summary):focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Blazor FocusOnNavigate focuses #inhalt (or h1) after each page load — no visible ring. */
#inhalt:focus,
h1:focus {
    outline: none;
}

/* -- 03 Bausteine --------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .82em 1.5em;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 600 15px/1 var(--font-body);
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }

.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

.btn--outline { background: transparent; border-color: var(--line); color: var(--text); }
.btn--outline:hover { border-color: var(--orange); color: var(--orange-dark); }

.btn--small { padding: .62em 1.15em; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font: 500 13px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--orange);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--sand { background: var(--sand); }
.section--dark { background: var(--ink); color: #eceae6; }
.section--orange { background: var(--orange); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--orange h2, .section--orange h3 { color: #fff; }
.section--dark .lead { color: #c2bdb5; }

.section-head { max-width: 66ch; margin-bottom: clamp(30px, 4vw, 52px); }
.section-head h2 { margin-top: .35em; }

.lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--muted);
    max-width: 62ch;
}

.split-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(30px, 4vw, 52px);
}

.split-head .section-head { margin-bottom: 0; }

/* -- 04 Kopf und Navigation ----------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    margin-right: auto;
}

.brand__mark { width: 40px; height: 40px; flex: none; color: var(--orange); }
.brand__mark svg { width: 100%; height: 100%; display: block; }

.brand__name {
    font: 700 20px/1.05 var(--font-body);
    letter-spacing: -.02em;
}

.brand__name span { color: var(--orange); }

.brand__sub {
    display: block;
    font: 500 10.5px/1.3 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .19em;
    color: var(--muted);
    margin-top: 3px;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 19px;
    cursor: pointer;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.4vw, 22px);
}

.site-nav a {
    font: 500 15px/1 var(--font-body);
    text-decoration: none;
    color: var(--text);
    padding: 8px 2px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}

.site-nav a:hover,
.site-nav a.is-active,
.site-nav .nav-drop.is-active > .nav-drop__trigger {
    color: var(--orange-dark);
    border-bottom-color: var(--orange);
}
.site-nav a.btn {
    /* Keep the same padding as body CTAs; .site-nav a would otherwise squash it. */
    padding: .82em 1.5em;
    font: 600 15px/1.15 var(--font-body);
    letter-spacing: .01em;
    border-bottom: 2px solid transparent;
    color: #fff;
}
.site-nav a.btn:hover { color: #fff; }

.nav-drop { position: relative; }

.nav-drop__trigger {
    font: 500 15px/1 var(--font-body);
    text-decoration: none;
    color: var(--text);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    display: inline-block;
}

.nav-drop__menu {
    display: none;
    position: absolute;
    /* Sit under the trigger; visual offset comes from padding so the pointer
       never leaves .nav-drop while moving into the flyout. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    padding: 12px 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 40;
}

.nav-drop__menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    bottom: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    z-index: -1;
}

.nav-drop__menu a {
    position: relative;
    display: block;
    padding: 10px 16px;
    border-bottom: 0;
    white-space: nowrap;
}

.nav-drop__menu a:hover { background: var(--orange-tint); }

@media (hover: hover) and (pointer: fine) {
    .nav-drop:hover > .nav-drop__menu,
    .nav-drop:focus-within > .nav-drop__menu { display: block; }
}

/* -- 05 Hero -------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }

.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Ohne JavaScript liegen alle Bilder uebereinander - dann zeigt der Browser das
   letzte. Erst .hero__slide--js macht sie unsichtbar und die Slideshow uebernimmt. */
.hero__slide--js { opacity: 0; transition: opacity 1.4s ease; }
.hero__slide--js.is-active { opacity: 1; }

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(20, 21, 24, .72) 0%, rgba(20, 21, 24, .16) 34%, rgba(20, 21, 24, .5) 68%, rgba(20, 21, 24, .92) 100%),
        linear-gradient(90deg, rgba(20, 21, 24, .68) 0%, rgba(20, 21, 24, 0) 62%);
}

/* Nur padding-block setzen - ein padding-Shorthand wuerde das
   seitliche Padding von .container ueberschreiben. */
.hero__content {
    padding-block: clamp(120px, 16vh, 190px) clamp(34px, 5vw, 60px);
}

.hero .eyebrow { color: #fbc999; }

.hero h1 {
    margin: .3em 0 .45em;
    max-width: 22ch;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -.015em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.hero h1 em {
    font-style: normal;
    color: var(--orange-light);
    display: block;
}

.hero__lead {
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    color: #ede9e4;
    max-width: 46ch;
    margin-bottom: 1.6em;
}

.hero__lead strong { color: #fff; }

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 38px;
    margin-top: clamp(30px, 5vw, 52px);
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.hero__meta div { min-width: 118px; }

.hero__meta b {
    display: block;
    font: 600 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--font-display);
    color: var(--orange-light);
}

.hero__meta span {
    font-size: 13.5px;
    color: #d6d2cc;
    letter-spacing: .02em;
}

.hero__dots {
    position: absolute;
    right: clamp(18px, 4vw, 40px);
    bottom: clamp(34px, 5vw, 60px);
    display: flex;
    gap: 9px;
}

.hero__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}

.hero__dots button.is-active { background: var(--orange); transform: scale(1.5); }

/* -- 06 Claim-Band -------------------------------------------------------- */

.claim {
    background: var(--orange);
    color: #fff;
    padding: clamp(30px, 4vw, 46px) 0;
    text-align: center;
}

.claim p {
    font: 600 clamp(1.4rem, 3.4vw, 2.5rem)/1.12 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}

.claim small {
    display: block;
    margin-top: .7em;
    font: 500 13px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .82);
}

/* -- 07 Fotoreisen -------------------------------------------------------- */

.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
}

.trip {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
}

.trip:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.trip--wide { grid-column: span 2; }

.trip__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink);
}

.trip__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s ease;
}

.trip:hover .trip__media img { transform: scale(1.05); }

.trip__month {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 8px 12px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    font: 600 13px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--orange-dark);
}

.trip__flag {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font: 600 12px/1.1 var(--font-body);
    letter-spacing: .02em;
}

.trip__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: clamp(20px, 2.2vw, 28px);
}

.trip__body h3 { margin-bottom: .3em; }

.trip__sub {
    color: var(--orange-dark);
    font-size: 14.5px;
    font-weight: 500;
    margin-bottom: .9em;
}

.trip__text { font-size: 15.5px; color: var(--muted); }

.trip__facts {
    list-style: none;
    margin: 22px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 9px;
    font-size: 15px;
}

.trip__facts li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: start;
}

.trip__facts svg { width: 18px; height: 18px; margin-top: 3px; color: var(--orange); flex: none; }

/* Nicht umbrechen: sonst steht der Preis in einer Karte neben und in der naechsten
   ueber dem Button, und die Kartenreihe wirkt schief. Der Zusatz unter dem Preis
   darf stattdessen zweizeilig werden. */
.trip__foot {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
}

.trip__foot .btn { flex: none; }

.trip__price {
    flex: 1 1 auto;
    min-width: 0;
    font: 600 1.6rem/1 var(--font-display);
    color: var(--text);
}

.trip__price small {
    display: block;
    font: 400 12.5px/1.3 var(--font-body);
    color: var(--muted);
    letter-spacing: 0;
    margin-top: 4px;
}

.trip-note {
    margin-top: clamp(24px, 3vw, 36px);
    padding: 20px 24px;
    background: var(--orange-tint);
    border-left: 4px solid var(--orange);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 15.5px;
}

/* -- 08 Lernwege ---------------------------------------------------------- */

.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.learn {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 2.4vw, 32px);
    display: flex;
    flex-direction: column;
}

.learn__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--orange-tint);
    color: var(--orange-dark);
    margin-bottom: 20px;
}

.learn__icon svg { width: 26px; height: 26px; }

.learn h3 { font-size: 1.28rem; margin-bottom: .45em; }
.learn p { font-size: 15.5px; color: var(--muted); }

.learn__link {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font: 600 14.5px/1 var(--font-body);
    text-decoration: none;
    color: var(--orange-dark);
    display: inline-flex;
    gap: .5em;
    align-items: center;
}

.learn__link:hover { gap: .9em; }
.learn__link span { transition: transform .2s; }

/* -- 09 Seminar / Coaching (Split) ---------------------------------------- */

.split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.split--flip .split__media { order: 2; }

.split__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 3;
}

.split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split__tag {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(25, 27, 31, .78);
    color: #fff;
    font: 500 12.5px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .14em;
}

.checklist {
    list-style: none;
    margin: 26px 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.checklist li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    font-size: 16px;
}

.checklist svg { width: 20px; height: 20px; margin-top: 4px; color: var(--orange); }

.pricetag {
    display: inline-flex;
    align-items: baseline;
    gap: .5em;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--orange-tint);
    color: var(--orange-dark);
    font: 600 17px/1 var(--font-body);
    margin-bottom: 22px;
}

.pricetag small { font-weight: 400; font-size: 13.5px; color: var(--muted); }

/* -- 10 Buch -------------------------------------------------------------- */

.book {
    display: grid;
    grid-template-columns: minmax(240px, .8fr) 1.2fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

/* Das Coverfoto ist ein Produktbild auf weissem Grund. Auf der dunklen Flaeche
   wirkt das nur dann nicht wie ein Fehler, wenn das Weiss als eigene Karte
   auftritt - deshalb der helle Rahmen. */
.book__cover {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(16px, 2vw, 26px);
    box-shadow: var(--shadow-lg);
}

.book__cover img { width: 100%; }

/* -- 11 Ueber mich -------------------------------------------------------- */

.about {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(28px, 4.5vw, 66px);
    align-items: center;
}

.about__portrait {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lg);
}

.about__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Martin steht rechts der Bildmitte; sonst schneidet das Hochformat ihn an. */
    object-position: 62% 50%;
}

.about__quote {
    margin: 0 0 24px;
    font: 600 clamp(1.35rem, 2.3vw, 1.9rem)/1.24 var(--font-display);
    color: var(--text);
    /* Sonst rutscht nur das Schlusszeichen in die zweite Zeile. */
    text-wrap: balance;
}

.about__quote span { color: var(--orange); }

.media-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.media-list a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 13px 2px;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: var(--text);
    font-size: 15.5px;
    transition: color .18s, padding-left .18s;
}

.media-list li:last-child a { border-bottom: 1px solid var(--line); }
.media-list a:hover { color: var(--orange-dark); padding-left: 8px; }

.media-list b {
    font: 500 11.5px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--orange);
}

/* -- 12 Videos ------------------------------------------------------------ */

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: clamp(18px, 2.2vw, 26px);
}

.video-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    cursor: pointer;
    display: block;
    width: 100%;
    color: #fff;
    text-align: left;
    text-decoration: none;
}

.video-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
    transition: opacity .25s, transform 1s;
}

.video-card:hover img { opacity: 1; transform: scale(1.04); }

.video-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--orange);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    transition: transform .2s;
}

.video-card:hover .video-card__play { transform: scale(1.1); }
.video-card__play svg { width: 22px; height: 22px; margin-left: 3px; }

.video-card__title {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: 34px 16px 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85));
    font: 500 14.5px/1.35 var(--font-body);
}

/* -- 13 Newsletter -------------------------------------------------------- */

.signup {
    background: linear-gradient(120deg, var(--orange) 0%, var(--orange-dark) 100%);
    color: #fff;
    padding: clamp(44px, 6vw, 78px) 0;
}

.signup--default,
.signup--sand {
    color: var(--ink);
}

.signup--default { background: var(--paper); }
.signup--sand { background: var(--sand); }
.signup--dark { background: var(--ink); }

.signup--default h2,
.signup--sand h2 { color: var(--ink); }

.signup--default .eyebrow,
.signup--sand .eyebrow { color: var(--orange-dark); }

.signup--default p,
.signup--sand p { color: var(--ink-soft); }

.signup__inner {
    display: grid;
    grid-template-columns: 1fr minmax(300px, .85fr);
    gap: clamp(26px, 4vw, 60px);
    align-items: center;
}

.signup h2 { color: #fff; margin-bottom: .35em; }
.signup .eyebrow { color: rgba(255, 255, 255, .85); }
.signup p { color: rgba(255, 255, 255, .92); max-width: 48ch; }

.signup__form { display: grid; gap: 12px; }

.signup__row { display: flex; flex-wrap: wrap; gap: 12px; }

.signup__form input {
    flex: 1 1 210px;
    min-width: 0;
    padding: .92em 1.1em;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: 400 16px/1 var(--font-body);
}

.signup__form input::placeholder { color: rgba(255, 255, 255, .7); }
.signup__form input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .2); }

.signup__form .btn--white { background: #fff; border-color: #fff; color: var(--orange-dark); }
.signup__form .btn--white:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.signup__note { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.signup__note a { color: #fff; }

/* -- 14 Galerie und Lightbox ---------------------------------------------- */

/* Feste Zeilenhoehe statt Seitenverhaeltnis je Kachel: ein Bild ueber zwei Spalten
   waere sonst auch doppelt so hoch, und die Reihe reisst auf. */
.section--gallery .section-head .lead { color: #c2bdb5; }

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(140px, 15vw, 215px);
    gap: 12px;
}

.gallery__item {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-soft);
    cursor: zoom-in;
}

.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }

.gallery__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s, filter .3s;
}

.gallery__item:hover img { transform: scale(1.06); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: 28px;
    background: rgba(12, 13, 15, .94);
}

.lightbox.is-open { display: grid; }

.lightbox img {
    max-width: min(1400px, 100%);
    max-height: calc(100vh - 130px);
    width: auto;
    border-radius: 8px;
}

.lightbox__bar {
    position: absolute;
    left: 50%;
    bottom: 22px;
    translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
}

.lightbox__count { font: 500 14px/1 var(--font-display); letter-spacing: .12em; }

.lightbox__btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__btn:hover { background: var(--orange); border-color: var(--orange); }

.lightbox__close { position: absolute; top: 22px; right: 22px; }

/* -- 15 Partner ----------------------------------------------------------- */

/* Gleich breite Kacheln im Raster: die fuenf Logos stehen sonst als 4 + 1 da. */
/* Default sand so it contrasts after white/dark content. If the last block
   inside <main> is already sand, flip to paper so two sand bands never meet. */
.section--partners { background: var(--sand); }
main:has(> .section--sand:last-child) + .section--partners { background: var(--paper); }

.partners {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.6vw, 22px);
}

.partners a {
    display: grid;
    place-items: center;
    padding: 16px 22px;
    min-height: 96px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s, border-color .2s;
}

.partners a:hover { transform: translateY(-3px); border-color: var(--orange); }
.partners img { max-height: 46px; width: auto; }

/* -- 16 Kontakt und Fuss -------------------------------------------------- */

.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: stretch;
}

.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.contact-list li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}

.contact-list .ico {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--orange-tint);
    color: var(--orange-dark);
}

.contact-list .ico svg { width: 20px; height: 20px; }

.contact-list b {
    display: block;
    font: 500 11.5px/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--orange-dark);
    margin-bottom: 5px;
}

.contact-list a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid rgba(25, 27, 31, .22);
}
.contact-list a:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }

.section--dark .contact-list .ico {
    background: rgba(232, 106, 30, .16);
    color: var(--orange-light);
}
.section--dark .contact-list b { color: var(--orange-light); }
.section--dark .contact-list a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .3);
}
.section--dark .contact-list a:hover { border-bottom-color: var(--orange); }

.contact__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    /* Match the homepage contact card height even when the left column is shorter. */
    min-height: clamp(420px, 52vw, 560px);
    height: 100%;
    background: var(--ink-soft);
}

.contact__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }

.contact__map div {
    position: absolute;
    inset: auto 0 0;
    padding: 40px 24px 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .88));
    font-size: 15px;
    color: #f2f0ec;
    line-height: 1.45;
}
.contact__map strong { color: #fff; }

.site-footer {
    background: #101215;
    color: #9ba0a7;
    padding: 44px 0 34px;
    font-size: 14.5px;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: center;
    justify-content: space-between;
}

.site-footer a { color: #cfd3d8; text-decoration: none; }
.site-footer a:hover { color: var(--orange-light); }

.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.social { display: flex; gap: 10px; }

.social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    transition: background-color .2s, border-color .2s, color .2s;
}

.social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.social svg { width: 18px; height: 18px; }

.footer-legal {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    font-size: 13px;
    color: #7d8288;
}

/* -- 17 Einblenden beim Scrollen ------------------------------------------ */

/* .rise ist von sich aus sichtbar. Erst das Kopfskript setzt .scroll-reveal auf
   <html>, und nur dann gilt der Startzustand. Ohne JavaScript, ohne
   IntersectionObserver oder beim Drucken bleibt also alles sichtbar. */
.scroll-reveal .rise {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s ease;
}

.scroll-reveal .rise.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal .rise { opacity: 1; transform: none; transition: none; }
    .btn:hover, .trip:hover { transform: none; }
    .hero__slide--js { transition: none; }
}

/* -- 18 Schmale Ansichten ------------------------------------------------- */

@media (max-width: 1180px) {
    :root { --header-h: 70px; }

    .site-header__inner { flex-wrap: wrap; }

    .site-nav {
        flex: 1 0 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 0 16px;
    }

    /* Nur mit JavaScript klappt die Navigation hinter den Burger. Fehlt das Skript,
       gaebe es keinen Schalter, der sie wieder aufklappt - dann steht sie offen im
       Fluss und der Kopf bleibt stehen, statt den halben Bildschirm zu belegen. */
    .js .nav-toggle { display: block; }

    .js .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        padding: 10px clamp(18px, 4vw, 40px) 22px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .js .site-nav.is-open { display: flex; }

    html:not(.js) .site-header { position: static; }

    .site-nav a {
        padding: 13px 2px;
        border-bottom: 1px solid var(--line);
    }

    .site-nav a.btn {
        margin-top: 14px;
        justify-content: center;
        padding: .82em 1.5em;
        border: 2px solid var(--orange);
        border-bottom: 2px solid var(--orange);
    }

    .trip--wide { grid-column: span 1; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
    .partners { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .split, .book, .about, .signup__inner, .contact { grid-template-columns: 1fr; }
    .split--flip .split__media { order: 0; }
    .book__cover { max-width: 300px; }
    .about__portrait { max-width: 420px; }
    .contact__map { min-height: clamp(280px, 70vw, 400px); }
    /* Flex aufloesen: sonst stehen die statischen Dots als zweites Flex-Item
       neben dem Hero-Text und quetschen ihn zusammen. */
    .hero { min-height: 0; display: block; }
    .hero__content { padding-top: clamp(96px, 22vh, 150px); }
    .hero__dots { position: static; margin: 0 0 26px clamp(18px, 4vw, 40px); }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .gallery__item--tall { grid-row: span 1; }
    .trip__foot { flex-wrap: wrap; }
    .trip__foot .btn { width: 100%; justify-content: center; }
    .brand__sub { display: none; }
    .hero__meta { gap: 14px 26px; }
    .hero__meta div { min-width: 44%; }
    .partners { grid-template-columns: repeat(2, 1fr); }
    .partners a { min-height: 76px; padding: 12px 16px; }
    .detail-facts { position: static; }
}

/* -- 19 Unterseiten ------------------------------------------------------- */

.page-hero {
    position: relative;
    min-height: clamp(280px, 42vh, 420px);
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    background: var(--ink);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.page-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(25, 27, 31, .35) 0%, rgba(25, 27, 31, .78) 100%),
        linear-gradient(90deg, rgba(25, 27, 31, .55) 0%, rgba(25, 27, 31, .15) 70%);
}

.page-hero__content {
    position: relative;
    z-index: 1;
    /* padding-block only – a padding shorthand would wipe .container side padding. */
    padding-block: calc(var(--header-h) + 36px) 42px;
    max-width: 820px;
}

.page-hero h1 {
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: .01em;
    margin: 10px 0 14px;
    color: #fff;
}

.page-hero .lead { color: rgba(255, 255, 255, .86); max-width: 48ch; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 14px;
}

.crumbs a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.crumbs a:hover { color: var(--orange-light); border-bottom-color: var(--orange-light); }

.crumbs--ink { color: var(--muted); margin-bottom: 28px; }
.crumbs--ink a { color: var(--text); border-bottom-color: rgba(25, 27, 31, .25); }
.crumbs--ink a:hover { color: var(--orange-dark); border-bottom-color: var(--orange); }

.section--contact-page {
    padding-top: calc(var(--header-h) + clamp(28px, 4vw, 48px));
}
.section--contact-page h1 {
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    margin: .2em 0 .55em;
    max-width: 18ch;
}

.quote-band {
    background: var(--orange);
    color: #fff;
    padding: 28px 0;
    text-align: center;
}

.quote-band p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    letter-spacing: .02em;
    line-height: 1.25;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.detail-panel h2 { margin-top: 0; }

.detail-facts {
    position: sticky;
    top: calc(var(--header-h) + 18px);
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    box-shadow: var(--shadow);
}

.detail-facts h3 {
    margin: 0 0 16px;
    font-size: 1.15rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.detail-facts .trip__facts { margin: 0 0 18px; }
.detail-facts .trip__price { margin: 0 0 10px; }

.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.15em; }
.prose li + li { margin-top: .35em; }

/* Numbered chapter lists (film / seminar pages) – not the icon .checklist grid. */
.topic-list {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    counter-reset: topic;
    display: grid;
    gap: 10px;
}

.topic-list li {
    position: relative;
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.45;
}

.topic-list li::before {
    counter-increment: topic;
    content: counter(topic, decimal-leading-zero);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: var(--orange-dark);
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .js .site-nav .nav-drop { width: 100%; }
    .js .site-nav .nav-drop__menu {
        position: static;
        transform: none;
        display: block;
        min-width: 0;
        margin: 0 0 8px;
        padding: 0 0 8px 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }
    .js .site-nav .nav-drop__menu::before { display: none; }
    .js .site-nav .nav-drop__menu a {
        padding: 10px 2px;
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }
}

@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
}