/* Stylesheet der Kuenstlerseite - handgeschrieben, kein Build-Schritt.

   Gestaltung nach dem Moodboard (September 2026): weisse Flaeche, viel Luft,
   Haarlinien, Space Grotesk fuer Ueberschriften, Inter fuer den Text - die
   Schriften des Werkverzeichnisses. Die Signatur ist die Marke. Farbe kommt
   ausschliesslich aus den Bildern. */

@font-face { font-family: "Inter"; src: url("fonts/inter-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --grund: #ffffff;
    --schale: #fafaf9;
    --tinte: #1a1a1a;
    --grau: #8a8a8a;
    --linie: #e7e5e2;
    --akzent: #8c7a5e;
    --fliesstext: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --display: "Space Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
    --rand: clamp(1.25rem, 4vw, 3rem);
    --kopfhoehe: 5.5rem;
    --breite: 1400px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fliesstext);
    font-weight: 300;
    /* Ticket #46: Lesetext eine Stufe kleiner (vorher 1.02rem = 16.3px).
       Ueberschriften und die ohnehin kleinen Navigations-/Label-Groessen
       bleiben unveraendert. */
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--tinte);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--grau); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.grau { color: var(--grau); }

main { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 6rem; }
.seite-home main { max-width: none; padding: 0; }

/* Typografie */
h1, h2, h3, .wie-h1 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0;
}
h1, .wie-h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 3.5rem 0 2.25rem; }
h1.gross { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0.06em; margin: 3rem 0 2.5rem; }
h2 { font-size: clamp(1rem, 1.6vw, 1.2rem); margin: 3rem 0 1.25rem; }
.fliesstext p { margin: 0 0 1.1em; }
.fliesstext p:last-child { margin-bottom: 0; }
.fliesstext a { text-decoration: underline; }
.leer { color: var(--grau); }
.sprachmarke {
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--grau);
    margin: 1.75rem 0 0.75rem;
}
.sprachmarke:first-of-type { margin-top: 0; }
::selection { background: var(--tinte); color: #fff; }

/* Kopf und Navigation */
.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.5rem;
    min-height: var(--kopfhoehe);
    padding: 1.25rem var(--rand);
    background: var(--grund);
}
.marke { display: block; line-height: 0; }
.marke img { width: clamp(150px, 16vw, 210px); height: auto; }
.kopf nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.kopf nav a {
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--grau);
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--tinte); }
.sprachwahl { border: 1px solid var(--linie) !important; padding: 0.15rem 0.6rem !important; color: var(--tinte) !important; }
.sprachwahl:hover { border-color: var(--tinte) !important; }

