/* Valentin Nieroba V3: weisser Galerie-Look, gut lesbar.
   Schriftart (V14) an izzyweissgerber.com angelehnt - dort Abel (Nav/Fliesstext, frei, Google Fonts, 1:1 uebernommen)
   und "Alien League" (Headlines/Display) als Vorbild. Alien League wird nur ueber Drittanbieter-Aggregatoren
   vertrieben, kommerzielle Lizenz unklar (gleiche Situation wie Proxima Nova in V11) - daher "Big Shoulders Stencil
   Display" (Google Fonts, frei) als Ersatz: passt als echte Schablonen-Schrift inhaltlich zu Valentins Spray-/
   Stencil-Technik. Nur fuer Ueberschriften/Display eingesetzt (h1-h3, Werktitel-Kacheln, Schritt-Nummern) -
   Navigation/Buttons/Formulare/Fliesstext bleiben in Abel. Ersetzt die Bebas-Neue/Mulish-Kombination aus V11/V12.
   (V16 hatte Big Shoulders Stencil Display kurzzeitig durch "Megrim" ersetzt - auf Wunsch von Valentin wieder
   zurueckgesetzt.)
   V22: Schriftdateien werden nicht mehr live von fonts.googleapis.com/fonts.gstatic.com geladen, sondern selbst
   gehostet (siehe master-prompt-v11-impressum-datenschutz-agb.md - DSGVO-Thema, LG Muenchen 2022). Nur Weight 400
   wird irgendwo im CSS verwendet, daher genuegt je eine Schnittdatei pro Familie. */
@font-face{font-family:'Abel';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/abel-regular.woff2') format('woff2')}
@font-face{font-family:'Big Shoulders Stencil Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/big-shoulders-stencil-display-regular.woff2') format('woff2')}
:root{--ink:#000;--mute:#242424;--line:#dcdcdc;--tile:#f3f3f3;--bg:#fff;--gap:clamp(20px,4vw,56px);--maxw:1320px;--frame:#cfc6b6;
  --accent:#f67415;--accent-light:#ffb067;
  --font-body:Abel,"Helvetica Neue",Helvetica,Arial,sans-serif;--font-head:"Big Shoulders Stencil Display",Abel,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:400;font-size:.9rem;line-height:1.7;color:var(--ink);background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gap)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left: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}
h1,h2,h3{font-family:var(--font-head);font-weight:400;line-height:1.15;text-transform:uppercase;letter-spacing:.03em}
h1{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);margin-bottom:.6em}
h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);margin-bottom:.7em}
h3{font-size:1.125rem}
p+p{margin-top:1em}
.kicker{font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.6rem}
.lead{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.6}
.muted,.note{color:var(--mute);font-size:.85rem}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}

/* Kopfzeile */
.utility .container{display:flex;justify-content:flex-end;align-items:center;gap:8px;min-height:48px;max-width:none}
.utility button,.utility a{font:500 .85rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;color:var(--ink);cursor:pointer;min-height:48px;padding:0 12px;display:inline-flex;align-items:center;text-decoration:none}
.utility a[aria-current="true"]{text-decoration:underline;text-decoration-thickness:2px}
.utility .sep{color:var(--line)}
.site-header{background:#fff;position:relative;z-index:20}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:160px;max-width:none}
.brand img{height:clamp(100px,10.8vw,152px);width:auto}
.nav{display:flex;gap:clamp(18px,2.4vw,44px);align-items:center}
.nav a{font:500 .85rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:14px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-color:var(--line)}
/* V28: aktiver Menuepunkt statt Unterstrich-Linie zwei orangene Rahmenecken (Schattenfugenrahmen-Motiv,
   siehe style.css-Kommentar oben und prompt-v28-nav-ecken-eyecatcher.md) links/rechts vom Label. */
.nav a[aria-current="page"]{display:inline-flex;align-items:center;gap:.55em}
.nav-corner{width:1.3em;height:1.3em;flex:0 0 auto}
.nav-corner-end{transform:rotate(180deg)}
.burger{display:none;min-height:48px;padding:0 18px;font:500 .9rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer}
@media(max-width:1180px){
  .burger{display:inline-flex;align-items:center}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gap) 20px}
  .nav.open{display:flex}
  .nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.125rem}
  .header-inner{min-height:130px}
}

