/* Konzept 13 · Mosaik. Referenz: Max Draeger und viele Marken-Fotografen: Bilder im eigenen Format statt im Einheitsraster,
   Titel in gesperrter Versalschrift darunter, Kundenname klein. Das Logo steht mittig, das Menü hat vier Einträge, „Shop“ ist
   einer davon (wie bei Chris Burkard). Der Kalender ist eine Kachel im Mosaik, nicht ein Banner.
   Die Zuschnitte der Bilder sind Platzhalter, in der Produktion kommen die Originalformate. */
:root{--f-head:'Barlow Condensed','Arial Narrow',sans-serif;--f-body:'Barlow',system-ui,sans-serif}
body{background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--f-body)}
h1,h2,h3,.caps{font-family:var(--f-head);font-weight:500;text-transform:uppercase;letter-spacing:.18em}
.promo{background:var(--surface-2);text-align:center;padding:9px 16px;font-size:15px;border-bottom:1px solid var(--line)}
.promo a{font-weight:700;color:var(--accent-text)}
header.top{text-align:center;padding:28px 16px 12px}
header.top .logo{height:54px;margin:0 auto}
header.top p{margin-top:8px;font:500 13px var(--f-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
nav.menu{display:flex;justify-content:center;align-items:center;gap:4px 8px;flex-wrap:wrap;padding:8px 16px 20px;position:sticky;top:0;background:var(--bg);z-index:10;border-bottom:1px solid var(--line)}
nav.menu a{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;text-decoration:none;font:500 15px var(--f-head);letter-spacing:.2em;text-transform:uppercase}
nav.menu a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
nav.menu a.shop{background:var(--accent);color:var(--on-accent);border-radius:var(--radius);font-weight:600}
.wrap{padding:0 clamp(16px,4vw,64px)}
.filters{display:flex;justify-content:center;gap:2px 18px;flex-wrap:wrap;padding:32px 0 12px}
.filters button{min-height:44px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:500 14px var(--f-head);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.filters button[aria-pressed=true]{color:var(--fg);border-bottom-color:var(--accent)}
.mosaic{display:flex;gap:clamp(20px,3vw,48px);align-items:flex-start;padding:24px 0 clamp(48px,6vw,96px)}
.mcol{flex:1 1 0;min-width:0}
.m{break-inside:avoid;margin:0 0 clamp(28px,4vw,56px);text-align:center;display:block;text-decoration:none}
.m[hidden]{display:none}
.m img{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--line)}
.m h3{margin-top:14px;font-size:18px;letter-spacing:.2em}
.m small{display:block;color:var(--muted);font-size:14px}
.m:hover h3,.m:focus-visible h3{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.cal{background:var(--accent);color:var(--on-accent);padding:clamp(20px,3vw,36px) clamp(16px,2vw,28px);border-radius:var(--radius);text-align:center;display:block;text-decoration:none}
.cal small{color:var(--on-accent);opacity:.8;font-size:13px}
.cal h3{font-size:34px;letter-spacing:.12em;line-height:1;margin:6px 0 12px}
.cal img{width:100%;aspect-ratio:3/4;object-fit:cover;border:0;margin-top:14px;border-radius:calc(var(--radius)/1.5)}
.cal b{display:inline-block;margin-top:14px;border:2px solid var(--on-accent);padding:8px 18px;border-radius:var(--radius);font:600 14px var(--f-head);letter-spacing:.2em;text-transform:uppercase}
.cal:hover b{background:var(--on-accent);color:var(--accent)}
section.sec{padding:clamp(48px,7vw,104px) 0;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,96px)}
h2{font-size:clamp(24px,3vw,36px);margin-bottom:20px}
.work li{padding:14px 0;border-top:1px solid var(--line)}.work li b{display:block;font:500 17px var(--f-head);letter-spacing:.16em;text-transform:uppercase}.work li span{color:var(--muted)}
.clients{display:flex;flex-wrap:wrap;gap:4px 20px;color:var(--muted);margin-top:18px;font:500 14px var(--f-head);letter-spacing:.18em;text-transform:uppercase}
form{display:grid;gap:14px}
label{font:500 13px var(--f-head);letter-spacing:.2em;text-transform:uppercase;display:block;margin-bottom:3px;color:var(--muted)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--fg);border-radius:var(--radius);background:var(--surface-2);color:var(--fg)}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:var(--radius);font:600 15px var(--f-head);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer}
.btn:hover{filter:brightness(.93)}
.form-msg{min-height:1.5em;font-weight:700;color:var(--accent-text)}
footer{border-top:1px solid var(--line);padding:24px clamp(16px,4vw,64px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:14px}

/* ===== Unterseiten (Inhalte aus design-system/pages.js) ===== */
.pg{max-width:1100px;margin:0 auto;padding:clamp(32px,5vw,72px) 0 clamp(56px,7vw,112px)}
.pg-head{text-align:center;margin-bottom:clamp(28px,4vw,56px)}
.pg-eyebrow{font:500 13px var(--f-head);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.pg h1{font-size:clamp(30px,4.4vw,56px);letter-spacing:.14em;margin:8px 0 14px;font-weight:500}
.pg-lead{max-width:56ch;margin:0 auto;color:var(--muted);font-size:19px}
.pg h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:.18em;margin-bottom:16px}
.pg-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.pg-cols-contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.pg-portrait{margin:0}.pg-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);background:var(--surface)}
.pg-prose p{margin-bottom:16px;max-width:60ch}
.pg-sign{font:500 22px var(--f-head);letter-spacing:.16em;text-transform:uppercase}
.pg-note{font-size:14px;color:var(--muted)}
.pg-todo{color:var(--accent-text)}
.pg-block{margin-top:clamp(40px,6vw,88px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.pg-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;list-style:none}
.pg-list li{border-top:1px solid var(--line);padding-top:12px}
.pg-list b{display:block;font:500 18px var(--f-head);letter-spacing:.16em;text-transform:uppercase}.pg-list span{color:var(--muted)}
.pg-list a{display:block;text-decoration:none}.pg-list a:hover b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.pg-chips{display:flex;flex-wrap:wrap;gap:10px 28px;font:500 16px var(--f-head);letter-spacing:.2em;text-transform:uppercase;list-style:none;margin-bottom:10px}
.pg-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid var(--fg);border-radius:var(--radius);font:600 14px var(--f-head);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;background:none;color:var(--fg);cursor:pointer;margin:0 8px 8px 0}
.pg-btn.y{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pg-btn:hover{filter:brightness(.93)}
.pg-meta{margin-top:14px;color:var(--muted)}
.pg-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}.pg-facts dt{color:var(--muted)}.pg-facts dd{margin:0}
.pg-inline{display:block}.pg-inline dt{display:none}.pg-inline dd{display:inline;color:var(--muted)}.pg-inline dd:not(:last-of-type)::after{content:" · "}
.pg-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pg-form{display:grid;gap:14px}.pg-form label{margin-bottom:3px}
.pg-card{border:1px solid var(--line);padding:24px;border-radius:var(--radius);background:var(--surface-2)}
.pg-card h2{font-size:20px}
.pg-addr{font-style:normal;margin-bottom:14px}
.pg-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;list-style:none;margin-top:12px}
.pg-months figure{margin:0}.pg-months img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line)}
.pg-months figcaption b{display:block;font:500 16px var(--f-head);letter-spacing:.2em;text-transform:uppercase;margin-top:8px}.pg-months figcaption span{color:var(--muted);font-size:14px}
.pg-crumb{font:500 13px var(--f-head);letter-spacing:.2em;text-transform:uppercase;text-align:center;margin-bottom:18px;color:var(--muted)}.pg-crumb a{color:inherit}
.pg-gallery{columns:3;column-gap:clamp(14px,2vw,28px);list-style:none}
.pg-gallery .g{break-inside:avoid;margin:0 0 clamp(14px,2vw,28px)}
.pg-gallery a{display:block}.pg-gallery img{width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover;display:block;background:var(--surface);border:1px solid var(--line)}
.pg-gallery a:hover img{filter:brightness(.92)}
.pg-pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(32px,5vw,72px);border-top:1px solid var(--line);padding-top:24px}
.pg-pn a{text-decoration:none;font:500 20px var(--f-head);letter-spacing:.14em;text-transform:uppercase}.pg-pn a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.pg-pn small{display:block;font-size:12px;letter-spacing:.3em;color:var(--muted)}.pg-pn a[rel=next]{text-align:right}
.pg-cta{text-align:center;margin-top:clamp(32px,5vw,64px);color:var(--muted)}
.pg-legal .pg-prose{max-width:62ch;margin:0 auto}
.sec.cta{text-align:center;border-top:1px solid var(--line)}
.sec.cta p{color:var(--muted);margin-bottom:16px}.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn.ghost{background:none;color:var(--fg);border-color:var(--fg)}
footer.foot{border-top:1px solid var(--line);padding:28px clamp(16px,4vw,64px);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:14px;line-height:1.7}
nav.menu a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
@media(max-width:1000px){.pg-gallery{columns:2}.pg-cols,.pg-cols-contact{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.pg-gallery{columns:1}.pg-row2{grid-template-columns:minmax(0,1fr)}.pg-pn{grid-template-columns:1fr}.pg-pn a[rel=next]{text-align:left}}

/* ===== Bühnen-Viewer im Mosaik-Stil ===== */
dialog.sv{--sv-ls:.16em;--sv-tt:uppercase}
.sv-pn button{font:500 15px var(--f-head);letter-spacing:.18em;text-transform:uppercase}
.sv-cta a{font:600 14px var(--f-head);letter-spacing:.18em;text-transform:uppercase}
.m{cursor:pointer}

/* Kalender-Kachel: mittig über dem Mosaik */

/* Onepage: Abschnitte unter dem Mosaik */
#projekte,.op{scroll-margin-top:84px}
.op{border-top:1px solid var(--line)}
.op .pg{padding-top:clamp(40px,6vw,88px)}