/* Mobiles Menue (Schalter erscheint nur mit JS - menu.js) */
.menu-toggle { display: none; }
@media (max-width: 760px) {
    .kopf { flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
    .marke img { width: 140px; }
    body.js .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        background: none;
        border: 0;
        cursor: pointer;
    }
    .menu-toggle-balken, .menu-toggle-balken::before, .menu-toggle-balken::after {
        display: block; width: 22px; height: 1.5px; background: var(--tinte); position: relative; transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .menu-toggle-balken::before, .menu-toggle-balken::after { content: ""; position: absolute; left: 0; }
    .menu-toggle-balken::before { top: -7px; }
    .menu-toggle-balken::after { top: 7px; }
    .menu-toggle[aria-expanded="true"] .menu-toggle-balken { background: transparent; }
    .menu-toggle[aria-expanded="true"] .menu-toggle-balken::before { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle-balken::after { transform: translateY(-7px) rotate(-45deg); }
    /* Klassenname "offen" wird von menu.js gesetzt. */
    body.js .kopf nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0.75rem; padding: 0.25rem 0 0.5rem; border-top: 1px solid var(--linie); }
    body.js .kopf nav.offen { display: flex; }
    body.js .kopf nav a { font-size: 0.82rem; padding: 0.85rem 0; border-bottom: 1px solid var(--linie); }
    body.js .kopf nav a[aria-current="page"] { border-bottom-color: var(--linie); color: var(--tinte); font-weight: 500; }
    body.js .kopf nav .sprachwahl { align-self: flex-start; margin-top: 1rem; border-bottom-width: 1px !important; }
}

/* Vorschau-Leiste (nur fuer die angemeldete Redaktion mit ?vorschau=1) */
.vorschau-leiste { margin: 0; padding: 0.5rem var(--rand); background: var(--tinte); color: #fff; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.04em; }
.vorschau-leiste a { color: #fff; margin-left: 0.75rem; }

/* Meldungen nach Formularen */
.hinweise { max-width: var(--breite); margin: 0.5rem auto 0; padding: 0 var(--rand); }
.hinweis { border-top: 1px solid var(--tinte); padding: 0.9rem 0; margin: 0; font-weight: 400; }

/* Startseite: Buehne */
.buehne {
    position: relative;
    height: calc(100vh - var(--kopfhoehe));
    height: calc(100dvh - var(--kopfhoehe));
    min-height: 420px;
    padding: 0 var(--rand) 4.5rem;
}
.buehne-bilder { position: relative; height: 100%; }
.buehne-bild {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.6s ease;
    pointer-events: none;
}
.buehne-bild.aktiv { opacity: 1; pointer-events: auto; }
.buehne-bild img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.buehne-punkte {
    position: absolute; left: var(--rand); bottom: 1.6rem;
    display: grid; grid-template-columns: repeat(8, 12px); gap: 8px 10px;
}
.punkt {
    width: 12px; height: 12px; padding: 0; border: 0; cursor: pointer;
    background: transparent; position: relative;
}
.punkt::before {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--linie); transition: background 0.2s ease, transform 0.2s ease;
}
.punkt:hover::before { background: var(--grau); }
.punkt.aktiv::before { background: var(--tinte); transform: scale(1.15); }
.buehne-pfeil {
    position: absolute; top: 0; bottom: 4.5rem; width: 22%; border: 0; background: transparent;
    cursor: pointer; color: transparent;
}
.buehne-pfeil.zurueck { left: 0; cursor: w-resize; }
.buehne-pfeil.vor { right: 0; cursor: e-resize; }
.buehne-pfeil:focus-visible { outline-offset: -3px; }
@media (max-width: 760px) {
    .buehne { height: auto; min-height: 0; padding-bottom: 3.5rem; }
    .buehne-bilder { aspect-ratio: 4 / 3; }
    .buehne-punkte { bottom: 1rem; grid-template-columns: repeat(10, 12px); }
    .buehne-pfeil { display: none; }
}

/* Filterzeile (Serien) */
.filterzeile { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0 0 2.25rem; }
.filterzeile button {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 400; color: var(--grau);
    letter-spacing: 0.02em; transition: color 0.2s ease;
}
.filterzeile button:hover { color: var(--tinte); }
.filterzeile button.aktiv { color: var(--tinte); font-weight: 600; }
.serientext { max-width: 60ch; margin: -1rem 0 2rem; }
[data-filter] li.ausgeblendet { display: none; }

/* Raster (Katalog, Serien) */
.raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3.5rem 2.5rem;
}
.raster li { min-width: 0; }
.raster a { display: block; text-decoration: none; }
.raster img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: contain; object-position: center bottom;
    background: var(--grund);
}
.raster figcaption, .werktitel { display: block; margin-top: 0.85rem; font-weight: 600; font-size: 0.84rem; letter-spacing: 0.01em; }
.werkdaten { display: block; color: var(--grau); font-size: 0.78rem; margin-top: 0.15rem; }
.raster a:hover img { opacity: 0.94; }
@media (max-width: 960px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
/* Einspaltig braucht das Raster keine feste Box mehr - das Bild bestimmt die Hoehe. */
@media (max-width: 560px) { .raster { grid-template-columns: 1fr; gap: 3rem; } .raster img { aspect-ratio: auto; } }

/* Katalog-Anfrage */
.katalog-anfrage { margin-top: 6rem; padding-top: 3rem; border-top: 1px solid var(--linie); max-width: 640px; }
.katalog-anfrage h2 { margin-top: 0; }

/* Werkseite */
.zurueck { margin: 2.5rem 0 1.5rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.zurueck a { text-decoration: none; color: var(--grau); }
.zurueck a:hover { color: var(--tinte); }
.werk-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: start; }
.werkbilder { display: grid; gap: 1.5rem; }
.werkinfo h1 { margin-top: 0; }
.werkinfo .serie { margin: -1.5rem 0 1.5rem; color: var(--grau); }
.werkseite dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.5rem; margin: 0 0 2rem; font-size: 0.86rem; }
.werkseite dt { color: var(--grau); }
.werkseite dd { margin: 0; }
.raum { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 2rem 0; }
.raum a { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.anfrage { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.anfrage h2 { margin-top: 0; }
.mailto { margin-top: 1.5rem; font-size: 0.82rem; color: var(--grau); }
@media (max-width: 860px) { .werk-layout { grid-template-columns: 1fr; } }

/* Dreamland */
.zweispaltig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5rem; }
.zweispaltig .spalte > h1, .zweispaltig .spalte > .wie-h1 { margin-top: 3.5rem; }
.zweispaltig .fliesstext { max-width: 60ch; }
.serien { margin-top: 5rem; padding-top: 3rem; border-top: 1px solid var(--linie); }
.serien h2 { margin-top: 0; }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; gap: 1rem; } .zweispaltig .spalte > h1, .zweispaltig .spalte > .wie-h1 { margin-top: 2.5rem; } }

