/* =============================================
   katinkamolde.de – Hauptstylesheet
   ============================================= */

/* ─── SELF-HOSTED FONTS: Titillium Web ─── */
@font-face { font-family: 'Titillium Web'; font-style: italic;  font-weight: 300; font-display: swap; src: url('fonts/titilliumweb-300italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: italic;  font-weight: 300; font-display: swap; src: url('fonts/titilliumweb-300italic-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: italic;  font-weight: 400; font-display: swap; src: url('fonts/titilliumweb-400italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: italic;  font-weight: 400; font-display: swap; src: url('fonts/titilliumweb-400italic-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 200; font-display: swap; src: url('fonts/titilliumweb-200-latin-ext.woff2')        format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 200; font-display: swap; src: url('fonts/titilliumweb-200-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 300; font-display: swap; src: url('fonts/titilliumweb-300-latin-ext.woff2')        format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 300; font-display: swap; src: url('fonts/titilliumweb-300-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 400; font-display: swap; src: url('fonts/titilliumweb-400-latin-ext.woff2')        format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 400; font-display: swap; src: url('fonts/titilliumweb-400-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 600; font-display: swap; src: url('fonts/titilliumweb-600-latin-ext.woff2')        format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 600; font-display: swap; src: url('fonts/titilliumweb-600-latin.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; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 700; font-display: swap; src: url('fonts/titilliumweb-700-latin-ext.woff2')        format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titillium Web'; font-style: normal;  font-weight: 700; font-display: swap; src: url('fonts/titilliumweb-700-latin.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; }

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

:root {
    --text:          #2e2e2e;
    --schwarz:       #1a1a1a;
    --weiss:         #ffffff;
    --grau-hell:     #f5f5f5;
    --grau-mittel:   #e0e0e0;
    --grau-text:     #757575;
    --nav-aktiv:     #2e2e2e;
    --abstand:       2rem;
    --abstand-gross: 4rem;
    --max-breite:    1200px;
    --max-breite-text: 780px;
    --letter-spacing-caps: 0.12em;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;
}

body {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    color: var(--text);
    background: var(--weiss);
    font-size: 1rem;
    line-height: 1.7;
    overflow-x: hidden;
}

/* Desktop: Body-Schrift etwas größer für bessere Lesbarkeit.
   Headings bleiben unverändert (clamp auf html-rem, nicht body). */
@media (min-width: 769px) {
    body { font-size: 1.1rem; line-height: 1.65; }
}

/* Fluid Typography: skaliert stufenlos mit der Viewport-Breite.
   Die clamp(min, preferred, max)-Werte sind so gewählt, dass die Schrift
   am iPhone gut lesbar bleibt und am Desktop ihre ursprüngliche Größe erreicht. */
h1 { font-size: clamp(1.65rem, 1rem + 2.4vw, 3rem);  font-weight: 600; line-height: 1.15; margin-bottom: 1rem;    hyphens: none; }
h2 { font-size: clamp(1.3rem, 0.8rem + 1.9vw, 2.3rem); font-weight: 600; line-height: 1.2;  margin-bottom: 0.75rem; hyphens: none; }
h3 { font-size: clamp(1.3rem, 0.8rem + 1.9vw, 2.3rem); font-weight: 400; line-height: 1.2;  margin-bottom: 0.5rem;  hyphens: none; }

/* ─── HEADER & NAV ─── */
header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--grau-mittel);
    padding: 0 var(--abstand);
}

.header-inner {
    max-width: var(--max-breite);
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text);
}

.logo img { height: 40px; width: 40px; object-fit: contain; }

.logo-text {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text);
}

nav { display: flex; gap: 2rem; align-items: center; }

nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    position: relative;
    transition: color 0.2s;
}

nav a:hover,
nav a.aktiv { color: var(--nav-aktiv); }

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--nav-aktiv);
    transition: width 0.2s;
}

nav a:hover::after,
nav a.aktiv::after { width: 100%; }

/* vorher */
.nav-dropdown { position: relative; display: flex; align-items: center; }

/* „Arbeiten" ist nicht klickbar – nur Label das Dropdown öffnet */
.nav-dropdown-label {
    text-decoration: none;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    cursor: default;
    position: relative;
    transition: color 0.2s;
    user-select: none;
}

.nav-dropdown-label.aktiv,
.nav-dropdown:hover .nav-dropdown-label { color: var(--nav-aktiv); }

/* nachher */
.nav-dropdown { position: relative; display: flex; align-items: center; }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--weiss);
    border: 1px solid var(--grau-mittel);
    padding: 0.5rem 0;
    min-width: 180px;
    z-index: 200;
}

