/* =========================================================================
   Jan Wittmer Naturfotografie – Dark Theme

   Alle Farben, Abstände und Radien stehen ausschließlich in :root. Wer das
   Erscheinungsbild ändern will, ändert dort – nicht in den Komponenten.
   ========================================================================= */

/*
 * Jost (SIL Open Font License, Lizenztext liegt neben der Datei) – die Schrift
 * der Wortmarke, ausserdem fuer Ueberschriften und Navigation. Selbst gehostet,
 * weil die Datenschutzerklaerung keine Schriften von fremden Servern zusagt.
 * Eine Variable-Font-Datei fuer alle Gewichte; das Latin-Subset deckt Umlaute,
 * ß und die deutschen Anfuehrungszeichen ab. Kein Cache-Stempel an der URL –
 * die Datei aendert sich praktisch nie, bei einem Wechsel wird sie umbenannt.
 */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Hintergrundstufen: bewusst kein reines Schwarz, sonst wirken die dunklen
       Bildpartien wie Löcher in der Seite. */
    --bg:            #0d0f11;
    --bg-alt:        #121519;
    --surface:       #16191d;
    --surface-hover: #1d2126;
    --border:        #272c33;
    /* Rahmen um die Bilder. Eine Spur dunkler als --border: noch heller als der
       Untergrund und damit auch an dunklen Fotos sichtbar, aber zurückhaltender
       als eine Trennlinie – er soll das Bild fassen, nicht selbst auffallen. */
    --frame:         #21252b;

    --text:          #e8e6e3;
    --text-muted:    #a3a8b0;   /* 7.0:1 auf --bg, auch für Fließtext geeignet */

    /* Warmes Bernstein – nimmt das Gegenlicht der Bilder auf. */
    --accent:        #e0a44a;
    --accent-strong: #f0b862;
    --accent-ink:    #17130b;   /* Text auf Akzentflächen */

    --danger:        #f08a7a;
    --success:       #86c99a;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Wortmarke, Ueberschriften, Navigation. Der Fliesstext bleibt bei --font. */
    --font-display: "Jost", var(--font);

    /* Bildmarke: der Koerper nimmt currentColor, das Auge diesen Ton – auf dem
       hellen Kopf ist das die invertierte Fassung aus dem Design-Handoff. */
    --mark-eye: #141414;

    --radius:    10px;
    --radius-lg: 16px;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;

    --measure: 68ch;
    --wrap:    1240px;

    --header-height: 4.5rem;

    /* Freiraum über und unter dem Lightbox-Bild (unten zusätzlich für
       Bildunterschrift und Zähler). */
    --lightbox-pad-top: clamp(1rem, 4vw, 3.5rem);
    --lightbox-pad-bottom: 5.5rem;

    --shadow: 0 18px 40px rgb(0 0 0 / 45%);

    --transition: 180ms ease;
}

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

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

/*
 * Das hidden-Attribut bringt vom Browser nur ein display:none mit – jede eigene
 * display-Angabe schlaegt es. Genau daran ist die Erfolgsmeldung des
 * Kontaktformulars sichtbar geblieben, obwohl sie als hidden im Markup stand.
 * Hier gilt: Was hidden ist, ist weg.
 */
[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    /* Sonst verschwindet die Überschrift beim Ankersprung unter der Sticky-Nav. */
    scroll-padding-top: calc(var(--header-height) + var(--space-2));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-strong);
}

/* Gewicht 500 statt 600: Jost ist geometrisch und wirkt halbfett schnell
   klobig. Kein negatives Letter-Spacing – das war fuer die Systemschrift. */
h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Nur fuer Screenreader: nimmt keinen Platz ein, bleibt aber vorlesbar.
   display:none oder visibility:hidden waeren falsch – die nehmen den Text auch
   der Sprachausgabe weg. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform var(--transition);
}

.skip-link:focus-visible {
    transform: translateY(0);
    color: var(--accent-ink);
}

/* --- Logo ---------------------------------------------------------------- */