/* CV */
.cv-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.cv-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cv-fotos img:first-child { grid-column: 1 / -1; }
.cv-text { max-width: 62ch; font-weight: 400; }
.cv-ausstellungen { margin-top: 5rem; }
.cv-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 2rem; border-top: 1px solid var(--tinte); }
.cv-jahr { font-weight: 600; padding: 0.55rem 0; }
.cv-eintraege li { padding: 0.55rem 0; border-top: 1px solid var(--linie); font-weight: 400; }
.cv-eintraege li:first-child { border-top: 0; }
.cv-eintraege a { text-decoration: none; border-bottom: 1px solid var(--linie); }
.cv-eintraege a:hover { border-bottom-color: var(--tinte); }
.cv-presse { margin-top: 5rem; }
.presse li { padding: 0.55rem 0; border-top: 1px solid var(--linie); font-weight: 400; }
.presse li:last-child { border-bottom: 1px solid var(--linie); }
.presse a { text-decoration: none; }
.presse a:hover { text-decoration: underline; }
.quelle { color: var(--grau); margin-left: 0.6rem; font-size: 0.82rem; }
@media (max-width: 860px) {
    .cv-kopf { grid-template-columns: 1fr; }
    .cv-zeile { grid-template-columns: 1fr; gap: 0; }
    .cv-jahr { padding-bottom: 0; }
}

