/* bei artur: Stilblatt der öffentlichen Website.
   Look der bisherigen Seite (Playfair Display, viel Weiss, Pastellflächen), sauber neu gebaut:
   mobile-first, fluid typography, feste Abstandsskala, keine Layoutsprünge (Bilder mit width/height). */

@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/playfair-display-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/playfair-display-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/playfair-display-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/nunito-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/nunito-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  --ink: #181818;
  --ink-2: #4a4a4a;
  --ink-3: #767676;
  --line: #e2e2e2;
  --line-2: #cfcfcf;
  --bg: #ffffff;
  --bg-2: #f5f5f5;
  --bg-3: #ececec;
  --accent: #181818;
  --focus: #1b6ac9;
  --ok: #2a7a3b;
  --warn: #a2531e;
  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.25rem; --s6: 3.5rem; --s7: 5rem;
  --wrap: 1160px;
  --radius: 4px;
  --pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Sprungziele (#termine usw.) nicht unter dem fixierten Kopf verstecken (Review 1.10., F06) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100dvh; display: flex; flex-direction: column;
}
.site-main { flex: 1 0 auto; --wrap: 1000px; }
img, picture, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
img[data-focus="top"] { object-position: top; } img[data-focus="bottom"] { object-position: bottom; } img[data-focus="left"] { object-position: left; } img[data-focus="right"] { object-position: right; }
a { color: inherit; text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
p { margin: 0 0 var(--s3); }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.visually-hidden, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; top: var(--s2); left: var(--s2); z-index: 100; background: var(--ink); color: #fff; padding: var(--s2) var(--s3); font-family: var(--sans); }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.kicker { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.display { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem); line-height: 1.05; margin-bottom: var(--s4); letter-spacing: -.015em; }
.display-small { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem); }
/* Lange Wörter in Titeln («Eigenveranstaltungen», «Nordwestschweiz») passen auch auf sehr schmale Handys (320 px, 11.10.2026).
   Als letzte Sicherung bricht ein noch längeres Wort um, statt die Seite seitlich scrollbar zu machen. */
h1 { overflow-wrap: break-word; }
@media (max-width: 359.98px) {
  h1 { font-size: 1.75rem; }
  h1.display { font-size: 2.2rem; }
}
.lead { font-size: clamp(1.15rem, 1.05rem + .6vw, 1.5rem); line-height: 1.5; max-width: 42rem; color: var(--ink); }
.lead-prose { font-size: clamp(1.2rem, 1.05rem + .9vw, 1.75rem); line-height: 1.5; max-width: 60rem; }
.section-title { margin-top: var(--s6); }
.credit { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); margin-top: var(--s1); }

/* ---------- Header ---------- */
.site-header { --wrap: 1300px; position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; padding-block: var(--s2); }
.brand { display: flex; align-items: center; gap: var(--s3); }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { width: auto; height: 26px; }
.logo-text { font-family: var(--serif); font-size: 1.25rem; }
/* Zeichen der sozialen Netzwerke im Kopf, nach dem Vorbild der alten Website: alle exakt gleich hoch (jedes Zeichen hat als
   viewBox genau seine Form, siehe social-items.ejs), auf der Mitte des Logos, und dicht beieinander. Die Kästchen stossen
   aneinander, der Abstand von Mitte zu Mitte ist damit die doppelte Zeichenhöhe (alte Website: 15 Pixel hoch, 30 Pixel Abstand). */