/* Traegt das <symbol> der Bildmarke. Nicht hidden/display:none: ein <use> auf
   ein nicht dargestelltes SVG bleibt in manchen Browsern leer. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/*
 * Lockup = Bildmarke + zweizeilige Wortmarke, nach dem Design-Handoff. Die
 * Masse haengen an Eigenschaften, die je Einsatzort (Kopfzeile, Hero,
 * Fusszeile) gesetzt werden. Zeilenabstand der Wortmarke ueber gap, nicht
 * ueber line-height – so bleibt er unabhaengig von der Schriftgroesse.
 */
.lockup {
    --lockup-mark: 44px;
    --lockup-gap: 14px;
    --wordmark-name: 0.9375rem;
    --wordmark-name-track: 0.34em;
    --wordmark-sub: 0.6rem;
    --wordmark-sub-track: 0.38em;
    --wordmark-gap: 4px;

    display: flex;
    align-items: center;
    gap: var(--lockup-gap);
    color: var(--text);
    text-decoration: none;
}

.lockup--stacked {
    flex-direction: column;
}

.lockup__mark {
    flex: none;
    width: var(--lockup-mark);
    /* Seitenverhaeltnis der viewBox (504 × 470). */
    height: calc(var(--lockup-mark) * 470 / 504);
}

.wordmark {
    display: flex;
    flex-direction: column;
    gap: var(--wordmark-gap);
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.wordmark__name {
    font-size: var(--wordmark-name);
    letter-spacing: var(--wordmark-name-track);
}

.wordmark__sub {
    color: var(--text-muted);
    font-size: var(--wordmark-sub);
    letter-spacing: var(--wordmark-sub-track);
}

/* Zentriert haengt hinter dem letzten Buchstaben noch ein Buchstabenabstand;
   der negative Rand gleicht ihn aus, damit die Zeile optisch mittig sitzt. */
.lockup--stacked .wordmark {
    align-items: center;
}

.lockup--stacked .wordmark__name {
    margin-right: calc(var(--wordmark-name-track) * -1);
}

.lockup--stacked .wordmark__sub {
    margin-right: calc(var(--wordmark-sub-track) * -1);
}

/* --- Kopfzeile ----------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), background var(--transition);
}

/* Wird von main.js gesetzt, sobald die Seite gescrollt ist. */
.site-header.is-scrolled {
    border-bottom-color: var(--border);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    max-width: var(--wrap);
    min-height: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

/* Die Masse des Lockups stehen in .lockup; hier nur, was die Kopfzeile
   braucht: kein Umbruch, ein Stueck Luft ueber und unter der Marke. Marke und
   Name in der Akzentfarbe – derselbe Ton wie a:hover, damit beim Ueberfahren
   nichts springt; die Unterzeile bleibt ueber .wordmark__sub gedaempft. */
.site-header__brand {
    flex: none;
    padding-block: 0.5rem;
    color: var(--accent-strong);
}

.nav {
    display: flex;
    align-items: center;
}

.nav__list {
    display: flex;
    /* Kein gap: Der Abstand sitzt als Innenabstand an den Punkten, damit die
       Trennlinie genau in der Mitte dazwischen steht. */
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__list > li {
    position: relative;
    padding-inline: var(--space-3);
}

/* Der Abstand zum Instagram-Button kommt aus dem Header, nicht von hier. */
.nav__list > li:last-child {
    padding-right: 0;
}

/* Leichte Trennlinie zwischen den Punkten. Ein Pseudo-Element statt einer
   border-left, weil die Linie kuerzer als die Zeile sein und mittig stehen
   soll – ein Balken ueber die volle Hoehe wuerde die Punkte einrahmen statt
   trennen. Ein Drittel des gedaempften Textgraus: auf dem verglasten Kopf
   gerade sichtbar. */
.nav__list > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.1em;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--text-muted) 30%, transparent);
}

.nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.35rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.nav__link:hover,
.nav__link.is-active {
    color: var(--text);
}

.nav__link.is-active::after {
    transform: scaleX(1);
}

/* Abgesetzt von den Ankerlinks, damit er als eigenständiges Ziel gelesen wird. */
.nav__instagram {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: var(--space-3);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition), background var(--transition),
                color var(--transition);
}