/* Hover-Dropdown nur auf echten Hover-Geräten (Desktop).
   Auf Touch löst Tap sonst sticky-hover aus und das Menü „springt". */
@media (hover: hover) {
    .nav-dropdown:hover .dropdown-menu { display: block; }
}

.dropdown-menu a {
    display: block;
    padding: 0.5rem 1.1rem;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--grau-text);
}

.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover { background: var(--grau-hell); color: var(--nav-aktiv); }

.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--text); }

main { padding-top: 64px; }

/* ─── HERO ─── */
.hero {
    width: 100%;
    height: 50vh;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    background: var(--grau-hell);
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-titel {
    position: absolute;
    bottom: 2rem;
    left: var(--abstand);
    right: var(--abstand);
}

.hero-titel h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    color: var(--weiss);
    line-height: 1.1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.hero-text-only {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
}

.hero-text-only h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
}

.hero-text-only .untertitel {
    font-size: 1rem;
    color: var(--grau-text);
    margin-top: 1rem;
    letter-spacing: 0.04em;
}

/* ─── SEITENHEADER ─── */
.seiten-header {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand) var(--abstand);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.seiten-header h1 {
    font-size: clamp(2.5rem, 3vw, 2.8rem);
    font-weight: 600;
    color: var(--text);
}

.seiten-header .zurueck {
    font-size: 1rem;
    color: var(--grau-text);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.seiten-header .zurueck:hover { color: var(--text); }

/* ─── GALERIE ─── */
.galerie-bereich {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
}

.gruppe { margin-bottom: var(--abstand-gross); }

.gruppe-titel {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--grau-mittel);
}

.gruppe-beschreibung {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 1.2rem;
    line-height: 1.7;
}

/* Unterabschnitt innerhalb einer Gruppe – ohne Trennlinie, gehört zum Vorherigen */
.gruppe-zusatz {
    margin-top: 1.5rem;
}

.gruppe-zusatz-titel {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--schwarz-text);
    margin-bottom: 0.5rem;
}

.bild-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.bild-grid:has(.bild-item:nth-child(4):last-child),
.bild-grid:has(.bild-item:nth-child(8):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.bild-item {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--grau-hell);
    cursor: pointer;
}

.bild-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.bild-item:hover img { transform: scale(1.04); }

/* Einzelwerk */
.einzelwerk {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--abstand);
    margin-bottom: var(--abstand-gross);
    align-items: start;
}

.einzelwerk-bild { overflow: hidden; background: var(--grau-hell); cursor: pointer; }
.einzelwerk-bild img { width: 100%; display: block; transition: transform 0.4s ease; }
.einzelwerk-bild:hover img { transform: scale(1.02); }
.einzelwerk-info { padding-top: 0.5rem; }
.einzelwerk-titel { font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--text); }
.einzelwerk-angaben { font-size: 0.8rem; color: var(--grau-text); line-height: 1.7; }

/* ─── LIGHTBOX ─── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox.aktiv { display: flex; }

.lightbox-inner {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lightbox-inner img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.lightbox-info { color: rgba(255,255,255,0.7); font-size: 0.8rem; text-align: center; letter-spacing: 0.04em; }

.lightbox-schliessen {
    position: fixed;
    top: 1.5rem; right: 1.5rem;
    color: var(--weiss);
    font-size: 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.lightbox-schliessen:hover { opacity: 1; }

.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--weiss);
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ─── SECTION LABEL ─── */
.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: #666;
}

/* ─── TEXT-SEITEN (Impressum, Datenschutz) ─── */
.text-seite {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
    color: #111;
}
.text-seite h1 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 200;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
    color: #111;
}
.text-seite h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    color: #111;
}
.text-seite p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
    color: #111;
}
.text-seite a { color: #111; }
.text-seite ul {
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0.5rem 0 0.75rem 1.5rem;
    color: #111;
}
.text-seite ul li { margin-bottom: 0.3rem; }

/* ─── FOOTER ─── */
footer {
    border-top: 1px solid var(--grau-mittel);
    padding: var(--abstand);
    margin-top: var(--abstand-gross);
}

.footer-inner {
    max-width: var(--max-breite);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links { display: flex; gap: 1.5rem; }

.footer-links a {
    text-decoration: none;
    color: var(--grau-text);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

.footer-links a:hover { color: var(--text); }
.footer-copy { font-size: 0.75rem; color: var(--grau-text); }

/* ─── BUTTONS ─── */
.btn {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border: 1px solid var(--text);
    text-decoration: none;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    transition: all 0.2s;
    font-family: 'Titillium Web', sans-serif;
    cursor: pointer;
    background: none;
}

.btn:hover { background: var(--text); color: var(--weiss); }

/* ─── LINKS ─── */
a { color: var(--text); text-decoration: none; }

a.link-dezent,
.text-spalte a,
.kontakt-text a,
.gruppe-beschreibung a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--grau-mittel);
    font-style: normal;
    transition: text-decoration-color 0.2s;
}

a.link-dezent:hover,
.text-spalte a:hover,
.kontakt-text a:hover,
.gruppe-beschreibung a:hover { text-decoration-color: var(--text); }

/* ─── KUNSTAUXOMAT ─── */
.kax-intro {
    max-width: var(--max-breite-text);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand) var(--abstand);
}