.social { display: flex; align-items: center; }
.social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); }
.social svg { display: block; flex: none; }
.social a:hover { background: var(--bg-2); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; border-radius: var(--radius); }
.nav-toggle-bars { position: relative; width: 24px; height: 18px; display: block; }
.nav-toggle-bars i { position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s, top .25s; }
.nav-toggle-bars i:nth-child(1) { top: 0; } .nav-toggle-bars i:nth-child(2) { top: 8px; } .nav-toggle-bars i:nth-child(3) { top: 16px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { top: 8px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.site-nav { font-family: var(--serif); font-size: clamp(1.2rem, .45rem + 1.3vw, 1.5625rem); color: #444; }
.nav-list { display: flex; flex-direction: column; }
.nav-list > li { position: relative; }
.nav-link { display: block; padding: .55rem .8rem; text-decoration: none; border-radius: var(--radius); }
.nav-list > li.on > .nav-link { background: var(--bg-3); }
.nav-link:hover { background: var(--bg-2); }
.sub { font-size: 1.05rem; }
.sub a { display: block; padding: .45rem .8rem; text-decoration: none; white-space: nowrap; border-radius: var(--radius); }
.sub a:hover, .sub a[aria-current] { background: var(--bg-2); }
.sub-toggle { display: none; }

/* Mobile: Vollflächiges Menü */
@media (max-width: 899.98px) {
  .site-nav { display: none; position: fixed; inset: 64px 0 0 0; background: var(--bg); overflow-y: auto; padding: var(--s3) var(--s3) var(--s6); z-index: 39; }
  body.nav-open .site-nav { display: block; }
  body.nav-open { overflow: hidden; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-link { padding: .9rem .5rem; font-size: 1.45rem; }
  .sub { padding: 0 0 var(--s2) var(--s3); }
  .sub a { padding: .6rem .5rem; font-size: 1.15rem; }
  /* Seit 20.10.2026 (Wunsch Tobias): am Handy und Tablet keine Zeichen im Kopf, sie stehen im Menü und in der Fusszeile */
  .brand { flex: 1; }
  .brand .social { display: none; }
  .site-nav .social { display: flex; margin-top: var(--s4); padding-left: var(--s1); }
}
/* Am Handy stehen die Zeichen wie auf der alten Website in der Mitte zwischen Logo und Menüknopf */
@media (max-width: 599.98px) {
  .brand .social { margin-inline: auto; }
}
/* Sehr schmale Geräte mit drei Zeichen (Facebook, Instagram und LinkedIn): Kästchen schmaler, damit alles Platz hat */
@media (max-width: 359.98px) {
  .social li:first-child:nth-last-child(n+3) a, .social li:first-child:nth-last-child(n+3) ~ li a { width: 34px; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav .social { display: none; }
  .nav-list { flex-direction: row; gap: .35rem; align-items: center; }
  .nav-list > li.has-sub:hover > .sub, .nav-list > li.has-sub:focus-within > .sub, .nav-list > li.has-sub.open > .sub { display: block; }
  .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.08); padding: .4rem; z-index: 50; }
  .sub-toggle { display: inline-flex; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; border-radius: 50%; color: var(--ink-3); }
  .sub-toggle:hover { background: var(--bg-2); }
  .nav-list > li.has-sub > .nav-link { padding-right: 1.6rem; }
}

.demo-badge { background: #fff6d6; color: #6b4a00; font-family: var(--sans); font-size: .85rem; padding: .5rem 1rem; text-align: center; border-bottom: 1px solid #f0dc9a; }

/* ---------- Startseite ---------- */
.hero { padding-top: clamp(var(--s5), 6vw, var(--s7)); padding-bottom: var(--s4); }
.hero-lead p { font-size: clamp(1.2rem, 1.05rem + .9vw, 1.75rem); line-height: 1.4; max-width: 60rem; margin-bottom: var(--s2); }
@media (max-width: 699.98px) { .hero { text-align: center; } .hero-lead p { margin-inline: auto; } }
/* Kacheln wie im Original: drei Spalten, Hochformat 301×320, Namen gross und fett; mobil eine schmale Spalte */
.tiles-section { --wrap: 1165px; padding-block: var(--s5) var(--s4); }
.tiles { display: grid; grid-template-columns: 1fr; gap: var(--s5) var(--s4); }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); } }
.tiles-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--s4) var(--s3); }
@media (min-width: 900px) { .tiles-small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s4) var(--s3); } }
.tile-link { display: block; text-decoration: none; text-align: center; }
.tile-img { display: block; aspect-ratio: 301 / 320; width: 64%; max-width: 301px; overflow: hidden; background: var(--bg-2); margin-inline: auto; }
@media (min-width: 560px) { .tile-img { width: 100%; } }
.tiles-small .tile-img { aspect-ratio: 1; width: 100%; max-width: 260px; }
.tile-img picture { display: block; width: 100%; height: 100%; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile-link:hover .tile-img img { transform: scale(1.03); }
.tile-name { display: block; margin-top: var(--s3); font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: 1.375rem; line-height: 1.3; }
.tile-link:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; }
.tile-role { display: block; font-family: var(--sans); font-size: .78rem; color: var(--ink-3); margin-top: .2rem; letter-spacing: .06em; text-transform: uppercase; }
.tiles-small .tile-name { font-size: .95rem; letter-spacing: .02em; }
.tiles-small .tile-role { text-transform: none; letter-spacing: 0; }
.events-section { padding-block: var(--s5) var(--s6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.section-head h2 { margin: 0; }
.more { font-family: var(--sans); font-size: .95rem; font-weight: 600; }
.more-line { margin-top: var(--s3); }

/* ---------- Seitenköpfe ---------- */
.page-head { padding-top: clamp(var(--s4), 5vw, var(--s6)); padding-bottom: var(--s3); }
.page-simple, .artist-page, .event-detail { padding-bottom: var(--s6); }
.page-grid { display: grid; gap: var(--s4); }
@media (min-width: 800px) { .page-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--s5); align-items: start; } }
.page-body { max-width: 46rem; }
.crumbs { font-family: var(--sans); font-size: .85rem; color: var(--ink-3); padding-top: var(--s4); }
.crumbs a { color: inherit; }