.nav__instagram:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    color: var(--accent);
}

.nav__instagram .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-family: var(--font-display);
    font-size: 0.95rem;
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

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

.hero {
    position: relative;
    display: grid;
    justify-items: center;
    /* Text im oberen Drittel statt mittig: so bleibt die Bildmitte, wo bei den
       meisten Aufnahmen das Motiv sitzt, frei. */
    align-content: start;
    min-height: 100svh;
    /* Die Oberkante des Logos liegt bei 160 px ab Seitenanfang; die Kopfzeile
       nimmt davon ihre Hoehe samt 1 px Unterkante, der Rest ist Abstand. */
    padding: calc(160px - var(--header-height) - 1px) var(--space-3) var(--space-5);
    text-align: center;
    overflow: hidden;
    /* Grund, falls in gallery.json kein "hero" steht – dann bleibt
       der Bereich zwischen den HERO-Markern leer. */
    background:
        radial-gradient(120% 80% at 50% -10%, rgb(224 164 74 / 13%), transparent 60%),
        radial-gradient(90% 60% at 80% 20%, rgb(80 120 160 / 10%), transparent 65%);
}

/* Das Hintergrundbild wird vom Build eingesetzt. Als <img> statt als
   background-image, weil die CSP kein inline-CSS erlaubt – und weil sich so
   srcset nutzen lässt. */
.hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Welcher Teil des Motivs beim Zuschnitt bleibt – gesetzt über "focus" in
   gallery.json (Builder::HERO_FOCUS). Ein 3:2-Bild verliert auf dem Telefon
   die Seiten, auf sehr breiten Schirmen Ober- und Unterkante. Feste Klassen,
   weil die CSP kein style-Attribut zulässt. "mitte" ist die Vorgabe von
   object-fit und braucht keine Regel. Nicht 0 % bzw. 100 %: ein Stück Luft
   neben dem Motiv bleibt so erhalten. */
.hero__media--oben img   { object-position: 50% 15%; }
.hero__media--unten img  { object-position: 50% 85%; }
.hero__media--links img  { object-position: 15% 50%; }
.hero__media--rechts img { object-position: 85% 50%; }

/* Abdunklung nur dort, wo sie gebraucht wird: oben hinter Navigation und Text,
   unten als Übergang auf die Seitenfarbe, damit die Kante zur Galerie nicht
   bricht. In der Bildmitte bewusst fast nichts – die Motive sind oft selbst
   sehr dunkel und würden unter einem flächigen Schleier verschwinden. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgb(13 15 17 / 72%) 0%,
            rgb(13 15 17 / 30%) 20%,
            rgb(13 15 17 / 6%) 42%,
            rgb(13 15 17 / 6%) 62%,
            rgb(13 15 17 / 55%) 88%,
            var(--bg) 100%
        );
}

.hero__inner {
    position: relative;
    /* Über die Abdunklung heben, sonst liegt der Text darunter. */
    z-index: 1;
    max-width: 46rem;
    /* Hält den Text auch dann lesbar, wenn ein helleres Motiv eingesetzt wird. */
    text-shadow: 0 1px 12px rgb(0 0 0 / 70%);
}

/*
 * Das gestapelte Hauptlogo. Bewusst zurueckgenommen: die Wirkung traegt das
 * Bild, nicht der Schriftzug. Die Marke steht auf dem Foto und bekommt
 * denselben Schatten wie der Text, damit sie auch auf hellen Partien steht.
 */
.lockup--hero {
    --lockup-mark: clamp(6rem, 4rem + 8vw, 8.5rem);
    --lockup-gap: 18px;
    --wordmark-name: clamp(1.2rem, 1rem + 1vw, 1.75rem);
    --wordmark-name-track: 0.42em;
    --wordmark-sub: clamp(0.7rem, 0.6rem + 0.5vw, 0.95rem);
    --wordmark-sub-track: 0.46em;
    --wordmark-gap: 7px;
}

.lockup--hero .lockup__mark {
    filter: drop-shadow(0 1px 12px rgb(0 0 0 / 70%));
}