/* Slider (V20: feste, am Viewport orientierte Boxhoehe statt festem Seitenverhaeltnis, object-fit:contain
   statt cover - nach Vorbild cevinparker.com/de/, damit jedes Bild vollstaendig sichtbar bleibt statt
   hart auf 16:9 zugeschnitten zu werden; Hintergrund auf reines Weiss wie beim Galerie-"schwebend"-Update) */
.slider{position:relative;background:#fff}
.slides{position:relative;height:clamp(420px,78vh,650px);width:100%;overflow:hidden;background:#fff}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:contain}
@media(max-width:700px){.slides{height:clamp(320px,60vh,480px)}}
.slider-bar{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-height:64px;padding:8px var(--gap);flex-wrap:wrap}
.slider-ctl{display:flex;align-items:center;gap:0}
.slider-ctl button{min-width:44px;min-height:48px;background:none;border:0;cursor:pointer;color:var(--ink);font:500 1.5rem var(--font-body);display:inline-flex;align-items:center;justify-content:center}
.slider-ctl .dot::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:transparent;display:block}
.slider-ctl .dot[aria-current="true"]::before{background:var(--ink)}
.intro{padding:clamp(40px,6vw,88px) 0}
.intro-text{max-width:56rem}
h1{text-wrap:balance}
.icon-row{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:1.4rem}
.icon-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.icon-link svg{flex:none}
.icon-link:hover{text-decoration:underline}

/* Home-Intro-Sektion (V14, Zweispalter nach izzyweissgerber.com Home-Vorbild) */
.intro-hero .split{align-items:stretch}
.intro-hero .figure{margin:0}
.intro-hero .figure img{width:100%;height:100%;min-height:360px;object-fit:cover}
.intro-hero .intro-text{max-width:38rem;display:flex;flex-direction:column;justify-content:center}
.intro-hero .intro-text p{margin-top:1.15em;line-height:1.75}
@media(max-width:860px){.intro-hero .figure img{min-height:320px}}
/* V18: zwei Atelierfotos nebeneinander (Diptychon) - V20 wieder auf ein einzelnes Bild zurueckgesetzt,
   .intro-duo-Regeln daher entfernt (Markup nutzt wieder nur noch .figure, siehe oben). */

/* Seiten */
.section{padding:clamp(48px,7vw,104px) 0}
.section.tight{padding:clamp(32px,4vw,56px) 0}
.page-head{padding:clamp(40px,6vw,88px) 0 clamp(12px,2vw,24px)}
.page-head .lead{max-width:44rem;margin-top:.6rem}
.split{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;align-items:start}
.split.wide-right{grid-template-columns:.9fr 1.1fr}
.split.wide-left{grid-template-columns:1.1fr .9fr}
@media(max-width:860px){.split,.split.wide-right,.split.wide-left{grid-template-columns:1fr}}
.figure figcaption{font-size:1rem;color:var(--mute);margin-top:.6rem}
.figure-sm{max-width:760px;margin-left:auto;margin-right:auto}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;font:500 .9rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:var(--ink);color:#fff;border:2px solid var(--ink);cursor:pointer}
.btn:hover{background:#fff;color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.small{min-height:48px;padding:0 20px;font-size:.82rem}
.btn:disabled{opacity:.6;cursor:wait}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem}
.text-link{font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem}

/* Werk-Raster (Kaeuferseite) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(28px,4vw,56px) var(--gap);align-items:start}
.card-media{display:block;background:#fff;aspect-ratio:4/5}
.card-img{width:100%;height:100%;object-fit:contain;display:block}
.card-body{padding-top:16px}
.card-body .card-num{font-size:.85rem;letter-spacing:.14em;margin-bottom:.3rem}
.card-body h3{font-size:1.1rem;letter-spacing:.1em;margin-bottom:.35rem}
.card-body h3 a{text-decoration:none}
.card-body h3 a:hover{text-decoration:underline}
.card-body .meta{font-size:.9rem;color:var(--mute);line-height:1.5}
.card-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.pill{font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);padding:4px 12px;line-height:1.4}
.pill.sold{background:var(--ink);color:#fff}
.notice{margin-top:2rem;color:var(--mute);font-size:.85rem;max-width:52rem}

/* Galerie-Seite (V19, Architektur nach cevinparker.com/de/for-art-buyer/: 3 Spalten, Bilder vollstaendig/unbeschnitten via object-fit:contain statt randabfallend zugeschnitten; V20: groesserer/asymmetrischer Abstand wie bei Cevin (56px Zeilen/40px Spalten), Hintergrund hinter dem Rahmen auf reines Weiss statt --tile, damit Rahmen+Werk ohne sichtbare Box auf der Seite schweben; V26: align-items:start statt des Grid-Defaults stretch, da jede Kachel jetzt per grid_ratio_style() ihre eigene Bildhoehe hat (siehe parts/head.py) - ohne start wuerden kuerzere Kacheln auf die Hoehe der hoechsten Kachel in derselben Zeile gedehnt) */
.page-head.center{text-align:center}
.page-head.center .lead{margin-left:auto;margin-right:auto}
.gtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;align-items:start}
@media(max-width:860px){.gtiles{grid-template-columns:repeat(2,1fr);gap:40px 28px}}
@media(max-width:480px){.gtiles{grid-template-columns:1fr;gap:36px}}
.gtile{display:block;text-decoration:none;color:inherit}
.gtile-media{display:block;aspect-ratio:4/5;background:#fff}
.gtile-img{width:100%;height:100%;object-fit:contain}
.gtile-ph{display:flex;align-items:center;justify-content:center;height:100%;padding:12%;text-align:center;font-size:.78rem;letter-spacing:.02em;line-height:1.5;color:#8d8878;background:linear-gradient(150deg,#ece9e2,#d9d5ca)}
.gtile-cap{display:block;padding:14px 4px 0}
.gtile-title{display:block;font-family:var(--font-head);font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;line-height:1.2}
.gtile-meta{display:block;font-size:.82rem;color:var(--mute);margin-top:.3rem}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s}
.steps li{border-top:2px solid var(--ink);padding-top:16px;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-head);font-weight:400;letter-spacing:.04em;color:var(--mute);font-size:.9rem}
.steps h3{margin:.3rem 0 .4rem}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* Werkseite */
.crumbs{font-size:.85rem;color:var(--mute);margin-bottom:1.6rem}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.work{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:start}
@media(max-width:900px){.work{grid-template-columns:1fr}}
.work-info h1{font-size:1.5rem;letter-spacing:.03em}
/* V19: Hauptbild der Werkseite flach und unbeschnitten (keine 3D-Kipptechnik mehr, kein fester Bildausschnitt -
   zeigt das Foto in seinem eigenen Seitenverhaeltnis, Vorbild cevinparker.com/de/for-art-buyer/).
   V23: bei V19 wurde das Bild auf volle Spaltenbreite gestreckt (width:100%) - bei schmal-hohen Werken (z.B.
   50x20cm, WAVES OF LIFE 03/04) fuehrte das zu einer weit ueber den Viewport hinausragenden, stark
   hochskalierten (und damit unscharfen) Darstellung. Jetzt wie bei Cevin Parker: das Bild wird in eine Box mit
   Hoehenobergrenze eingepasst (passt komplett in den sichtbaren Bereich, kein Hochskalieren ueber die
   Originalaufloesung hinaus -> scharf), mit dezentem Passepartout-Hintergrund (gleiche Tile-Farbe wie die
   Thumbnails darunter). Zoom per Klick (Lightbox) bleibt unveraendert erhalten. */
