/* =========================================================
   Caroline von Behr — Galerie-Website
   Klar, museal, ruhig. Keine dekorativen Farben, keine Effekte
   ohne Grund. Alles Bewegung subtil, alles Typografie präzise.
   ========================================================= */

/* --------- Schriften lokal gehostet ----------------------- */
/* Variable Fonts (latin-Subset), lokal ausgeliefert — kein Aufruf
   an Google-Server, daher keine Übertragung der Besucher-IP (DSGVO). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/assets/fonts/cormorant-garamond-var-latin.woff2') format('woff2');
}

/* --------- Design Tokens ---------------------------------- */
:root {
    /* Farbwelt: warme, papierne Neutrale statt WordPress-Neon */
    --paper:        #f7f4ee;
    --paper-soft:   #eee9df;
    --ink:          #1a1a1a;
    --ink-soft:     #3a3a3a;
    --muted:        #6e6a63;
    --line:         #d9d4c8;
    --line-soft:    #e8e3d7;
    --accent:       #6e2a24;   /* tiefes Oxblut — nimmt die rote Signatur der Bilder auf */

    /* Typografie */
    --serif:  'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Skala (modular, rhythmisch) */
    --fs-xs:   0.875rem;    /* 14 */
    --fs-sm:   1rem;        /* 16 */
    --fs-base: 1.0625rem;   /* 17 */
    --fs-md:   1.1875rem;   /* 19 */
    --fs-lg:   1.375rem;    /* 22 */
    --fs-xl:   1.875rem;    /* 30 */
    --fs-2xl:  2.625rem;    /* 42 */
    --fs-3xl:  4rem;        /* 64 */

    /* Raum */
    --max:        1060px;
    --max-wide:   1180px;
    --gutter:     24px;         /* Mobile-Fallback, Overrides per Media Query */
    --radius:     14px;
    --radius-lg:  16px;
    --radius-pill: 999px;

    /* Bewegung */
    --ease:     cubic-bezier(.2, .7, .2, 1);
    --dur-fast: 200ms;
    --dur:      360ms;
    --dur-slow: 600ms;
}

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

html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--ink); color: var(--paper); }

.container {
    max-width: var(--max);
    width: 100%;
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--gutter);
    padding-right: var(--gutter);
}
.container--wide { max-width: var(--max-wide); }

/* Gutter nach Breite, ohne clamp — die Werte sollen in jedem Browser
   verlässlich gleich sein. */
@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper);
    padding: 8px 14px; z-index: 9999;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --------- Anti-Print / Anti-Save ------------------------- */
.anti-print {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
@media print { body { display: none !important; } }

img { pointer-events: none; }
a.lightbox-link img,
.cat-card img,
.hero-frame img,
.archive-visual img { pointer-events: auto; }

/* --------- Typografie ------------------------------------- */
.eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
}
.eyebrow a { border-bottom: 1px solid currentColor; }

.page-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2rem, 5vw, var(--fs-2xl));
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.page-lede {
    font-family: var(--serif);
    font-size: var(--fs-lg);
    color: var(--ink-soft);
    margin-top: 14px;
    max-width: 52ch;
    line-height: 1.4;
}

.section-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, var(--fs-xl));
    letter-spacing: -0.005em;
    line-height: 1.1;
}
.section-sub {
    color: var(--muted);
    margin-top: 8px;
    max-width: 48ch;
}

.prose h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    margin-bottom: 8px;
    color: var(--ink);
}
.prose p { color: var(--ink-soft); max-width: 58ch; }
.prose > div + div { margin-top: 28px; }
.prose a { border-bottom: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease); }
.prose a:hover { border-color: var(--ink); }

/* --------- Header ----------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(1.2) blur(8px);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease),
                padding var(--dur) var(--ease),
                background var(--dur) var(--ease);
}
.site-header.is-scrolled {
    border-bottom-color: var(--line-soft);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    padding-bottom: 22px;
    /* WICHTIG: kein horizontaler Padding-Shorthand — würde sonst die
       horizontalen Paddings der .container-Regel überschreiben. */
    transition: padding var(--dur) var(--ease);
}
.site-header.is-scrolled .header-inner {
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-brand {
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}
.site-brand__logo {
    display: block;
    height: 54px;
    width: auto;
    transition: height var(--dur) var(--ease);
}
.site-header.is-scrolled .site-brand__logo {
    height: 42px;
}
@media (max-width: 720px) {
    .site-brand__logo { height: 44px; }
    .site-header.is-scrolled .site-brand__logo { height: 36px; }
}

/* Desktop nav */
.nav-list--desktop {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-list--desktop a {
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding: 6px 0;
    position: relative;
    transition: color var(--dur-fast) var(--ease);
}
.nav-list--desktop a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease);
}
.nav-list--desktop a:hover { color: var(--ink); }
.nav-list--desktop a:hover::after,
.nav-list--desktop a.is-active::after { transform: scaleX(1); }
.nav-list--desktop a.is-active { color: var(--ink); }