/* ---------- Fliesstext ---------- */
.prose { max-width: 46rem; }
/* .wrap.prose: Text bündig mit dem Seitenrand statt eingerückt (Box ist so breit wie die Seite, nur die Zeilen sind begrenzt) */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 46rem; }
.wrap.lead-prose > * { max-width: 60rem; }
.prose p, .prose ul, .prose ol { margin-bottom: var(--s3); }
.prose ul { list-style: disc; padding-left: 1.3rem; }
.prose ol { list-style: decimal; padding-left: 1.3rem; }
.prose h2 { margin-top: var(--s5); font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.prose h3 { margin-top: var(--s4); }
.prose blockquote { margin: var(--s4) 0; padding-left: var(--s3); border-left: 3px solid var(--line-2); font-style: italic; }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* ---------- Künstlerblöcke ---------- */
.artist-block { padding-block: var(--s5); border-top: 1px solid var(--line); }
.artist-block:first-of-type { border-top: 0; }
.artist-grid { display: grid; gap: var(--s4); }
@media (min-width: 800px) { .artist-grid { grid-template-columns: minmax(0, 313px) minmax(0, 1fr); gap: var(--s5); align-items: start; } .artist-hero { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
.artist-img { display: block; overflow: hidden; background: var(--bg-2); }
.artist-img img { width: 100%; height: auto; }
/* Künstlername wie im Original: gross, fett, Versalien («OROPAX») */
.artist-name { margin-bottom: var(--s2); font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.5rem); line-height: 1.2; }
.artist-name a { text-decoration: none; }
.artist-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.artist-show { font-weight: 700; text-transform: none; letter-spacing: 0; }
.artist-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.15; margin-bottom: var(--s3); }
.artist-lead { max-width: 46rem; }
.status-note { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); }
.artist-next { margin-top: var(--s4); }
.artist-next h3 { margin-bottom: var(--s2); font-family: var(--sans); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.show-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.show-chips a { font-family: var(--sans); font-size: .85rem; text-decoration: none; background: var(--bg-2); padding: .3rem .7rem; border-radius: var(--pill); }
.show-chips a:hover { background: var(--bg-3); }
.offers-section { padding-block: var(--s5) var(--s3); border-top: 1px solid var(--line); }
.offer { padding-block: var(--s4); }

/* Programme auf der Künstlerseite */
.shows { margin-top: var(--s5); }
.show { display: grid; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .show { grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: var(--s4); align-items: start; } }
.show-media picture { overflow: hidden; background: var(--bg-2); }
.shows .section-title { margin-top: var(--s5); }
.show-body h3 { margin-bottom: var(--s2); }
/* Programmtitel (seit 11.10.2026 h2, weil die Überschrift «Aktuelles Programm» weg ist), gleich gross wie vorher */
.show-title { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-bottom: var(--s2); }
.show-status { margin-top: calc(-1 * var(--s1)); }
.show-more { margin: var(--s2) 0 0; }
/* Pfeil hinter «mehr»-Links; nach aussen führende Links mit schrägem Pfeil */
.more::after { content: '\2192'; display: inline-block; margin-left: .35em; text-decoration: none; }
.more-ext::after { content: '\2197\FE0E'; } /* \FE0E: als Schriftzeichen, sonst zeigt das iPhone ein blaues Emoji */
.artist-events { margin-top: var(--s5); }

/* ---------- Knöpfe ---------- */
/* Wie das Original: Anfrage/Website/Tourdaten als eckige Rahmen-Knöpfe, Tickets und «Mehr laden» als runde Serifen-Knöpfe */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; cursor: pointer; border: 2px solid var(--ink); background: transparent; color: var(--ink); line-height: 1.2; transition: background .15s, color .15s, transform .15s; white-space: nowrap; }
.btn { font-family: var(--sans); font-weight: 400; font-size: 1rem; border-radius: 0; min-height: 44px; padding: .45rem 1.5rem; }
.btn:hover, .pill:hover { background: var(--ink); color: #fff; }
.btn:active, .pill:active { transform: translateY(1px); }
.btn-small { min-height: 38px; padding: .3rem 1rem; font-size: .92rem; }
.btn-ghost { border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
.pill { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; border-width: 1.5px; border-radius: var(--pill); min-height: 44px; padding: .15rem 1.15rem; }
.pill-muted { border-color: var(--line-2); color: var(--ink-3); cursor: default; font-size: 1.05rem; }
.pill-muted:hover { background: transparent; color: var(--ink-3); }
.more-line .pill, .pager-more { margin-inline: auto; }
.pager-foot { display: flex; justify-content: center; margin-top: var(--s4); }
[data-pager] .is-hidden, [data-pager] [hidden], [data-more-list] .event-row.is-hidden { display: none !important; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ---------- Terminlisten ---------- */
.tour-tools { padding-block: var(--s2) var(--s3); }
.filter-form { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: end; font-family: var(--sans); }
/* Die Auswahl gilt sofort (site.js). Den Knopf «Filtern» braucht es nur ohne JavaScript, darum überall ausgeblendet (16.10.2026, vorher nur am Handy) */
.js .filter-form button[type="submit"] { display: none; }
.field { display: flex; flex-direction: column; gap: .3rem; font-family: var(--sans); font-size: .95rem; }
.field > span { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.field select, .field input, .field textarea { font: inherit; font-size: 1rem; min-height: 46px; padding: .55rem .8rem; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); min-width: 12rem; }
.field textarea { min-height: 8rem; resize: vertical; }
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(27,106,201,.18); }
.tour-count { font-family: var(--sans); font-size: .85rem; color: var(--ink-3); margin-top: var(--s2); }
.month-box { padding-block: var(--s3) var(--s2); }
.month-label { font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: var(--s3) 0 var(--s2); position: sticky; top: 64px; background: rgba(255,255,255,.95); padding: .45rem 0; z-index: 2; }
.event-list { border-top: 1px solid var(--line); }
/* Terminzeile wie im Original: Querformat-Bild 142×80, Datum 20px, «Künstler · Ort» 28px, Tickets rechts */
.event-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.event-main { display: grid; grid-template-columns: 142px minmax(0, 1fr); grid-template-areas: "thumb when" "thumb what"; column-gap: var(--s4); row-gap: .05rem; align-items: center; text-decoration: none; min-width: 0; }
.event-thumb { grid-area: thumb; width: 142px; aspect-ratio: 142 / 80; overflow: hidden; background: var(--bg-2); align-self: center; }
.event-thumb picture { display: block; width: 100%; height: 100%; }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-thumb-empty { background: var(--bg-3); }
.event-when { grid-area: when; align-self: end; font-size: 1.25rem; line-height: 1.3; }
.event-year { display: none; }
.event-what { grid-area: what; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.event-title { font-size: 1.75rem; line-height: 1.3; overflow-wrap: anywhere; }
.event-country { font-size: .65em; color: var(--ink-3); vertical-align: .1em; }
.event-sub { font-family: var(--sans); font-size: .9rem; color: var(--ink-3); line-height: 1.35; }
.event-sub:empty { display: none; }
.event-note { font-family: var(--sans); font-size: .82rem; color: var(--warn); }
.event-action { flex: none; }
.event-row.is-canceled .event-title { text-decoration: line-through; color: var(--ink-3); }
.event-main:hover .event-title { text-decoration: underline; text-decoration-thickness: 1px; }
.compact .event-main { grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s3); }
.compact .event-thumb { width: 120px; }
.compact .event-when { font-size: 1.1rem; }
.compact .event-title { font-size: 1.4rem; }
.compact .pill { font-size: 1.15rem; min-height: 40px; }
.empty { padding: var(--s5) 0; color: var(--ink-3); font-size: 1.2rem; }
.tour-foot { padding-block: var(--s4) var(--s6); }
@media (max-width: 699.98px) {
  /* Filter mobil nebeneinander */
  .filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .filter-form .field select { min-width: 0; width: 100%; }
}
.abroad-hint { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); margin-top: var(--s4); }

@media (max-width: 699.98px) {
  .event-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .event-main, .compact .event-main { grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--s3); }
  .event-thumb, .compact .event-thumb { width: 104px; }
  .event-when, .compact .event-when { font-size: 1.02rem; }
  .event-title, .compact .event-title { font-size: 1.3rem; line-height: 1.25; }
  .event-sub { font-size: .85rem; }
  .event-action { padding-left: calc(104px + var(--s3)); }
  .event-action .pill { min-height: 40px; font-size: 1.1rem; padding-inline: 1.1rem; }
}