/* Studio */
.projekte { display: grid; gap: 6rem; max-width: 980px; }
.projekt h2 { margin: 1.75rem 0 1rem; }
.projekt h2 a { text-decoration: none; }
.projekt .fliesstext { max-width: 68ch; font-weight: 400; }
.projekt-medien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.projekt-medien figure.video, .projekt-medien figure:only-child { grid-column: 1 / -1; }
.projekt-medien video { width: 100%; background: #000; }
.projekt-medien figcaption { margin-top: 0.5rem; font-size: 0.78rem; color: var(--grau); }
@media (max-width: 560px) { .projekt-medien { grid-template-columns: 1fr; } .projekte { gap: 4rem; } }

/* For Galleries, Textseiten */
.galerien .einleitung, .text-seite .fliesstext { max-width: 66ch; }
.galerien .formular { max-width: 640px; margin-top: 3rem; }
.text-seite { max-width: 72ch; }

/* Jahres-Galerien (nicht im Menue, Route bleibt) */
.slides { display: grid; gap: 2rem; }
.slides figcaption { margin-top: 0.5rem; font-size: 0.78rem; color: var(--grau); }

/* Formulare */
form p { margin: 0 0 1.25rem; }
form label { display: block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grau); margin-bottom: 0.4rem; }
form label .optional { text-transform: none; letter-spacing: 0; }
form input:not([type="checkbox"]), form textarea {
    width: 100%; padding: 0.7rem 0; border: 0; border-bottom: 1px solid var(--linie);
    background: transparent; font: inherit; font-weight: 400; color: var(--tinte); border-radius: 0;
}
form input:focus, form textarea:focus { outline: none; border-bottom-color: var(--tinte); }
form textarea { resize: vertical; min-height: 7rem; }
.felder-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
@media (max-width: 560px) { .felder-zeile { grid-template-columns: 1fr; } }
.optin label { display: flex; gap: 0.75rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: var(--tinte); font-weight: 300; line-height: 1.55; cursor: pointer; }
.optin input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0.2rem 0 0; flex: none; accent-color: var(--tinte); }
.optin a { text-decoration: underline; }
.knopf, form button[type="submit"] {
    display: inline-block; padding: 0.95rem 2.2rem; border: 1px solid var(--tinte); background: var(--tinte); color: #fff;
    font: inherit; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.knopf:hover, form button[type="submit"]:hover { background: var(--grund); color: var(--tinte); }
.errorlist { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.82rem; color: #a13d2d; font-weight: 400; }
.fehlerhaft input, .fehlerhaft textarea { border-bottom-color: #a13d2d; }
.form-status { font-weight: 400; margin: 0 0 1rem; }
.form-status:empty { display: none; }
form.gesendet .felder-zeile, form.gesendet p:not(.form-status), form.gesendet .knopf { display: none; }
/* Honeypot: fuer Menschen unsichtbar, aber nicht display:none - manche Bots
   ueberspringen ausgeblendete Felder. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mailing-List-Popup */
.popup {
    width: min(92vw, 460px); padding: 0; border: 0; margin: auto;
    background: var(--grund); color: var(--tinte); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.popup::backdrop { background: rgba(20, 18, 16, 0.4); }
/* Der Fokusring gehoert aufs erste Feld, nicht auf den Dialog selbst. */
.popup:focus, .popup:focus-visible { outline: none; }
.popup[open] { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 560px) {
    .popup { width: min(100vw - 1.5rem, 460px); }
    .popup form { padding: 2.25rem 1.5rem 1.75rem; }
    .popup-intro { font-size: 0.86rem; }
}
.popup form { position: relative; padding: 2.5rem 2.25rem 2.25rem; }
.popup h2 { margin: 0 0 0.5rem; }
.popup-intro { color: var(--grau); margin: 0 0 1.75rem; }
.popup-schliessen {
    position: absolute; top: 0.6rem; right: 0.6rem; width: 40px; height: 40px;
    border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--grau); cursor: pointer;
}
.popup-schliessen:hover { color: var(--tinte); }
.popup .knopf { width: 100%; }
/* Ohne JS bleibt das dialog-Element ein Block am Seitenende, wenn der Server es
   offen rendert (Formfehler): dann ohne Backdrop, aber mit Rahmen. */
body:not(.js) .popup[open] { position: static; border-top: 1px solid var(--linie); box-shadow: none; width: min(100%, 640px); margin: 0 auto 4rem; }

/* Fuss */
.fuss {
    max-width: var(--breite); margin: 0 auto; padding: 2rem var(--rand) 2.5rem;
    border-top: 1px solid var(--linie);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 2rem;
    font-size: 0.8rem; color: var(--grau);
}
.seite-home .fuss { border-top: 0; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tinte); }
.fuss p { margin: 0; display: flex; align-items: center; gap: 1rem; }
.instagram { display: inline-flex; line-height: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .buehne-bild { transition: none; }
}