/* Hamburger */
.menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: none;
    position: relative;
}
.menu-toggle__bar {
    position: absolute;
    left: 10px;
    width: 20px; height: 1.5px;
    background: var(--ink);
    transition: transform var(--dur) var(--ease),
                opacity  var(--dur-fast) var(--ease),
                top      var(--dur) var(--ease);
}
.menu-toggle__bar:nth-child(1) { top: 13px; }
.menu-toggle__bar:nth-child(2) { top: 19px; }
.menu-toggle__bar:nth-child(3) { top: 25px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    top: 19px; transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0; transform: translateX(-8px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    top: 19px; transform: rotate(-45deg);
}

@media (max-width: 820px) {
    .nav-list--desktop { display: none; }
    .menu-toggle { display: block; }
}

/* --------- Mobile Menu ------------------------------------ */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
    overflow-y: auto;
}
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility 0s;
}

.mobile-menu__inner {
    padding: 110px var(--gutter) 60px;
    max-width: 640px;
    margin: 0 auto;
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 48px;
}
.mobile-menu__list li {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.mobile-menu.is-open .mobile-menu__list li {
    opacity: 1;
    transform: translateY(0);
}
.mobile-menu__list a {
    display: block;
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.25;
    padding: 4px 0;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-menu__list a:hover,
.mobile-menu__list a.is-active {
    padding-left: 12px;
    color: var(--accent);
}

body.menu-open { overflow: hidden; }

/* --------- Buttons ---------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 13px 28px;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
    text-align: center;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }

.btn--ghost { border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--wide { min-width: 280px; }

/* Kontakt: groß, dunkel, pill, mit leichtem Hover-Lift */
.btn--contact {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 20px 64px;
    min-width: 280px;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.25);
}
.btn--contact:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,0.3);
}

/* --------- Hero ------------------------------------------- */
.hero {
    padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 10vw, 120px);
}
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 72px);
    align-items: center;
}
.hero-copy { max-width: 44ch; }
/* Wenn es einen Intro-Text gibt, wird das Hero zu einem 2x2-Raster:
   links oben Titel/Untertitel, links unten Fließtext, rechts das Bild über beide Zeilen.
   Auf Mobile dreht sich die Abfolge: Titel → Bild → Intro. */
.hero-inner--with-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "copy   visual"
        "intro  visual";
    align-items: start;
    row-gap: clamp(20px, 3vw, 36px);
}
.hero-inner--with-intro .hero-copy   { grid-area: copy; }
.hero-inner--with-intro .hero-visual { grid-area: visual; align-self: center; }
.hero-inner--with-intro .hero-intro  { grid-area: intro; }

.hero-intro {
    max-width: 44ch;
    font-family: var(--serif);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--ink-soft);
}
.hero-intro p { margin-bottom: 1rem; }
.hero-intro p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-inner--with-intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "visual"
            "intro";
        row-gap: 32px;
    }
    .hero-intro { max-width: none; }
}

.hero-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(2.75rem, 6.4vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.hero-subtitle {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    color: var(--muted);
    margin-top: 16px;
    letter-spacing: 0.01em;
    line-height: 1.35;
}

/* Hero-Bild: freies Seitenverhältnis — das Bild bestimmt die Höhe selbst.
   max-height in dvh begrenzt nur nach oben, damit Hochformate bei kleinem
   Viewport nicht die halbe Seite füllen. */
.hero-frame {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper-soft);
    box-shadow: 0 20px 60px -24px rgba(0,0,0,.18);
    position: relative;
    max-height: 78dvh;
    display: flex;
}
.hero-frame img {
    width: 100%; height: auto;
    display: block;
    object-fit: contain;
    transition: transform 1.2s var(--ease);
}
.hero-frame:hover img { transform: scale(1.02); }
.hero-frame--empty {
    display: grid; place-items: center;
    min-height: 320px;
    color: var(--muted);
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px dashed var(--line);
    background: transparent;
    box-shadow: none;
}