/* Gegenstueck zu Kopf- und Fusszeile: dort sind Marke und Name farbig und die
   Unterzeile grau, hier tragen Marke und Name das Licht und die Unterzeile
   die Farbe. */
.lockup--hero .wordmark__sub {
    color: var(--accent-strong);
}

/* Die Wortmarke ist die <h1>, die Groessen stehen im Lockup. */
.hero__title {
    font-weight: 400;
}

.hero__lead {
    max-width: 32rem;
    margin: var(--space-2) auto var(--space-3);
    /* Auf dem Bild braucht der Text mehr Kontrast als auf dem Seitengrund. */
    color: var(--text);
    font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
}

/* --- Abschnitte ---------------------------------------------------------- */

.section {
    padding-block: var(--space-6);
}

.section--alt {
    background: var(--bg-alt);
    border-block: 1px solid var(--border);
}

.section__inner {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.section__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-5);
    align-items: start;
}

.section__head {
    margin-bottom: var(--space-4);
}

.section__title {
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

.section__title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: var(--space-2);
    background: var(--accent);
}


/* --- Galerie ------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    /* Die Dreierreihe bleibt trotz des größeren Abstands: 3 × 320 + 2 × 40 =
       1040 px passen in die 1192 px Innenbreite, eine vierte Spalte bräuchte
       1400 px. Die hervorgehobenen Zeilen bekommen zusätzlich zu diesem Abstand
       ihr eigenes padding-block. */
    gap: var(--space-4);
}

.gallery__item {
    position: relative;
    margin: 0;
}

.gallery__link {
    display: block;
    overflow: hidden;
    /* Der Rahmen sitzt am Link, nicht am Bild: Beim Überfahren wächst das Bild
       innerhalb des Rahmens, statt ihn mitzuvergrößern. */
    border: 1px solid var(--frame);
    background: var(--surface);
    line-height: 0;
}