.kax-intro h1 {
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.kax-intro-foto {
    margin-bottom: 1.5rem;
}

.kax-intro-foto img {
    width: 100%;
    height: auto;
    display: block;
}

.kax-intro > p {
    font-size: 0.9rem;
    line-height: 1.85;
    margin-bottom: 0.9rem;
    color: var(--text);
}

.kax-links {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kax-links a {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    text-decoration: none;
    color: var(--weiss);
    background: var(--schwarz);
    padding: 0.55rem 1.1rem;
    transition: opacity 0.2s;
}

.kax-links a:hover { opacity: 0.7; }

.kax-nachkaufen,
.kax-hintergrund,
.kax-ausstellung {
    margin-top: 2.5rem;
    padding-top: 0;
}

.kax-nachkaufen h2,
.kax-hintergrund h2,
.kax-ausstellung h2 {
    margin-bottom: 1.25rem;
    color: var(--text);
}

.kax-nachkaufen p,
.kax-hintergrund p,
.kax-ausstellung p {
    font-size: 0.9rem;
    line-height: 1.85;
    margin-bottom: 0.9rem;
    color: var(--text);
}

.kax-hintergrund img,
.kax-ausstellung img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1.25rem;
}

.kax-hintergrund p.kax-caption,
.kax-ausstellung p.kax-caption,
.kax-caption {
    font-size: 0.8rem;
    color: var(--grau-text);
    line-height: 1.4;
    hyphens: none;
}

.kax-caption a {
    color: var(--grau-text);
    text-decoration: underline;
}

/* Aufklappbares Interview im Kunstauxomat-Hintergrund */
.kax-interview {
    margin: 1.25rem 0 1.5rem;
}

.kax-interview summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--grau-mittel);
    border-bottom: 1px solid var(--grau-mittel);
}

.kax-interview summary::-webkit-details-marker {
    display: none;
}

.kax-interview summary::before {
    content: '▾';
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--grau-text);
    transition: transform 0.2s ease;
}

.kax-interview[open] summary::before {
    transform: rotate(180deg);
}

.kax-interview summary h3 {
    display: inline;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
}

.kax-interview summary h3 strong {
    font-weight: 700;
}

.kax-interview summary:hover h3 {
    color: var(--grau-text);
}

.kax-interview-text {
    padding-top: 1rem;
}

.kax-interview-text p {
    font-size: 0.9rem;
    line-height: 1.85;
    margin-bottom: 0.9rem;
    color: var(--text);
}

.kax-interview-text .frage {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.kax-hintergrund img.kax-foto-klein {
    width: 100%;
    height: auto;
}

.editionen-bereich {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: var(--abstand) var(--abstand) var(--abstand-gross);
}

.edition-gruppe {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
}

.edition-gruppe:last-child { padding-bottom: 0; }

.edition-kopf {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.edition-nummer {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grau-text);
    white-space: nowrap;
}

.edition-titel {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text);
}

/* Slider */
.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slider-viewport {
    overflow: hidden;
    flex: 1;
}

.slider-track {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* 2:3 Hochformat für Kunstauxomat-Slider */
.slider-track .bild-item {
    flex: 0 0 calc((100% - 1rem) / 3);
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--grau-hell);
    cursor: pointer;
}

.slider-track .bild-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.slider-track .bild-item:hover img { transform: scale(1.04); }

.slider-btn {
    background: none;
    border: none;
    font-size: 2.8rem;
    cursor: pointer;
    color: var(--text);
    padding: 0.25rem 0.4rem;
    opacity: 0.3;
    transition: opacity 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.slider-btn:hover:not(:disabled) { opacity: 1; }
.slider-btn:disabled { opacity: 0.08; cursor: default; }

/* Kontaktformular */
.kontakt-bereich {
    max-width: var(--max-breite-text);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-gross);
    min-height: calc(70vh - 64px);
    align-items: start;
}