/* --------- Section Heads ---------------------------------- */
.section-head { margin-bottom: 44px; max-width: 56ch; }

/* --------- Kategorien (Home) ------------------------------ */
.categories { padding: 60px 0; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 1100px) {
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .cat-grid { grid-template-columns: 1fr; }
}

.cat-card a {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--dur) var(--ease);
}
.cat-card a:hover { transform: translateY(-4px); }

.cat-card__media {
    aspect-ratio: 3/4;
    background: var(--paper-soft);
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.cat-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease), filter var(--dur) var(--ease);
}
.cat-card a:hover .cat-card__media img {
    transform: scale(1.04);
    filter: brightness(0.95);
}
.cat-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--paper-soft), #e3ddce);
}

.cat-card__body {
    padding: 16px 4px 4px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
}
.cat-card__body h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    color: var(--ink);
    grid-column: 1;
}
.cat-card__sub {
    grid-column: 1;
    font-family: var(--serif);
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: 1.3;
}
.cat-card__arrow { grid-column: 2; grid-row: 1; }
.cat-card__arrow {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1;
    color: var(--muted);
    transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.cat-card a:hover .cat-card__arrow { color: var(--ink); transform: translateX(4px); }

/* Werke-Hub: 6 Kacheln (fünf Werkgruppen plus Archiv) — zwei volle Reihen
   zu dritt, damit keine Kachel allein in einer angebrochenen Reihe steht. */
.werke-hub__grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
    .werke-hub__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .werke-hub__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .werke-hub__grid { grid-template-columns: 1fr; }
}

/* --------- Archive Inline (Home) -------------------------
   Typografisch identisch zu den Kategorie-Karten —
   gleiche Serif, gleiche Größe, gleicher Pfeil, gleiche
   Hover-Logik. Nur ohne Bild und zentriert.
   ---------------------------------------------------------- */
.archive-inline {
    text-align: center;
    margin-top: clamp(40px, 6vw, 64px);
}
.archive-inline a {
    display: inline-flex;
    align-items: center;           /* zentriert den Pfeil bei Textumbruch */
    justify-content: center;
    gap: 14px;
    max-width: 100%;
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    line-height: 1.25;
    color: var(--ink);
    padding: 8px 4px;
    text-align: left;
    transition: transform var(--dur) var(--ease);
}
.archive-inline a:hover { transform: translateY(-4px); }
.archive-inline__label {
    flex: 0 1 auto;
    min-width: 0;                  /* erlaubt Umbruch statt Overflow */
}
.archive-inline__arrow {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.archive-inline a:hover .archive-inline__arrow {
    color: var(--ink);
    transform: translateX(4px);
}

/* --------- Contact Strip ---------------------------------- */
.contact-strip {
    padding: clamp(70px, 10vw, 110px) 0;
    text-align: center;
}
.contact-strip__inner { display: flex; justify-content: center; }

/* --------- Seitenkopf (Gallery/Sub-Pages) ----------------- */
.page {
    padding-top:    clamp(32px, 5vw, 64px);
    padding-bottom: clamp(60px, 8vw, 100px);
    /* .page wird regelmäßig zusammen mit .container verwendet —
       daher KEIN horizontaler Padding-Shorthand. */
}
.page-head { margin-bottom: clamp(32px, 5vw, 56px); max-width: 62ch; }
.page--narrow { max-width: 760px; }
.page--center { text-align: center; }
/* Werkseite bricht die Breitenbegrenzung des page-head auf, damit der
   Werktitel die volle Containerbreite nutzen darf und nicht mitten im
   Absatz umbricht. */
.werk-page .page-head { max-width: none; }

.page-description {
    margin: -8px 0 56px;
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}
.page-description p { margin-bottom: 1rem; }
.page-description p:last-child { margin-bottom: 0; }

.back-link {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: 14px;
}
.back-link a {
    color: inherit;
    transition: color var(--dur-fast) var(--ease);
    border-bottom: 1px solid transparent;
}
.back-link a:hover { color: var(--ink); border-bottom-color: var(--line); }

/* --------- Archiv-Übersicht ------------------------------- */
.archive-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
/* Desktop: Bild links, Liste rechts. */
.archive-layout .archive-visual { order: 1; }
.archive-layout .archive-list   { order: 2; }
@media (max-width: 820px) {
    .archive-layout { grid-template-columns: 1fr; gap: 40px; }
    /* Mobile: zuerst die Liste, dann das Bild. */
    .archive-layout .archive-list   { order: 1; }
    .archive-layout .archive-visual { order: 2; }
}
/* Archivbild: freies Seitenverhältnis. max-height in dvh (dynamic viewport)
   verhindert, dass sich die Höhe auf Mobile durch das Ein-/Ausfahren der
   Adressleiste verändert — vh schlägt dort immer wieder um, dvh bleibt stabil. */
.archive-visual {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper-soft);
    box-shadow: 0 20px 60px -24px rgba(0,0,0,.18);
    max-height: 70dvh;
    display: flex;
}
.archive-visual img { width: 100%; height: auto; display: block; object-fit: contain; }
.archive-visual__placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--muted);
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px dashed var(--line);
}