.gallery-main{display:block;width:100%;background:transparent;border:0;padding:0;cursor:zoom-in}
.gallery-main.ph-static{cursor:default}
.gallery-main:not(.ph-static){display:flex;align-items:center;justify-content:center;background:#fff;max-height:min(68vh,640px);overflow:hidden}
.gallery-img{width:auto;height:auto;max-width:100%;max-height:min(68vh,640px);display:block;object-fit:contain}
@media(max-width:640px){.gallery-main:not(.ph-static),.gallery-img{max-height:56vh}}
/* Flacher Platzhalter fuer Werke ohne finale Produktfotografie (ersetzt seit V19 die fruehere 3D-Kipptechnik) */
.flat-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;padding:12%;text-align:center;font-size:.78rem;letter-spacing:.02em;line-height:1.5;color:#8d8878;background:linear-gradient(150deg,#ece9e2,#d9d5ca)}
.flat-ph .ph-note{max-width:16em}
.thumbs{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.thumbs button{width:88px;height:88px;background:#fff;border:2px solid transparent;padding:6px;cursor:pointer}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.gallery-cap{font-size:.85rem;color:var(--mute);margin-top:.6rem}
.gallery-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:1rem}
.ph-link{font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);opacity:.6;cursor:default}
.ph-link em{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none}
.spec{margin:1.6rem 0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:9rem 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.82rem;color:var(--mute)}
.spec dd{font-weight:500;font-size:.9rem}
.box{border:2px solid var(--ink);padding:18px 20px;margin-top:1.6rem}
.box ul{margin:.6rem 0 0 1.2rem}
.inline-inquiry{margin-top:clamp(48px,6vw,88px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--line)}
/* Seit V18: der Anfrage-Block sitzt direkt in der .work-info-Spalte, unmittelbar unter der Spec-Liste (Preis) -
   dort reicht ein deutlich kleinerer Abstand als bei einer eigenstaendigen, containerbreiten Sektion. */
.work-info .inline-inquiry{margin-top:1.8rem;padding-top:1.6rem}
.work-info .inline-inquiry h2{font-size:1.2rem}
.work-info .inline-inquiry .lead{margin-top:.4em}
.contact-rows dt{width:9rem}
.contact-rows dd a{text-decoration:none}
.contact-rows dd a:hover{text-decoration:underline}
.lightbox{border:0;background:transparent;max-width:96vw;max-height:96vh;padding:0}
.lightbox::backdrop{background:rgba(255,255,255,.96)}
.lightbox img{max-width:94vw;max-height:90vh;width:auto;height:auto;margin:0 auto}

/* Formulare */
.field{margin-bottom:1.4rem}
.field label{display:block;font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--mute)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;font:400 .9rem var(--font-body);color:var(--ink);background:#fff;border:0;border-bottom:2px solid var(--ink);padding:10px 0;border-radius:0}
.field textarea{border:2px solid var(--ink);padding:12px;min-height:150px;resize:vertical}
.field.check{display:flex;gap:12px;align-items:flex-start}
.field.check input{width:24px;height:24px;margin-top:5px;flex:none;accent-color:#111}
.field.check label{text-transform:none;letter-spacing:0;font-weight:400;font-size:.85rem;color:var(--ink);line-height:1.5;margin:0}
.form-status{margin-top:1rem;font-weight:500;font-size:.9rem}
.form-status.ok{border-left:4px solid var(--ink);padding-left:12px}
.form-status.err{border-left:4px solid #b00020;padding-left:12px;color:#8a0018}
.inq-work{display:flex;gap:16px;align-items:center;margin-bottom:1.4rem;border:1px solid var(--line);padding:12px}
.inq-work img{width:72px;height:90px;object-fit:contain;background:var(--tile)}
.inq-work strong{display:block;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem}
.inq-work span{color:var(--mute);font-size:.85rem}
dialog#inquiry,dialog#mailing{border:0;padding:0;width:min(600px,94vw);max-height:92vh;overflow:auto;margin:auto;background:#fff;color:var(--ink)}
dialog#inquiry::backdrop,dialog#mailing::backdrop{background:rgba(17,17,17,.5)}
.modal{padding:clamp(24px,4vw,44px);position:relative}
.modal h2{font-size:1.5rem;padding-right:56px}
.modal-close{position:absolute;right:8px;top:8px;width:48px;height:48px;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink)}
.modal .muted{margin-bottom:1.4rem}
.catalogue{background:var(--tile);padding:clamp(24px,4vw,48px)}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,88px);padding:clamp(32px,4vw,56px) 0}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.footer-grid ul{list-style:none}
.footer-grid a,.footer-grid button{font-size:.9rem;text-decoration:none;display:inline-block;padding:8px 0;background:none;border:0;cursor:pointer;color:var(--ink);font-family:inherit}
.footer-grid a:hover,.footer-grid button:hover{text-decoration:underline}
.footer-grid a.icon-link{display:inline-flex;align-items:center;gap:8px}
.footer-grid p{font-size:.85rem;color:var(--mute)}
.footer-bottom{margin-top:2rem;color:var(--mute);font-size:.85rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr}}

/* Rechtstexte */
.legal{max-width:52rem}
.legal h2{font-size:1.25rem;margin-top:2rem}
.legal h3{margin-top:1.4rem}
.legal p{margin-top:.8rem}
mark.todo{background:#fff3a3;color:#111;padding:0 .2em}
.reveal{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}