.kontakt-text h1 { margin-bottom: 1.5rem; }
.kontakt-text p { font-size: 0.95rem; line-height: 1.85; margin-bottom: 1rem; color: var(--text); }

.kontakt-formular { display: flex; flex-direction: column; gap: 1rem; }
.form-gruppe { display: flex; flex-direction: column; gap: 0.3rem; }

.form-gruppe label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grau-text);
}

.form-gruppe input,
.form-gruppe textarea {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--grau-mittel);
    background: var(--weiss);
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.form-gruppe input:focus,
.form-gruppe textarea:focus { border-color: var(--text); }
.form-gruppe textarea { resize: vertical; min-height: 150px; }

.btn-senden {
    display: inline-block;
    padding: 0.7rem 2rem;
    border: 1px solid var(--text);
    background: var(--weiss);
    color: var(--text);
    font-family: 'Titillium Web', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-start;
}

.btn-senden:hover { background: var(--text); color: var(--weiss); }

/* Impressum / Datenschutz */
.impressum-bereich,
.datenschutz-bereich {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
}

.impressum-bereich h1,
.datenschutz-bereich h1 {
    margin-bottom: 2rem;
}

.impressum-bereich h2,
.datenschutz-bereich h2 {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grau-text);
    margin: 2rem 0 0.75rem;
}

.impressum-bereich p,
.datenschutz-bereich p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.datenschutz-bereich ul {
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0.5rem 0 0.75rem 1.5rem;
}