.archive-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-soft);
}
.archive-list li { border-bottom: 1px solid var(--line-soft); }
.archive-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 6px;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    color: var(--ink);
    transition: padding-left var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.archive-link:hover { padding-left: 14px; color: var(--accent); }
.archive-link__arrow {
    color: var(--muted);
    transition: transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.archive-link:hover .archive-link__arrow {
    transform: translateX(6px);
    color: var(--accent);
}

/* --------- Galerie (zwei unabhängige Spalten-Stacks) ------
   Server-seitige Balancing: jedes Bild landet in der Spalte
   mit dem bislang kürzeren Gesamtverhältnis. Beide Spalten
   starten bei 0 → die obere Kante ist IMMER bündig, in jedem
   Browser, ohne Balancing-Quirks von CSS-Columns.
   ---------------------------------------------------------- */
.gallery-masonry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}
.gallery-col {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;            /* verhindert, dass die Spalte überläuft */
}
@media (max-width: 640px) {
    .gallery-masonry { grid-template-columns: 1fr; gap: 22px; }
    .gallery-col { gap: 22px; }
}

.gallery-item {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-soft);
    position: relative;
}
.gallery-item a { display: block; line-height: 0; }
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 900ms var(--ease), filter var(--dur) var(--ease);
}
.gallery-item:hover img {
    transform: scale(1.02);
    filter: brightness(0.96);
}

.empty-state {
    color: var(--muted);
    font-style: italic;
    padding: 40px 0;
}

/* --------- Lightbox --------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 8, 0.94);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        backdrop-filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        -webkit-backdrop-filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s linear 420ms;
}
.lightbox.is-open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        backdrop-filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        -webkit-backdrop-filter 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
        visibility 0s;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    transform: scale(0.96) translateY(12px);
    opacity: 0;
    transition:
        transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lightbox.is-open .lightbox__figure {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.lightbox__figure img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
    border-radius: 2px;
    pointer-events: none;
}
.lightbox__caption {
    color: #e7e3d9;
    margin-top: 18px;
    font-family: var(--serif);
    letter-spacing: 0.02em;
}
.lightbox__title {
    display: block;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.2;
}
.lightbox__meta {
    display: block;
    margin-top: 7px;
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a29c92;
}
.lightbox__title[hidden],
.lightbox__meta[hidden] { display: none; }

.lightbox__close,
.lightbox__nav {
    position: absolute;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 28px;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,0.1); }

.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav   { top: 50%; transform: translateY(-50%); font-size: 22px; }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

@media (max-width: 600px) {
    .lightbox__nav--prev { left: 8px; }
    .lightbox__nav--next { right: 8px; }
    .lightbox__close { top: 12px; right: 12px; }
}

/* --------- Footer ----------------------------------------- */
.site-footer {
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    margin-top: 60px;
    padding-top: 56px;
    padding-bottom: 28px;
}

.footer-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}
@media (max-width: 760px) {
    .footer-primary { grid-template-columns: 1fr; }
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 24px;     /* weicher als die Karten, aber keine Pill */
    background: transparent;
    color: var(--ink);
    min-width: 0;
    transition: background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.footer-link:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    transform: translateY(-2px);
}

.footer-link__icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    flex-shrink: 0;
    transition: border-color var(--dur) var(--ease);
}
.footer-link:hover .footer-link__icon { border-color: var(--paper); }