.gallery__link img {
    width: 100%;
    height: auto;
    /* Einheitliche Kacheln trotz unterschiedlicher Seitenverhältnisse. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 400ms ease, opacity var(--transition);
}

.gallery__link:hover img,
.gallery__link:focus-visible img {
    transform: scale(1.035);
    opacity: 0.94;
}

/*
 * Der Titel liegt über der Kachel und erscheint erst beim Überfahren.
 *
 * Versteckt wird er per opacity, nicht per display:none – so bleibt er für
 * Screenreader lesbar, und die Lightbox liest ihn weiterhin aus der figcaption.
 * pointer-events: none ist nötig, weil das Overlay sonst den darunter liegenden
 * Link abfängt und ein Klick auf die Bildmitte ins Leere ginge.
 */
.gallery__caption {
    position: absolute;
    /* 1 px statt 0: Sonst legt sich die Abdunklung beim Überfahren über den
       Rahmen und lässt ihn ausgerechnet dann blasser wirken. */
    inset: 1px;
    display: grid;
    place-items: center;
    padding: var(--space-2);
    background: rgb(13 15 17 / 55%);
    color: var(--text);
    font-size: 1rem;
    text-align: center;
    text-shadow: 0 1px 8px rgb(0 0 0 / 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

/* Nur auf Geräten mit Maus: Touchgeräte kennen kein Überfahren, dort bleiben
   die Kacheln bewusst textfrei. */
@media (hover: hover) {
    .gallery__item:hover .gallery__caption {
        opacity: 1;
    }
}

/* Ohne das wäre der Titel für Tastaturnutzer nie zu sehen. */
.gallery__link:focus-visible ~ .gallery__caption {
    opacity: 1;
}

/* --- Hervorgehobenes Bild ------------------------------------------------- */

/*
 * Verlässt an seiner Stelle das Kachelraster und nimmt die volle Breite ein.
 * Der Titel steht hier als sichtbares <h3> neben dem Bild – das eingeblendete
 * Overlay der Kacheln wäre daneben sinnlos und liegt ohnehin nicht im Markup.
 */
.gallery__item--feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-2);
}

/* Kein Zuschnitt auf 3:2 wie bei den Kacheln: das Bild wird ganz gezeigt. */
.gallery__link--feature img {
    aspect-ratio: auto;
}

.feature {
    display: grid;
    gap: var(--space-2);
}

.feature__title {
    margin: 0;
    font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
    line-height: 1.25;
}

.feature__text {
    max-width: var(--measure);
    margin: 0;
    color: var(--text-muted);
}

/* Steht unter dem Titel und gehört zu ihm – deshalb dicht darunter und ohne
   Symbol, anders als die beiden Zeilen mit den Aufnahmedaten. */
.feature__place {
    margin: calc(var(--space-2) * -1 + 0.25rem) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Trennlinien statt Kästen: die Angaben sollen den Text begleiten, nicht mit
   ihm um Aufmerksamkeit streiten. */
.feature__facts,
.feature__award-list {
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.feature__facts {
    display: grid;
    gap: var(--space-1);
}

/* Zurückhaltender als Titel und Text: Die Angaben begleiten das Bild, sie sind
   nicht die Geschichte. Deshalb dieselbe gedämpfte Farbe wie der Fließtext und
   eine Stufe kleiner. */
.feature__fact {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* flex-start statt center: bricht die Zeile auf schmalen Schirmen um, bleibt
   das Symbol sonst in der Mitte des Blocks stehen statt an der ersten Zeile. */
.feature__icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    color: var(--text-muted);
}

/*
 * Die Trenner stehen bewusst im Stylesheet und nicht im Markup: Ein
 * Screenreader liest generierte Inhalte nicht mit, und eine fehlende Angabe
 * hinterlässt keinen einsamen Trenner – der Nachbarselektor greift dann nicht.
 */
.feature__fact-values > span + span::before {
    margin: 0 0.45em;
    color: var(--text-muted);
}

.feature__fact--gear .feature__fact-values > span + span::before {
    content: "+";
}

.feature__fact--settings .feature__fact-values > span + span::before {
    content: "|";
}

/* Ohne Überschrift trägt die Trennlinie darüber die Gliederung. */
.feature__award-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

/* Der Akzentstrich ersetzt den Aufzählungspunkt – hier steht das Besondere. */
.feature__award-list li {
    padding-left: var(--space-2);
    border-left: 2px solid var(--accent);
    font-size: 0.95rem;
}

.feature__award-name {
    font-weight: 600;
}

.feature__award-year {
    color: var(--text-muted);
}

.feature__award-rank {
    display: block;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* --- Über mich ----------------------------------------------------------- */

.about {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-4);
    align-items: start;
}

.about__media img {
    width: 100%;
    height: auto;
    /* Derselbe Rahmen wie in der Galerie – sonst stünde das Porträt als
       einziges Foto der Seite ohne Kante da. */
    border: 1px solid var(--frame);
}

/* Unterzeile zum Porträt: gedämpft wie die Aufnahmedaten, damit sie das Bild
   begleitet und nicht mit dem Fließtext konkurriert. */
.about__caption {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.about__caption-icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* --- Fließtext ----------------------------------------------------------- */

.prose {
    max-width: var(--measure);
}

.prose p {
    margin: 0 0 var(--space-2);
    color: var(--text-muted);
}

/* Zwischenüberschriften der Rechtstexte. */
.prose h2 {
    margin: var(--space-4) 0 var(--space-1);
    font-size: 1.25rem;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose small {
    font-size: 0.85rem;
}

.prose__lead {
    color: var(--text) !important;
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    line-height: 1.5;
    border-left: 2px solid var(--accent);
    padding-left: var(--space-3);
    margin-bottom: var(--space-3) !important;
}

/* --- Buttons ------------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}

.button:active {
    transform: translateY(1px);
}

.button--primary {
    background: var(--accent);
    color: var(--accent-ink);
}

.button--primary:hover:not(:disabled) {
    background: var(--accent-strong);
    color: var(--accent-ink);
}

.button--primary:disabled {
    opacity: 0.55;
    cursor: progress;
}

.button--ghost {
    border-color: var(--border);
    color: var(--text);
}

.button--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Im Hero steht der Button auf dem Foto: ohne eigene Fläche verliert er je nach
   Motiv seine Kontur. Der Text darüber trägt sich über den text-shadow. */
.hero .button--ghost {
    background: rgb(13 15 17 / 45%);
    backdrop-filter: blur(6px);
    border-color: rgb(232 230 227 / 35%);
    text-shadow: none;
}

.hero .button--ghost:hover {
    background: rgb(13 15 17 / 65%);
    border-color: var(--accent);
}

.button--instagram {
    /* Trägt allein den Abstand zur Überschrift, seit der einleitende Absatz
       im Kontaktbereich entfallen ist. */
    margin-top: var(--space-4);
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.button--instagram:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    color: var(--text);
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/* --- Kontakt & Formular -------------------------------------------------- */



.form {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.form__row {
    margin-bottom: var(--space-3);
}

.form__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.form__label--inline {
    display: inline;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.form__input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    transition: border-color var(--transition);
}

.form__input:hover {
    border-color: var(--surface-hover);
}

.form__input:focus-visible {
    border-color: var(--accent);
    outline-offset: 1px;
}

.form__input--area {
    resize: vertical;
    min-height: 8rem;
}

.form__input.is-invalid {
    border-color: var(--danger);
}

.form__row--check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
}

.form__check {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.2rem 0 0;
    accent-color: var(--accent);
}

.form__row--check .form__error {
    grid-column: 1 / -1;
}

.form__error {
    margin: 0.4rem 0 0;
    color: var(--danger);
    font-size: 0.85rem;
}

/* Honeypot: für Menschen unsichtbar, für Bots im DOM vorhanden. Bewusst nicht
   display:none – manche Bots überspringen ausgeblendete Felder. */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__status {
    margin: var(--space-2) 0 0;
    min-height: 1.5rem;
    font-size: 0.925rem;
}

.form__status.is-error   { color: var(--danger); }
.form__status.is-success { color: var(--success); }

/*
 * Tritt nach dem Absenden an die Stelle des Formulars – deshalb dieselbe Fläche
 * und derselbe Rahmen. Die frühere Statuszeile unter dem Knopf ging bei einer
 * erfolgreichen Sendung unter; hier ist die Meldung das Einzige, was übrig
 * bleibt.
 */
.form-sent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.form-sent:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.form-sent__icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--success);
}

.form-sent__text {
    margin: 0;
    color: var(--success);
    font-size: 1.0625rem;
}

/* --- Fußzeile ------------------------------------------------------------ */

.site-footer {
    padding-block: var(--space-4);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--space-3);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Kleinstes Lockup der Seite: 13 px Name sind die Untergrenze aus dem
   Handoff, darunter muesste die Unterzeile weg. Farbig wie in der Kopfzeile. */
.lockup--footer {
    --lockup-mark: 40px;
    --lockup-gap: 12px;
    --wordmark-name: 0.8125rem;
    --wordmark-sub: 0.5rem;
    --wordmark-gap: 3px;

    color: var(--accent-strong);
}

/* Lockup links, Links ganz rechts. */
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-left: auto;
}

.site-footer__nav a {
    color: var(--text-muted);
    text-decoration: none;
}

.site-footer__nav a:hover {
    color: var(--accent);
}

/* --- Lightbox ------------------------------------------------------------ */

.lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    overflow: hidden;
}

.lightbox::backdrop {
    background: rgb(6 8 10 / 92%);
    backdrop-filter: blur(6px);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--lightbox-pad-top) clamp(1rem, 4vw, 3.5rem) var(--lightbox-pad-bottom);
}

.lightbox__image {
    max-width: 100%;
    /* Bewusst gegen den Viewport gerechnet statt gegen die Grid-Zeile: ein
       zentriertes ersetztes Element bestimmt die Zeilenhöhe selbst mit, sodass
       ein max-height:100% zirkulär wird und das Bild überläuft. */
    max-height: calc(100svh - var(--lightbox-pad-top) - var(--lightbox-pad-bottom));
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: var(--shadow);
    transition: opacity var(--transition);
}

/* Wird während des Bildwechsels gesetzt, damit kein Sprung sichtbar wird. */
.lightbox__image.is-loading {
    opacity: 0.25;
}

.lightbox__caption {
    position: absolute;
    left: 50%;
    bottom: 2.4rem;
    transform: translateX(-50%);
    max-width: min(90vw, 44rem);
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
}

.lightbox__counter {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.lightbox__button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.lightbox__button:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.lightbox__button svg {
    width: 1.5rem;
    height: 1.5rem;
}

.lightbox__button--close { top: 1rem; right: 1rem; }
.lightbox__button--prev  { top: 50%; left: 1rem; transform: translateY(-50%); }
.lightbox__button--next  { top: 50%; right: 1rem; transform: translateY(-50%); }

/* Verhindert Scrollen der Seite hinter der geöffneten Lightbox. */
body.has-lightbox {
    overflow: hidden;
}

/* --- Ergebnisseite des Formulars ohne JavaScript ------------------------- */

.result {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: var(--space-3);
    text-align: center;
}

.result__box {
    max-width: 34rem;
}

.result__box p {
    color: var(--text-muted);
}

.result__list {
    margin: var(--space-2) 0;
    padding: 0;
    list-style: none;
    color: var(--danger);
}

/* --- Schmale Viewports --------------------------------------------------- */

@media (max-width: 860px) {
    .section__inner--split {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .about {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .gallery__item--feature {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Das Porträt füllt einspaltig sonst den halben Bildschirm. */
    .about__media img {
        max-width: 26rem;
    }
}

/* iPad im Querformat: breit genug fuer das Desktop-Layout, aber so niedrig,
   dass die Wortmarke bei 160 px auf dem Schnabel des Basstoelpels liegt.
   Deshalb dort 70 px hoeher. Die Breite schliesst Telefone im Querformat
   (unter 1000 px) und Monitore (ueber 1400 px) aus, die Hoehe grosse
   Hochkant-Displays. */
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1400px) and (max-height: 1024px) {
    .hero {
        padding-top: calc(90px - var(--header-height) - 1px);
    }
}

@media (max-width: 700px) {
    :root {
        --space-6: 4rem;
        --space-5: 3rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Auf dem Telefon ist das Hochformat knapp: Logo enger an die Kopfzeile,
       damit darunter mehr vom Motiv bleibt. Oberkante bei 120 px. */
    .hero {
        padding-top: calc(120px - var(--header-height) - 1px);
    }

    .nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        display: none;
        background: var(--bg-alt);
        border-block: 1px solid var(--border);
    }

    .nav.is-open {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        gap: 0;
        padding: var(--space-1) var(--space-3) var(--space-2);
    }

    /* Untereinander braucht es weder Abstand noch Trennlinie. */
    .nav__list > li {
        padding-inline: 0;
    }

    .nav__list > li + li::before {
        display: none;
    }

    .nav__link {
        display: block;
        padding-block: 0.75rem;
    }

    /* Im aufgeklappten Menü ein eigener Block unter den Menüpunkten. */
    .nav__instagram {
        display: flex;
        justify-content: center;
        margin: 0 var(--space-3) var(--space-2);
        padding-block: 0.7rem;
    }

    .site-header__inner {
        position: relative;
    }

    .form {
        padding: var(--space-3);
    }

    :root {
        --lightbox-pad-top: 4rem;
        --lightbox-pad-bottom: 6.5rem;
    }

    .lightbox__button {
        width: 2.75rem;
        height: 2.75rem;
    }

    .lightbox__button--prev { left: 0.5rem; }
    .lightbox__button--next { right: 0.5rem; }
}

/* Telefon im Querformat: Der Viewport ist nur rund 400 px hoch, und mit dem
   Freiraum fuer Beschriftung und Zaehler bliebe dem Bild kaum die Haelfte.
   Deshalb fuellt das Bild dort die ganze Hoehe, Beschriftung und Zaehler
   entfallen; die Schaltflaechen liegen ohnehin ueber dem Bild. Die Hoehe
   schliesst Tablets aus, die Breite Hochkant-Telefone. */
@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --lightbox-pad-top: 0px;
        --lightbox-pad-bottom: 0px;
    }

    .lightbox__stage {
        padding-inline: 0;
    }

    .lightbox__caption,
    .lightbox__counter {
        display: none;
    }
}