/* Über mich */
.ueber-bereich {
    max-width: var(--max-breite-text);
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .bild-grid { grid-template-columns: repeat(2, 1fr); }
    .einzelwerk { grid-template-columns: 1fr; }

    .kontakt-bereich { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Mobile: extrem schmale Außenabstände, kompakte Sektionsabstände.
       --abstand wird überall verwendet und steuert horizontales Padding. */
    :root {
        --abstand:       0.6rem;
        --abstand-gross: 1.75rem;
    }

    header { padding: 0 0.75rem; }

    nav { display: none; }

    nav.offen {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 64px; left: 0; right: 0;
        background: var(--weiss);
        padding: 1.25rem 1rem;
        gap: 1.1rem;
        border-bottom: 1px solid var(--grau-mittel);
        z-index: 99;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        text-align: center;
    }

    /* Arbeiten-Dropdown im Mobile-Menü: Label optisch wie alle anderen
       Items (mittig, ohne Pfeil), Untermenü erscheint zentriert darunter. */
    nav.offen .nav-dropdown {
        display: block;
        width: 100%;
    }

    nav.offen .nav-dropdown-label {
        display: block;
        cursor: pointer;
        text-align: center;
    }

    nav.offen .dropdown-menu {
        display: none;
        position: static;
        border: none;
        padding: 0.6rem 0 0;
        margin-top: 0.35rem;
        background: transparent;
        min-width: 0;
        text-align: center;
    }

    nav.offen .nav-dropdown.offen .dropdown-menu { display: block; }

    nav.offen .dropdown-menu a {
        padding: 0.45rem 0;
        font-size: 0.95rem;
        text-align: center;
    }

    .burger { display: flex; }
    .hero { height: 32vh; }
    .footer-inner { flex-direction: column; text-align: center; }

    /* Bild-Grid komplett einspaltig auf Mobile.
       Alte 480er-Regel mit 2 Spalten entfernt – die hat sich überschrieben. */
    .bild-grid,
    .bild-grid:has(.bild-item:nth-child(4):last-child),
    .bild-grid:has(.bild-item:nth-child(8):last-child) {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    /* kax-Buttons über volle Breite */
    .kax-links { gap: 0.4rem; }
    .kax-links a {
        flex: 1 1 auto;
        text-align: center;
        font-size: 0.8rem;
        padding: 0.65rem 0.8rem;
    }

    /* Slider: 3 Bilder gleichzeitig sichtbar, schlanke Pfeile */
    .slider-wrapper { gap: 0.1rem; }

    .slider-btn {
        font-size: 1.4rem;
        padding: 0 0.05rem;
        width: 18px;
    }

    .slider-track { gap: 0.3rem; }

    .slider-track .bild-item {
        flex: 0 0 calc((100% - 0.6rem) / 3);
        aspect-ratio: 2 / 3;
    }

    .edition-gruppe {
        margin-bottom: 1.75rem;
        padding-bottom: 1.75rem;
    }

    .edition-titel-zeile {
        font-size: 0.85rem;
    }

    /* Hero-Titel mit weniger Innenrand */
    .hero-titel { left: 0.75rem; right: 0.75rem; bottom: 1.25rem; }
}

@media (max-width: 480px) {
    /* Auch unter 480px nur 1 Spalte – konsistent. */
    .bild-grid,
    .bild-grid:has(.bild-item:nth-child(4):last-child),
    .bild-grid:has(.bild-item:nth-child(8):last-child) {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
}

/* ─── BUCHSEITEN-GRID: 2:3 Hochformat ─── */
/* Für Künstlerbücher mit Buchseiten/Spreads.
   object-fit: contain → Bild immer vollständig, kein Beschnitt (empfohlen).
   Alternativ: object-fit: cover → füllt die Fläche, kann aber beschneiden. */
.bild-grid--buch .bild-item {
    aspect-ratio: 3 / 2;
}

.bild-grid--buch .bild-item img {
    object-fit: contain;       /* vollständig sichtbar, kein Crop */
    background: var(--weiss);
}

/* ─── PLAKATE: Hochformat 353 × 500 (≈ DIN A6) ─── */
.bild-grid--plakate .bild-item {
    aspect-ratio: 353 / 500;
}

.bild-grid--plakate .bild-item img {
    object-fit: contain;       /* vollständig sichtbar, kein Crop */
}

.bild-grid--plakate .bild-item:hover img { transform: none; }

/* ─── FREIFORM: Bilder gleichen Originalformats, kein Crop ─── */
/* Verwende, wenn alle Bilder im Grid das gleiche Bildverhältnis haben
   und in ihrem natürlichen Format dargestellt werden sollen. */
.bild-grid--frei .bild-item {
    aspect-ratio: auto;
    background: transparent;
}

.bild-grid--frei .bild-item img {
    height: auto;
    object-fit: contain;
}

/* ─── VORSCHAU-AUSSCHNITT RECHTS ─── */
/* Bei quadratischem Crop von Querformat-Originalen (z.B. Buchdoppelseiten)
   den rechten Teil zeigen statt der Mitte. */
.bild-grid--rechts .bild-item img {
    object-position: right center;
}

/* ─── PANORAMA: einspaltig, natürliches Format (z.B. Fotografien »unterwegs«) ─── */
.bild-grid--panorama {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
}

.bild-grid--panorama .bild-item {
    aspect-ratio: auto !important;
    background: transparent;
    overflow: visible;
}

.bild-grid--panorama .bild-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

/* ─── EINZELBILD: Originalgröße ─── */
/* Steht nur ein Bild im Grid, wird es in natürlichen Proportionen
   (ohne Crop, ohne erzwungenes Seitenverhältnis) dargestellt. */
.bild-grid:has(.bild-item:only-child) {
    grid-template-columns: 1fr;
}

.bild-grid:has(.bild-item:only-child) .bild-item {
    aspect-ratio: auto;
    max-width: 100%;
}

.bild-grid:has(.bild-item:only-child) .bild-item img {
    height: auto;
    object-fit: unset;
}

/* ─── ALLGEMEINE TYPOGRAFIE h1–h4 ─── */
/* Für Fließtextseiten (Blog, Über mich, lange Texte).
   Spezifischere Regeln in .hero-titel, .seiten-header etc. haben weiterhin Vorrang. */


/* ─── SILBENTRENNUNG ─── */
p, li, .gruppe-beschreibung, .artikel-text, .kax-intro > p,
.kax-nachkaufen p, .kax-hintergrund p, .kax-ausstellung p,
.ueber-bereich p, .kontakt-text p {
    hyphens: auto;
    -webkit-hyphens: auto;
}

strong { font-weight: 600; }


/* h2/h3 global definiert am Anfang der CSS */

h4 {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--grau-text);
    margin-top: 1.5rem;
    margin-bottom: 0.4rem;
}

/* Textspalte für Blog / Artikel (h2–h4 + p automatisch gestylt) */
.artikel-text {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--abstand-gross) var(--abstand);
}

.artikel-text p {
    font-size: 1rem;
    line-height: 1.85;
    margin-bottom: 1rem;
    color: var(--text);
}

.artikel-text h2 { margin-top: 3rem; }
.artikel-text h3 { margin-top: 2.5rem; }
.artikel-text h4 { margin-top: 2rem; }

/* Edition-Titelzeile: Grundgewicht 300 für Titel, <strong> macht Edition+Nr auf 600.
   Größe explizit – sonst übernimmt das h2-Default (clamp bis 2.3rem) und der
   Titel wird auf Mobile riesig. */
.edition-titel-zeile {
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
    hyphens: none;
}