.footer-link__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 0;
}
.footer-link__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    transition: color var(--dur) var(--ease);
}
.footer-link:hover .footer-link__label { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.footer-link__value {
    font-family: var(--serif);
    font-size: clamp(0.95rem, 2.4vw, 1.25rem);
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-meta {
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: 0.04em;
}
.footer-meta__link {
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease);
}
.footer-meta__link:hover { color: var(--ink); }
.footer-meta__sep { opacity: 0.5; }
.footer-meta__copy { margin-left: auto; }

/* Auf schmalen Screens: Copyright rutscht sonst unschön weit rechts raus.
   Stattdessen linksbündig mit Separator, automatischer Umbruch. */
@media (max-width: 720px) {
    .footer-meta { justify-content: flex-start; }
    .footer-meta__copy { margin-left: 0; }
}

/* --------- Kontakt ----------------------------------------
   Schlichtes Formular im Stil der Seite: papiern, viel Luft,
   Serifen-Labels, dezenter Fokuszustand. Kein kaltes Grau,
   keine Neon-Akzente.
   ---------------------------------------------------------- */
.kontakt-page { max-width: 680px; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 8px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-row label {
    font-family: var(--serif);
    font-size: var(--fs-md);
    color: var(--ink);
    letter-spacing: 0.005em;
}
.form-optional {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-left: 6px;
}

.form-row input,
.form-row textarea {
    font-family: var(--serif);
    font-size: var(--fs-md);
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 2px;
    transition: border-color var(--dur) var(--ease);
    outline: none;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    line-height: 1.4;
}
.form-row textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.55;
}
.form-row input:focus,
.form-row textarea:focus {
    border-bottom-color: var(--ink);
}
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

.form-row.has-error input,
.form-row.has-error textarea {
    border-bottom-color: #a03a2e;
}
.form-error {
    font-size: var(--fs-sm);
    color: #a03a2e;
    margin-top: 2px;
    font-style: italic;
}

.form-alert {
    padding: 16px 20px;
    background: color-mix(in srgb, #a03a2e 10%, var(--paper));
    border-left: 2px solid #a03a2e;
    color: var(--ink);
    font-size: var(--fs-sm);
    margin-bottom: 8px;
    border-radius: 4px;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.form-actions .btn--contact {
    padding: 16px 48px;
    min-width: 220px;
}

.form-note {
    font-family: var(--serif);
    font-size: var(--fs-xs);
    color: var(--muted);
    line-height: 1.55;
    margin: 10px auto 0;
    max-width: 30ch;           /* schmaler als der Button, Block wirkt dadurch in sich geschlossen */
    text-align: center;
}

/* Honeypot — für Menschen unsichtbar, für Bots ein Köder. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.contact-success {
    padding: 48px 0 24px;
    border-top: 1px solid var(--line-soft);
    margin-top: 8px;
}
.contact-success__lead {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 14px;
}
.contact-success__text {
    font-family: var(--serif);
    font-size: var(--fs-md);
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 48ch;
    margin-bottom: 32px;
}
.contact-success__actions {
    margin-top: 8px;
}
.contact-success__actions .btn--contact {
    display: inline-block;
    padding: 14px 36px;
}

/* --------- Werkseite (einzelnes Werk mit Kontext) ---------
   Großes Hauptbild oben, darunter Werkdaten und Essay,
   dann Detailaufnahmen und Kontextfotos (Rahmen, Hängung).
   ---------------------------------------------------------- */
/* Werkseite nutzt die volle Container-Breite — der Essay regelt seine
   Lesbarkeit selbst über max-width: 58ch in .werk-essay. */

.werk-hero {
    background: var(--paper-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.22);
    margin-bottom: clamp(32px, 4vw, 52px);
    max-height: 82dvh;
    display: flex;
    justify-content: center;
}
.werk-hero img { width: 100%; height: auto; display: block; object-fit: contain; }

.werk-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 28px;
    padding: 20px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: clamp(32px, 4vw, 48px);
    font-family: var(--serif);
    font-size: var(--fs-md);
    line-height: 1.5;
}
.werk-meta dt {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    align-self: center;
}
.werk-meta dd { color: var(--ink); }

.werk-essay {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 58ch;
    margin-bottom: clamp(40px, 5vw, 64px);
    text-align: justify;
    hyphens: auto;
}
.werk-essay p { margin-bottom: 1.1rem; }
.werk-essay p:last-child { margin-bottom: 0; }
.werk-essay p:first-child::first-letter {
    font-family: var(--serif);
    font-weight: 500;
    float: left;
    font-size: 3.4em;
    line-height: 0.9;
    padding: 6px 10px 0 0;
    color: var(--accent);
}

.werk-section-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    color: var(--ink);
    margin: 0 0 20px;
    letter-spacing: -0.005em;
}

.werk-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(40px, 5vw, 60px);
}
@media (max-width: 640px) { .werk-details { grid-template-columns: 1fr; } }