/* Rückblick «artur veranstaltete …» */
.archive-list .event-row { grid-template-columns: minmax(0, 1fr); }
.archive-list .event-main { cursor: default; }
.archive-list .event-title { font-size: 1.25rem; }
.archive-list .event-when { font-size: 1.1rem; }
.archive-list .event-year { display: inline; }
.archive-list a.event-main:hover .event-title { text-decoration: underline; }
.archive-list .event-main:not(a):hover .event-title { text-decoration: none; }
.past-section { padding-top: var(--s5); }
.past-section h2 { margin-bottom: var(--s4); }

/* ---------- Termindetail ---------- */
.event-detail-grid { display: grid; gap: var(--s4); margin-top: var(--s3); }
@media (min-width: 800px) { .event-detail-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--s5); align-items: start; } }
.event-detail-media picture { border-radius: 2px; overflow: hidden; background: var(--bg-2); }
.event-facts { display: grid; gap: var(--s2); margin: var(--s3) 0; font-family: var(--sans); }
.event-facts div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s2); }
.event-facts dt { color: var(--ink-3); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; padding-top: .15rem; }
.event-facts dd { margin: 0; font-size: 1.05rem; }
/* Adresse führt immer auf die Karte (Spielort auf seine Website, falls bekannt): dezent unterstrichen */
.event-address { text-decoration-color: var(--line-2); }
.event-address:hover { text-decoration-color: currentColor; }
.event-about, .event-more { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }

/* ---------- Team ---------- */
.team-grid { display: grid; gap: var(--s4); padding-bottom: var(--s4); }
@media (min-width: 800px) { .team-grid { grid-template-columns: minmax(0, 375px) minmax(0, 1fr); gap: var(--s5); align-items: start; } }
.team-media picture { overflow: hidden; }
.team-list { display: grid; gap: var(--s4); }
/* Wie das Original: grosse Schrift für Namen, Mail, Telefon und Arbeitstage */
.team-body { font-size: clamp(1.15rem, .85rem + 1vw, 1.75rem); line-height: 1.5; }
.member { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; }
.member-img { width: 72px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg-2); }
.member-img img { width: 100%; height: 100%; object-fit: cover; }
.member p { margin: 0; font-size: inherit; }
.member-role { color: var(--ink); }
.member-note { color: var(--ink); }
.team-text { margin-top: var(--s4); font-size: inherit; }
.team-text p { margin-bottom: 0; }
.contact-section { padding-block: var(--s5) var(--s6); border-top: 1px solid var(--line); }
.contact-form .form-grid { display: grid; gap: var(--s3); max-width: 46rem; }
@media (min-width: 640px) { .contact-form .form-grid { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.contact-form .field select, .contact-form .field input, .contact-form .field textarea { min-width: 0; width: 100%; }
.form-foot { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s3); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.notice { font-family: var(--sans); padding: var(--s3) var(--s3); border-radius: var(--radius); max-width: 46rem; }
.notice-ok { background: #e8f5ea; color: var(--ok); }
.notice-warn { background: #fdece2; color: var(--warn); }

/* ---------- Bausteine ---------- */
.bausteine { width: min(100% - 2rem, var(--wrap)); margin: var(--s4) auto 0; }
@media (min-width: 700px) { .bausteine { width: min(100% - 4rem, var(--wrap)); } }
.artist-page .bausteine, .page-simple .bausteine { width: auto; margin-inline: 0; }
.bs { margin-block: var(--s5); }
.bs-quote { margin: var(--s5) 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--ink); font-size: 1.25rem; font-style: italic; max-width: 46rem; }
.bs-quote cite { display: block; font-style: normal; font-family: var(--sans); font-size: .9rem; color: var(--ink-3); margin-top: var(--s2); }
.gallery-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .cols-3 .gallery-grid { grid-template-columns: repeat(3, 1fr); } .cols-2 .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.cols-1 .gallery-grid { grid-template-columns: 1fr; }
.gallery-item { margin: 0; }
.gallery-item a { display: block; overflow: hidden; border-radius: 2px; background: var(--bg-2); aspect-ratio: 4/3; }
.cols-1 .gallery-item a { aspect-ratio: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-item figcaption, .bs-caption { font-family: var(--sans); font-size: .85rem; color: var(--ink-3); margin-top: .4rem; }
.video-facade { position: relative; aspect-ratio: 16/9; background: #111; overflow: hidden; border-radius: 2px; max-width: 900px; }
.video-facade img, .video-facade picture { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-facade picture img { height: 100%; }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.video-play:hover svg { transform: scale(1.06); }
.video-play svg { transition: transform .2s; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { font-family: var(--sans); font-size: .85rem; color: var(--ink-3); margin-top: var(--s2); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 6rem); width: auto; height: auto; object-fit: contain; }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: var(--s3); text-align: center; color: #ddd; font-family: var(--sans); font-size: .9rem; padding: 0 var(--s6); }
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.6rem; cursor: pointer; }
.lightbox-btn:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: var(--s3); } .lightbox-next { right: var(--s3); }
.lightbox-close { position: absolute; top: var(--s3); right: var(--s3); width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.8rem; cursor: pointer; }

/* ---------- Buchungs-Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--s3); }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
/* Das Fenster nutzt fast die ganze Bildschirmhöhe, damit vom Formular möglichst viel zu sehen ist (vorher 420 px) */
.modal-dialog { position: relative; background: #fff; width: min(100%, 860px); height: calc(100vh - 2rem); height: min(calc(100dvh - 2rem), 1200px); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
/* Kopf und Fuss zusammengelegt (16.10.2026): Titel, Einleitung und die Zeile mit den Adressen stehen oben, eng gesetzt,
   damit das Formular in üblichen Fenstergrössen ohne Rollbalken Platz hat */
.modal-head { padding: .875rem var(--s4) 0; min-height: 44px; }
.modal-title { font-size: 1.5rem; margin: 0; padding-right: 3rem; }
.modal-lead { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); padding: .25rem var(--s4) 0; margin: 0; }
.modal-close { position: absolute; top: var(--s2); right: var(--s2); width: 44px; height: 44px; border: 0; background: var(--bg-2); border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.modal-close:hover { background: var(--bg-3); }
.modal-frame { flex: 1 1 auto; min-height: 0; display: flex; padding: .625rem var(--s4) var(--s3); }
.modal-frame iframe { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.modal-fallback { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); padding: .125rem var(--s4) 0; margin: 0; }
.modal-fallback a { white-space: nowrap; } /* E-Mail-Adressen nicht mitten im Namen umbrechen */
body.modal-offen { overflow: hidden; }
/* Handy: Kopf so hoch wie der Knopf «Schliessen», damit die Einleitung nicht unter den Knopf läuft */
@media (max-width: 600px) { .modal { padding: 0; } .modal-dialog { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } .modal-frame { padding-inline: var(--s2); } .modal-head { padding-inline: var(--s3); min-height: 56px; } .modal-lead, .modal-fallback { padding-inline: var(--s3); } }

/* ---------- Fusszeile: bewusst zurückhaltend (7.10.2026). Keine Adresse, soziale Netzwerke als kleine Zeichen ---------- */
.site-footer { --wrap: 1000px; border-top: 1px solid var(--line); margin-top: var(--s6); font-family: var(--sans); font-size: .85rem; color: var(--ink-3); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nav nav" "credit social"; align-items: center; gap: .15rem var(--s3); padding-block: var(--s3); }
.footer-inner.mit-text { grid-template-areas: "nav nav" "text text" "credit social"; }
.footer-nav { grid-area: nav; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.footer-nav a { display: inline-block; padding-block: .4rem; text-decoration: none; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }
/* Zeichen in der Fusszeile: alle 12 Pixel hoch (siehe social-items.ejs), rechts bündig mit dem Inhalt. Jedes Kästchen ist
   gleich gebaut wie ein Link daneben (gleiche Schrift, gleiche Zeilenhöhe, gleicher Abstand oben und unten), und das Zeichen
   steht darin wie ein Buchstabe auf der Grundlinie, 1 Pixel tiefer gesetzt. So liegt seine Mitte genau auf der Mitte der
   Grossbuchstaben, auf jeder Seite und in jeder Breite gleich. Als frei eingemittetes Kästchen schwankte die Lage je nach
   Seite um einen Pixel. */
.footer-social { grid-area: social; display: flex; margin-right: -8px; }
.footer-social a { display: block; width: 28px; padding-block: .4rem; text-align: center; color: var(--ink-3); transition: color .2s; }
.footer-social svg { display: inline-block; vertical-align: baseline; position: relative; top: 1px; }
.footer-social a:hover { color: var(--ink); }
.footer-text { grid-area: text; margin: 0; padding-block: .2rem; }
.footer-credit { grid-area: credit; margin: 0; }
/* Am Handy und Tablet sind die Zeichen in der Fusszeile grösser (20 statt 12 Pixel) und gut antippbar (44 Pixel) */
@media (max-width: 799.98px) {
  .footer-social { margin-right: -12px; }
  .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
  .footer-social svg { height: 20px; width: auto; top: 0; }
}
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "credit nav social"; gap: .15rem var(--s4); }
  .footer-inner.mit-text { grid-template-areas: "credit nav social" "text text text"; }
  .footer-nav ul { justify-content: flex-end; }
}

/* ---------- Design-Varianten (Einstellung «Gestaltung») ---------- */
[data-design="ruhig"] { --wrap: 1040px; }
[data-design="ruhig"] .display { font-size: clamp(2.4rem, 1.7rem + 3.5vw, 4.2rem); }
[data-design="ruhig"] .tile-name { text-transform: none; letter-spacing: 0; font-size: 1.2rem; }
[data-design="bildstark"] .tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
[data-design="bildstark"] .artist-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
[data-design="bildstark"] .event-thumb { width: 120px; }
@media (max-width: 799.98px) { [data-design="bildstark"] .artist-grid { grid-template-columns: 1fr; } }

@media print {
  .site-header, .site-footer, .nav-toggle, .cta-row, .modal, .demo-badge, .tour-tools { display: none !important; }
  body { font-size: 11pt; }
  a { text-decoration: none; }
}

/* Regionsseiten */
.region-artists { padding-block: var(--s3) var(--s4); }
.region-artists .tile-img { max-width: 220px; }
.tile-link.is-active .tile-img { outline: 3px solid var(--ink); outline-offset: 4px; }
.tile-link.is-active .tile-name { text-decoration: underline; }
.region-others { padding-block: var(--s4) 0; }

/* Anfrage an die Agentur (OpTune-Formular) */
.agency-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block: var(--s6); padding: var(--s4); background: var(--bg-2); border-radius: var(--radius); }
.agency-cta p { margin: 0; max-width: 44rem; font-size: 1.1rem; }
/* Regionsseite: Künstler kompakt, damit Besucher vom QR-Code auf dem Handy schnell bei den Terminen sind */
.region-artists .tiles-small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.region-artists .tile-name { font-size: .72rem; letter-spacing: .02em; margin-top: var(--s1); overflow-wrap: anywhere; }
.region-artists .tile-role { font-size: .72rem; }
@media (min-width: 700px) {
  .region-artists .tiles-small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s4) var(--s3); }
  .region-artists .tile-name { font-size: .9rem; }
  .region-artists .tile-role { font-size: .8rem; }
}

/* ---------- Finishing: kleine Effekte (Einstellung «Effekte», mit einem Häkchen abschaltbar) ----------
   Nur mit Maus (hover) und nur, wenn Besucher Bewegung nicht abgestellt haben. Ohne JavaScript bleibt alles sichtbar. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Kacheln: Bild zoomt sanft, der Name bekommt eine Linie */
  [data-fx="1"] .tile-img img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  [data-fx="1"] .tile-link:hover .tile-img img { transform: scale(1.06); }
  [data-fx="1"] .tile-name { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .3s; }
  [data-fx="1"] .tile-link:hover .tile-name { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  /* Terminzeilen: Bild zoomt, Text rückt eine Spur nach rechts */
  [data-fx="1"] .event-thumb img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  [data-fx="1"] a.event-main:hover .event-thumb img { transform: scale(1.07); }
  [data-fx="1"] a.event-main .event-when, [data-fx="1"] a.event-main .event-what { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  [data-fx="1"] a.event-main:hover .event-when, [data-fx="1"] a.event-main:hover .event-what { transform: translateX(5px); }
  /* Bilder mit Link (Management, Booking, Veranstalten) */
  [data-fx="1"] a.artist-img img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
  [data-fx="1"] a.artist-img:hover img { transform: scale(1.04); }
  /* Pfeile und Symbole */
  [data-fx="1"] .more::after { transition: transform .25s ease; }
  [data-fx="1"] .more:hover::after { transform: translateX(4px); }
  [data-fx="1"] .more-ext:hover::after { transform: translate(3px, -3px); }
  [data-fx="1"] .social a { transition: transform .2s ease, background-color .2s; }
  [data-fx="1"] .social a:hover { transform: scale(1.12); }
  [data-fx="1"] .show-chips a { transition: background-color .2s, transform .2s; }
  [data-fx="1"] .show-chips a:hover { transform: translateY(-1px); }
}
/* Menü am Computer (ab 900 px, nicht im aufgeklappten Menü): Linie, die von links wächst */
@media (hover: hover) and (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  [data-fx="1"] .nav-link { position: relative; }
  [data-fx="1"] .nav-link::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .4rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; }
  [data-fx="1"] .nav-list > li.has-sub > .nav-link::after { right: 1.6rem; }
  [data-fx="1"] .nav-link:hover::after { transform: scaleX(1); }
}
/* Sanftes Einblenden beim Scrollen: Das Skript markiert nur, was beim Laden unterhalb des Bildschirms liegt */
@media (prefers-reduced-motion: no-preference) {
  [data-fx="1"].js .fx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--fx-delay, 0ms); }
  [data-fx="1"].js .fx-reveal.fx-in { opacity: 1; transform: none; }
}
@media print { .fx-reveal { opacity: 1 !important; transform: none !important; } }