.werk-detail figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-soft);
    box-shadow: 0 16px 40px -24px rgba(0,0,0,0.2);
}
.werk-detail img {
    width: 100%;
    height: auto;
    display: block;
}
.werk-detail figcaption {
    font-family: var(--sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 4px 0;
}
.werk-detail figcaption .figcaption-meta {
    display: block;
    margin-top: 4px;
    letter-spacing: 0.14em;
    opacity: 0.75;
}

.werk-context {
    margin-bottom: clamp(40px, 5vw, 60px);
}
.werk-context figure {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper-soft);
    box-shadow: 0 20px 60px -24px rgba(0,0,0,0.2);
}
.werk-context img {
    width: 100%;
    height: auto;
    display: block;
}
.werk-context figcaption {
    font-family: var(--serif);
    font-size: var(--fs-sm);
    color: var(--muted);
    padding: 14px 4px 0;
    font-style: italic;
}

.werk-demo-note {
    margin: clamp(40px, 5vw, 60px) 0 0;
    padding: 18px 22px;
    background: color-mix(in srgb, var(--accent) 8%, var(--paper));
    border-left: 2px solid var(--accent);
    border-radius: 4px;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    font-style: italic;
    max-width: 62ch;
}

/* --------- Scroll-Reveal ----------------------------------
   Per Default ist Content sichtbar. Der Inline-Script im
   <head> setzt `html.js-enabled` VOR dem ersten Paint —
   erst dann werden Reveal-Elemente ausgeblendet. Wenn JS
   fehlschlägt, greift das 2,5 s-Failsafe und die Klasse wird
   wieder entfernt: der Inhalt erscheint dann ohne Animation.

   Einblend-Logik per Transition (nicht Keyframes) —
   das vermeidet das „from-state-Pop“ von animation-fill-mode.
   ---------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }

html.js-enabled .reveal {
    transition: opacity 600ms var(--ease),
                transform 600ms var(--ease);
    will-change: opacity, transform;
}
html.js-enabled .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html.js-enabled .reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Desktop-Navigation: Dropdown
   "Werke" sammelt die Galerien und das Archiv. Hover öffnet
   auf Pointer-Geräten, Klick öffnet auf Touch-Geräten und als
   Tastatur-Fallback.
   ========================================================= */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
/* Unsichtbare Hover-Brücke: überbrückt im geöffneten Zustand den 14-px-Gap
   zwischen Trigger und Menü. Damit fällt die Maus nicht zwischendurch aus dem
   Dropdown heraus und das Menü bleibt beim Hinüberziehen offen. */
.nav-dropdown.is-open::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 18px;
}
/* "Werke" ist ein richtiger Link zur Hub-Seite.
   Der Pfeil daneben klappt nur das Dropdown auf. */
.nav-dropdown__link {
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease);
}
.nav-dropdown.is-active > .nav-dropdown__link { color: var(--ink); }
.nav-dropdown__caret-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}
.nav-dropdown__caret-btn:hover { color: var(--accent); }
.nav-dropdown__caret {
    font-size: 1.1rem;
    transition: transform var(--dur) var(--ease);
    display: inline-block;
}
.nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 240px;
    padding: 10px 0;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s linear var(--dur-fast);
    z-index: 50;
}
.nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.nav-dropdown__menu a {
    display: block;
    padding: 10px 22px;
    font-family: var(--serif);
    font-size: var(--fs-md);
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease);
}
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a.is-active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Mobile-Menü: Gruppen mit Untereinträgen.
   Einheitliche Serif-Typografie, klare Hierarchie: Gruppen-Label wie der
   übrige Top-Level-Eintrag, Unterpunkte leicht eingerückt und eine Spur
   kleiner — dieselbe Schriftfamilie, nur eine Nuance zurückgenommen. */
.mobile-menu__group { display: block; }
.mobile-menu__group-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 4px 0 2px;
}
.mobile-menu__group-link {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.25;
    color: var(--ink);
    flex: 0 1 auto;
    padding: 4px 0;
}
.mobile-menu__group-link.is-active { color: var(--accent); }
/* Pfeil wie im Desktop-Dropdown: unaufdringlich, direkt neben dem Text.
   Die 44×44-Fläche bleibt als unsichtbares Touch-Ziel erhalten. */
.mobile-menu__group-toggle {
    background: none;
    border: none;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 1.1rem;
    transition: transform var(--dur) var(--ease),
                color var(--dur-fast) var(--ease);
}
.mobile-menu__group-toggle:hover { color: var(--accent); }
.mobile-menu__group.is-expanded .mobile-menu__group-toggle {
    transform: rotate(180deg);
}
.mobile-menu__group-submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    margin-left: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 340ms var(--ease),
                opacity 240ms var(--ease),
                margin-top 240ms var(--ease);
}
.mobile-menu__group.is-expanded .mobile-menu__group-submenu {
    max-height: 600px;
    opacity: 1;
    margin-top: 8px;
}
.mobile-menu__group-submenu[hidden] { display: flex; }  /* Override für das Attribut — die Sichtbarkeit steuert JS über is-expanded */
.mobile-menu__group-submenu li a {
    font-family: var(--serif);
    font-size: 1.4rem;
    color: var(--ink-soft);
    padding: 2px 0 2px 18px;
    position: relative;
    display: block;
}
.mobile-menu__group-submenu li a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 8px; height: 1px;
    background: var(--line);
    transform: translateY(-50%);
}
.mobile-menu__group-submenu li a:hover,
.mobile-menu__group-submenu li a.is-active {
    padding-left: 26px;
    color: var(--accent);
}

/* =========================================================
   Startseite — Intro-Text und sekundäre Karten (Über mich, Drucke,
   Im Atelier).
   ========================================================= */
.home-intro {
    padding: clamp(28px, 5vw, 56px) 0 0;
}
.home-intro__inner {
    max-width: 64ch;
    font-family: var(--serif);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--ink-soft);
}
.home-intro__inner p { margin-bottom: 1rem; }
.home-intro__inner p:last-child { margin-bottom: 0; }

.home-links {
    padding: clamp(40px, 6vw, 80px) 0 clamp(20px, 3vw, 40px);
}
.home-links__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}
@media (max-width: 820px) {
    .home-links__grid { grid-template-columns: 1fr; }
}
.home-link-card {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    background: var(--paper);
    transition: transform var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    position: relative;
}
.home-link-card:hover {
    transform: translateY(-3px);
    border-color: var(--line);
    box-shadow: 0 18px 40px -28px rgba(0,0,0,0.18);
}
.home-link-card h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    color: var(--ink);
    margin-bottom: 6px;
}
.home-link-card p {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
    margin-bottom: 18px;
}
.home-link-card__arrow {
    margin-top: auto;
    color: var(--muted);
    font-size: var(--fs-sm);
    transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.home-link-card:hover .home-link-card__arrow {
    color: var(--accent);
    transform: translateX(4px);
    display: inline-block;
}

/* =========================================================
   Galerieseite — Werke-Karten (oben) + "Weitere Arbeiten"-Heading
   ========================================================= */
.werke-heading {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, var(--fs-xl));
    color: var(--ink);
    margin: clamp(32px, 4vw, 56px) 0 clamp(18px, 2vw, 28px);
    letter-spacing: -0.005em;
}
.werke-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 36px);
    margin-bottom: clamp(40px, 5vw, 64px);
}
@media (max-width: 720px) { .werke-grid { grid-template-columns: 1fr; } }

.werk-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.werk-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px -30px rgba(0,0,0,0.22);
    border-color: var(--line);
}
.werk-card__media {
    overflow: hidden;
    background: var(--paper-soft);
    display: flex;
}
.werk-card__media img {
    width: 100%; height: auto;
    display: block;
    transition: transform var(--dur-slow) var(--ease);
}
.werk-card:hover .werk-card__media img { transform: scale(1.04); }
.werk-card__placeholder {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--paper-soft), var(--paper-soft) 8px, var(--paper) 8px, var(--paper) 16px);
}
.werk-card__body { padding: 18px 22px 22px; }
.werk-card__body h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 4px;
}
.werk-card__meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    margin-bottom: 12px;
}
.werk-card__arrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    transition: transform var(--dur) var(--ease);
    display: inline-block;
}
.werk-card:hover .werk-card__arrow { transform: translateX(4px); }

/* =========================================================
   Flowtext — Fließtext mit Bildern, die abwechselnd rechts und links
   floaten. Verwendet auf Über-mich und Im Atelier.
   ========================================================= */
.flowtext {
    font-family: var(--serif);
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 78ch;
    margin: 0 auto;
    /* flow-root: Floats werden innerhalb dieses Blocks gehalten und
       clearen korrekt, ohne Hilfskonstruktionen wie ::after. */
    display: flow-root;
}
.flowtext p { margin-bottom: 1.1rem; }
.flowtext p:last-child { margin-bottom: 0; }

.flowtext-image {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-soft);
    box-shadow: 0 18px 50px -30px rgba(0,0,0,0.2);
    max-width: 44%;
    margin-bottom: clamp(18px, 2vw, 28px);
}
.flowtext-image img {
    width: 100%;
    height: auto;
    display: block;
}
.flowtext-image--right {
    float: right;
    margin-left: clamp(20px, 2.5vw, 36px);
    margin-top: 6px;
    shape-outside: inset(0 round 4px);
}
.flowtext-image--left {
    float: left;
    margin-right: clamp(20px, 2.5vw, 36px);
    margin-top: 6px;
    shape-outside: inset(0 round 4px);
}
/* Überhang-Grid: Bilder, die nach dem letzten verteilten Absatz
   übrig bleiben, werden unten im Grid nachgereicht. clear: both
   sorgt dafür, dass sie nicht mit vorherigen Floats kollidieren. */
.flowtext-overflow {
    clear: both;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(28px, 4vw, 48px);
}
.flowtext-overflow .flowtext-image { max-width: none; margin: 0; }

@media (max-width: 720px) {
    /* Mobile: Floats aufheben, Bilder nehmen die volle Breite und
       stapeln sich zwischen den Absätzen. Das ist auf kleinen Screens
       ohnehin lesbarer als halbbreit umflossene Fotos. */
    .flowtext-image,
    .flowtext-image--right,
    .flowtext-image--left {
        float: none;
        max-width: 100%;
        margin: clamp(20px, 4vw, 28px) 0;
    }
    .flowtext-overflow { grid-template-columns: 1fr; }
}

/* =========================================================
   Drucke-Seite
   ========================================================= */
.drucke-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 3vw, 40px);
    margin: clamp(28px, 4vw, 48px) 0;
}
@media (max-width: 820px) { .drucke-grid { grid-template-columns: 1fr; } }

.druck-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.druck-card:hover {
    box-shadow: 0 22px 50px -30px rgba(0,0,0,0.22);
    border-color: var(--line);
}
.druck-card__media {
    overflow: hidden;
    background: var(--paper-soft);
    margin: 0;
    display: flex;
}
a.druck-card__media { cursor: zoom-in; }
.druck-card__media img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 600ms var(--ease);
}
a.druck-card__media:hover img { transform: scale(1.03); }
.druck-card__placeholder {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--paper-soft), var(--paper-soft) 8px, var(--paper) 8px, var(--paper) 16px);
}
.druck-card__body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.druck-card__body h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--fs-lg);
    color: var(--ink);
    line-height: 1.2;
}
.druck-card__meta {
    font-size: var(--fs-sm);
    color: var(--muted);
    letter-spacing: 0.02em;
}
.druck-card__desc {
    font-family: var(--serif);
    color: var(--ink-soft);
    font-size: var(--fs-base);
    line-height: 1.55;
}
.druck-card__price {
    font-family: var(--serif);
    font-size: var(--fs-lg);
    color: var(--accent);
    margin-top: auto;
}
.drucke-cta {
    margin-top: clamp(48px, 6vw, 80px);
    padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
    background: var(--paper-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.drucke-cta__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
}
.drucke-cta__text {
    font-family: var(--serif);
    color: var(--ink-soft);
    font-size: var(--fs-md);
    line-height: 1.55;
    max-width: 52ch;
    margin: 0;
}
.drucke-cta .btn {
    margin-top: 8px;
}

/* Über-mich und Im Atelier teilen sich die Flowtext-Regeln oben. */