/* SUGARRAY GROUP – dunkel, warm, Leder & Bernsteinlicht */
:root {
  --bg: #150e0a;          /* Espresso, fast Schwarz */
  --surface: #1f150f;     /* dunkles Sepia */
  --leather: #2b1d16;     /* Lederbraun */
  --wine: #6e1f29;        /* Weinrot */
  --wine-glow: #9a2f38;
  --amber: #d08a45;       /* Bernstein / indirektes Licht */
  --text: #ecdfcf;        /* warmes Pergament */
  --muted: #9f8c7b;
  --line: rgba(236, 223, 207, .07);
  --serif: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(18px, 3.4vw, 52px);
  --header: 78px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y mandatory; }
html, body { overflow-x: clip; }
body { background: var(--bg); color: var(--text); font: 300 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
.eyebrow { font: 400 10.5px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ---------- Kopf ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 50; height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); transition: background .5s, border-color .5s; border-bottom: 1px solid transparent; }

.site-header nav a { font: 400 10.5px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text); opacity: .8; transition: opacity .3s, color .3s; }
.site-header nav a:hover { opacity: 1; color: var(--amber); }
.nav-r { justify-self: end; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 1; opacity: 0; transform: translateY(-6px); transition: opacity .6s, transform .6s; }
.site-header .logo { visibility: hidden; }
.logo-word { font: 500 21px var(--serif); letter-spacing: .34em; margin-right: -.34em; }
.logo-sub { margin-top: 5px; font: 400 8.5px var(--mono); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--amber); }

/* ---------- Hero ---------- */
.hero { scroll-snap-align: start; scroll-snap-stop: always; position: sticky; top: 0; z-index: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture img { object-fit: cover; animation: hero-in 2.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-in { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 50%, rgba(20, 14, 10,.12), rgba(20, 14, 10,.58) 80%),
  linear-gradient(180deg, rgba(20, 14, 10,.55) 0%, rgba(20, 14, 10,0) 30%, rgba(20, 14, 10,0) 60%, var(--bg) 100%); }
.hero-in { position: relative; align-self: flex-start; padding-top: clamp(110px, 16vh, 170px); }
.hero-mark { font: 400 clamp(22px, 2.3vw, 34px)/1 var(--serif); letter-spacing: .62em; margin-right: -.62em; animation: mark-in 2.4s .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes mark-in { from { letter-spacing: 1em; opacity: 0; filter: blur(5px); } to { letter-spacing: .62em; opacity: 1; filter: none; } }
.hero-rule { display: block; width: 36px; height: 1px; margin: 22px auto 14px; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: fade 1.6s 1s both; }
.hero-group { font: 400 9.5px var(--mono); letter-spacing: .6em; margin-right: -.6em; text-transform: uppercase; color: var(--amber); animation: fade 1.6s 1.1s both; }
.hero-sub { position: absolute; left: 0; right: 0; bottom: 112px; margin: 0; font: 400 11px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--text); opacity: .85; animation: fade 1.6s 1.2s both; }
.hero-sub i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); vertical-align: middle; margin: 0 1em; box-shadow: 0 0 12px var(--amber); }
@keyframes fade { from { opacity: 0; } }
.hero-down { position: absolute; bottom: 34px; left: 50%; width: 1px; height: 56px; background: linear-gradient(var(--amber), transparent); transform: translateX(-50%); animation: fade 1.6s 1.8s both; }

/* ---------- Index ---------- */
.index { scroll-snap-align: start; scroll-snap-stop: always; position: sticky; top: 0; z-index: 1; min-height: 100svh; align-content: center; background: var(--bg); box-shadow: 0 -40px 80px rgba(0,0,0,.55); padding: clamp(90px, 12vw, 170px) var(--gut) clamp(70px, 9vw, 130px); display: grid; grid-template-columns: 1fr 2fr; gap: 40px clamp(30px, 6vw, 100px); max-width: 1500px; margin: 0 auto; }
.index-head { display: flex; flex-direction: column; justify-content: space-between; }
.count { font: 400 clamp(80px, 11vw, 170px)/.85 var(--serif); color: var(--wine-glow); opacity: .9; }
.index-list { }
.index-list a { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 14px; padding: 13px 0; transition: padding .4s, color .3s; }
.index-list .n { font: 400 10.5px var(--mono); color: var(--muted); letter-spacing: .12em; }
.index-list .t { font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--serif); }
.index-list .c { font: 400 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.index-list a:hover { padding-left: 10px; color: var(--amber); }
.index-list a:hover .n { color: var(--amber); }
@media (max-width: 860px) { .index { grid-template-columns: 1fr; } .index-head { flex-direction: row; align-items: flex-end; } }

/* ---------- Venues ---------- */
.venues { position: relative; }
.venue { display: grid; grid-template-columns: 1.65fr 1fr; background: var(--surface); position: sticky; top: 0; height: 100svh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; box-shadow: 0 -40px 80px rgba(0,0,0,.55); }
.venue.flip { grid-template-columns: 1fr 1.65fr; }
.venue.flip .venue-img { order: 2; }
.venue-img { overflow: hidden; position: relative; background: var(--leather); }
.venue-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1s; filter: saturate(.92) brightness(.92); }
.venue:hover .venue-img img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.venue-info { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(40px, 5vw, 80px) clamp(30px, 4vw, 70px); background:
  radial-gradient(120% 90% at 0% 100%, rgba(10, 6, 4, .55), transparent 65%), var(--surface); }
.venue.flip .venue-info { background: radial-gradient(120% 90% at 100% 100%, rgba(10, 6, 4, .55), transparent 65%), var(--surface); }
.venue-info::after { content: ""; position: absolute; left: clamp(30px, 4vw, 70px); right: clamp(30px, 4vw, 70px); bottom: 0; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.venue:hover .venue-info::after { transform: scaleX(1); }
.venue-no { position: absolute; top: clamp(24px, 3vw, 44px); right: clamp(24px, 3vw, 44px); font: 400 10.5px var(--mono); letter-spacing: .18em; color: var(--muted); }
.venue-name { line-height: 0; }
.venue-logo { width: auto; opacity: .95; }
.venue-logo.wide { height: clamp(36px, 3.8vw, 62px); max-width: 100%; object-fit: contain; object-position: left; }
.venue-logo.mid  { height: clamp(64px, 6vw, 100px); }
.venue-logo.tall { height: clamp(100px, 9.6vw, 156px); }
.venue-meta { display: flex; gap: 34px; margin: clamp(34px, 3.6vw, 54px) 0 18px; padding-top: 18px; border-top: 1px solid var(--line); width: 100%; }
.venue-meta dt { font: 400 9.5px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.venue-meta dd { margin-top: 4px; font-size: 15px; }
.venue address { font-style: normal; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 30em; }
.venue .venue-info > * { opacity: 0; transform: translateY(18px); transition: opacity .9s .25s, transform .9s .25s cubic-bezier(.2,.7,.2,1); }
.venue .venue-info > .venue-meta { transition-delay: .4s; } .venue .venue-info > address { transition-delay: .5s; }
.venue.is-active .venue-info > * { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .venue, .venue.flip { grid-template-columns: 1fr; grid-template-rows: 56% 44%; }
  .venue.flip .venue-img { order: 0; }
  .venue-info, .venue:not(.flip) .venue-info { padding: 28px var(--gut) 34px; justify-content: flex-start; }
  .venue-no, .venue:not(.flip) .venue-no { top: 24px; right: var(--gut); }
  .venue-meta { margin-top: 22px; }
}

/* ---------- Fuß ---------- */
.site-footer { scroll-snap-align: end; position: relative; z-index: 30; border-top: 1px solid var(--line); padding: clamp(70px, 9vw, 130px) var(--gut) 50px; text-align: center; background: linear-gradient(180deg, var(--bg), #0f0906); }
.foot-mark { font: 400 clamp(18px, 1.8vw, 24px)/1 var(--serif); letter-spacing: .62em; margin-right: -.62em; display: flex; flex-direction: column; align-items: center; }
.foot-mark span { margin-top: 12px; font: 400 10px var(--mono); letter-spacing: .6em; margin-right: -.6em; text-transform: uppercase; color: var(--amber); }
.foot-cols { display: flex; justify-content: center; gap: clamp(30px, 7vw, 110px); margin-top: clamp(50px, 6vw, 80px); flex-wrap: wrap; font-size: 14px; }
.foot-cols p { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Einblenden ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .hero picture img, .hero-mark { animation: none; } }
@media (max-width: 560px) {
  .hero-mark { font-size: 20px; letter-spacing: .5em; margin-right: -.5em; }
  .hero-sub { font-size: 9.5px; letter-spacing: .22em; }
  .hero-sub i { margin: 0 .6em; }
  .logo-word { font-size: 17px; }
  .index-list .c { display: none; }
  .index-list a { grid-template-columns: 38px 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } .venue .venue-info > * { opacity: 1; transform: none; } }

/* Liste als eigenes Blatt: volle Breite, damit der Hero komplett verdeckt wird */
.index { max-width: none; padding-left: max(var(--gut), calc((100vw - 1500px) / 2 + var(--gut))); padding-right: max(var(--gut), calc((100vw - 1500px) / 2 + var(--gut))); padding-top: clamp(70px, 9vh, 120px); padding-bottom: clamp(70px, 9vh, 120px); }
@media (max-width: 900px), (max-height: 700px) { .index { position: relative; } }

/* ---------- Grotesk statt Serife: Montserrat in Versalien, fein gesperrt ---------- */
.logo-word { font: 500 14px var(--serif); letter-spacing: .5em; margin-right: -.5em; }
.hero-mark { font: 500 clamp(17px, 1.6vw, 24px)/1 var(--serif); letter-spacing: .72em; margin-right: -.72em; }
@keyframes mark-in { from { letter-spacing: 1.1em; opacity: 0; filter: blur(5px); } to { letter-spacing: .72em; opacity: 1; filter: none; } }
.hero-sub, .hero-group, .eyebrow, .site-header nav a, .index-list .n, .index-list .c, .venue-no, .venue-meta dt { font-family: var(--sans); font-weight: 400; }
.count { font: 300 clamp(70px, 9vw, 140px)/.85 var(--serif); letter-spacing: -.02em; }
.index-list .t { font: 400 clamp(13px, 1.15vw, 16px)/1.3 var(--serif); letter-spacing: .3em; text-transform: uppercase; }
.index-list a { padding: 15px 0; }
.venue-meta dd { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.venue address { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.9; }
.foot-mark { font: 500 clamp(14px, 1.3vw, 18px)/1 var(--serif); letter-spacing: .72em; margin-right: -.72em; }
.foot-cols { text-transform: uppercase; font-size: 11px; letter-spacing: .16em; }
@media (max-width: 560px) { .hero-mark { font-size: 15px; letter-spacing: .5em; margin-right: -.5em; } .logo-word { font-size: 12px; } }

/* ---------- Ohne Deko-Linien und Leuchtpunkte: nur Typografie und Raum ---------- */
.hero-group { margin-top: 16px; color: var(--muted); }
.hero-sub { display: flex; justify-content: center; gap: 3.2em; }
.venue-info::after { display: none; }
.venue-meta { border-top: 0; padding-top: 0; }
.site-footer { border-top: 0; }

/* =========================================================
   Mehr Braun, mehr Raum, mehr Kontrast in der Typografie
   ========================================================= */
/* Hero: Bild gerahmt im Braun */
.hero { background: var(--bg); }
.hero picture { inset: clamp(80px, 13vh, 130px) clamp(24px, 9vw, 170px) clamp(90px, 15vh, 150px); width: auto; height: auto; }
.hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade { background: linear-gradient(180deg, var(--bg) 0%, rgba(20, 14, 10,0) 24%, rgba(20, 14, 10,0) 76%, var(--bg) 100%); opacity: .55; }
.hero-in { padding-top: clamp(26px, 5vh, 50px); }
.hero-mark { font: 700 clamp(18px, 1.9vw, 28px)/1 var(--serif); letter-spacing: .6em; margin-right: -.6em; }
@keyframes mark-in { from { letter-spacing: 1em; opacity: 0; filter: blur(5px); } to { letter-spacing: .6em; opacity: 1; filter: none; } }
.hero-group { font-size: 9px; letter-spacing: .7em; margin-right: -.7em; margin-top: 12px; }
.hero-sub { bottom: clamp(40px, 6vh, 60px); font-size: 9.5px; color: var(--muted); }

/* Liste: kräftige Namen, winzige Nebeninfos, große fette Zahl */
.count { font: 700 clamp(90px, 12vw, 190px)/.8 var(--serif); letter-spacing: -.04em; color: var(--text); }
.index-head .eyebrow { font-size: 9.5px; }
.index-list .t { font: 600 clamp(17px, 1.7vw, 25px)/1.25 var(--serif); letter-spacing: .12em; }
.index-list .n, .index-list .c { font-size: 9px; }
.index-list a { padding: 12px 0; }

/* Venue-Blätter: Bild gerahmt im Braun, großes fettes Jahr */
.venue { background: var(--bg); grid-template-columns: 1.4fr 1fr; }
.venue.flip { grid-template-columns: 1fr 1.4fr; }
.venue-img { margin: clamp(60px, 11vh, 120px) 0 clamp(60px, 11vh, 120px) clamp(24px, 6vw, 110px); background: var(--surface); }
.venue.flip .venue-img { margin: clamp(60px, 11vh, 120px) clamp(24px, 6vw, 110px) clamp(60px, 11vh, 120px) 0; }
.venue-info, .venue.flip .venue-info { background: var(--bg); padding: clamp(40px, 6vw, 110px); }
.venue-year { font: 700 clamp(64px, 8.4vw, 140px)/.82 var(--serif); letter-spacing: -.03em; color: var(--text); margin-bottom: clamp(30px, 4vh, 54px); }
.venue-logo.wide { height: clamp(24px, 2.4vw, 38px); }
.venue-logo.mid  { height: clamp(44px, 4vw, 66px); }
.venue-logo.tall { height: clamp(70px, 6.4vw, 104px); }
.venue-meta { margin-top: clamp(28px, 3.4vh, 44px); gap: 40px; }
.venue-meta dd { font-size: 11px; }
.venue address { font-size: 9.5px; max-width: 34em; }
.venue-no { font-size: 9px; }

/* Fuß: fette kleine Wortmarke */
.foot-mark { font-weight: 700; }

@media (max-width: 900px) {
  .venue, .venue.flip { grid-template-columns: 1fr; grid-template-rows: 50% 50%; }
  .venue-img, .venue.flip .venue-img { margin: 70px var(--gut) 0; }
  .venue-info, .venue.flip .venue-info { padding: 30px var(--gut) 40px; }
  .venue-year { font-size: 64px; margin-bottom: 22px; }
  .hero picture { inset: 120px var(--gut) 120px; }
}
/* NOIR-Foto hat eigene schwarze Ränder – im Rahmen wegzoomen */
.hero picture { overflow: hidden; }
.hero picture img { transform: scale(1.3); transform-origin: 50% 46%; animation: none; }
.venue-logo.wide { height: clamp(28px, 2.8vw, 44px); }
.venue-logo.mid  { height: clamp(54px, 5vw, 80px); }
.venue-logo.tall { height: clamp(84px, 7.6vw, 124px); }

/* Hero wieder randlos oben/seitlich – nur unten brauner Raum */
.hero picture { inset: 0 0 clamp(90px, 15vh, 150px) 0; }
.hero-shade { opacity: 1; background: linear-gradient(180deg, rgba(20, 14, 10,.55) 0%, rgba(20, 14, 10,0) 28%, rgba(20, 14, 10,0) 70%, var(--bg) 100%); }
/* Bar-Seiten: Logo groß und führend, Jahr klein darunter */
.venue-logo.wide { height: clamp(44px, 4.6vw, 74px); }
.venue-logo.mid  { height: clamp(90px, 8.4vw, 140px); }
.venue-logo.tall { height: clamp(140px, 13vw, 210px); }
.venue-logo { max-width: 100%; object-fit: contain; object-position: left; }
.venue-year { font: 700 clamp(22px, 2vw, 30px)/1 var(--serif); letter-spacing: .08em; margin: clamp(30px, 4vh, 50px) 0 0; }
.venue-meta { margin-top: clamp(18px, 2.4vh, 28px); }
@media (max-width: 900px) { .venue-year { font-size: 24px; margin-top: 22px; } .venue-logo.tall { height: 110px; } .venue-logo.mid { height: 76px; } }

/* Blättern übernimmt jetzt main.js (ein Wisch = eine ganze Seite) – kein CSS-Einrasten mehr */
html { scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* ---------- Footer als letztes Blatt: Inhalte an die Ränder, viel Raum ---------- */
.site-footer { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; text-align: left; background: var(--bg); padding: clamp(60px, 9vh, 110px) var(--gut) clamp(40px, 6vh, 64px); box-shadow: 0 -40px 80px rgba(0,0,0,.55); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.foot-mark { align-items: flex-start; margin: 0; font: 700 clamp(15px, 1.4vw, 20px)/1 var(--serif); letter-spacing: .6em; }
.foot-mark span { margin: 14px 0 0; color: var(--muted); }
.foot-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.foot-nav a { color: var(--muted); transition: color .3s; }
.foot-nav a:hover { color: var(--text); }
.foot-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.foot-bottom p { display: flex; flex-direction: column; gap: 8px; }
.foot-bottom .foot-copy { align-items: flex-end; text-align: right; }
.foot-bottom p:nth-child(2) { align-items: center; text-align: center; }
@media (max-width: 700px) {
  .foot-top { flex-direction: column; }
  .foot-nav { align-items: flex-start; }
  .foot-bottom { grid-template-columns: 1fr; gap: 26px; }
  .foot-bottom p, .foot-bottom p:nth-child(2), .foot-bottom .foot-copy { align-items: flex-start; text-align: left; }
}
@media (max-width: 700px) {
  .hero-in { padding-top: 104px; }
  .site-header nav a { font-size: 9.5px; letter-spacing: .24em; }
}
/* Footer wieder normale Höhe (kein ganzes Blatt) – Inhalte bleiben an den Rändern */
.site-footer { min-height: 0; justify-content: flex-start; gap: clamp(60px, 8vw, 110px); padding: clamp(70px, 9vw, 130px) var(--gut) 50px; }

/* Footer: eine schmale Zeile, Inhalte an den Rändern */
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; min-height: 0; padding: clamp(34px, 4vw, 52px) var(--gut); }
.site-footer .foot-mark { display: block; margin: 0; font: 700 12px/1 var(--serif); letter-spacing: .5em; }
.site-footer .foot-mark span { display: inline; margin: 0 0 0 .6em; font: 400 9px var(--sans); letter-spacing: .5em; color: var(--muted); text-transform: uppercase; }
.site-footer .foot-nav { flex-direction: row; gap: clamp(26px, 3vw, 48px); font-size: 9.5px; }
.site-footer .foot-copy { justify-self: end; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) {
  .site-footer { grid-template-columns: 1fr; justify-items: start; gap: 18px; padding: 36px var(--gut) 40px; }
  .site-footer .foot-copy { justify-self: start; }
}

/* ---------- Edlere Logo-Animation: Buchstaben steigen gestaffelt aus einer Kante auf ---------- */
.hero picture img { animation: hero-fade 2.2s cubic-bezier(.4,0,.2,1) both; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-mark { animation: none; display: inline-flex; overflow: hidden; padding: .12em 0 .16em; filter: none; }
.hero-mark .ch { display: inline-block; transform: translateY(110%); opacity: 0; animation: ch-rise 1.6s cubic-bezier(.19,1,.22,1) forwards; animation-delay: calc(.7s + var(--i) * .085s); }
@keyframes ch-rise { to { transform: none; opacity: 1; } }
.hero-group { animation: soft-in 1.8s cubic-bezier(.4,0,.2,1) 1.9s both; }
.hero-sub { animation: soft-in 1.8s cubic-bezier(.4,0,.2,1) 2.3s both; }
@keyframes soft-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-mark .ch, .hero-group, .hero-sub, .hero picture img { animation: none; opacity: 1; transform: none; } }

/* ---------- Kleiner „Nach oben“-Knopf ---------- */
.to-top { position: fixed; right: clamp(16px, 2.4vw, 36px); bottom: clamp(18px, 3vh, 34px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px; background: none; border: 0; color: var(--muted); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .6s, visibility .6s, transform .6s cubic-bezier(.2,.7,.2,1), color .3s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 10px; height: 14px; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.to-top span { font: 400 8.5px var(--sans); letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; }
.to-top:hover { color: var(--text); }
.to-top:hover svg { transform: translateY(-3px); }

/* Große Zahl: Jahr – „Since 2017“, beim Hover das Jahr der jeweiligen Bar */
.count-wrap { display: flex; flex-direction: column; gap: 14px; }
.count-label { transition: opacity .4s; }
.count { transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1); }
.count.is-swap { opacity: 0; transform: translateY(10px); }

/* =========================================================
   NEUER EINSTIEG: senkrechte Wortmarke + 12 Venue-Pads, viel Raum, Ivory-Schrift
   ========================================================= */
:root { --text: #efe7d6; --ivory: #efe7d6; }
.hero { display: grid; grid-template-columns: auto 1fr; align-items: center; justify-content: stretch; text-align: left; padding: 0 clamp(28px, 5vw, 90px); background: var(--bg); }
.hero-mark { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: .9em; padding: 0; margin: 0; overflow: visible; font: 700 clamp(20px, 2.2vw, 32px)/1 var(--serif); letter-spacing: .42em; color: var(--ivory); animation: soft-in 1.6s cubic-bezier(.4,0,.2,1) .2s both; }
.hero-mark b { font-weight: 700; }
.hero-mark span { font: 400 clamp(10px, .8vw, 12px) var(--sans); letter-spacing: .6em; color: var(--muted); }

/* Pads: sechs mal zwei, klein und mit viel Luft */
.pads { justify-self: center; display: grid; grid-template-columns: repeat(6, var(--pad)); gap: calc(var(--pad) * .14); --pad: clamp(92px, 8.6vw, 150px); }
.pad { position: relative; width: var(--pad); aspect-ratio: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  opacity: 0; transform: translateY(10px); animation: pad-in 1.1s cubic-bezier(.19,1,.22,1) forwards; animation-delay: calc(.5s + var(--i) * .055s);
  transition: box-shadow .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
@keyframes pad-in { to { opacity: 1; transform: none; } }
.pad-img { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); filter: brightness(.55) saturate(1.05); transition: opacity .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pad-logo { width: auto; max-width: 64%; opacity: .78; transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.pad-logo.wide { height: calc(var(--pad) * .12); }
.pad-logo.mid { height: calc(var(--pad) * .24); }
.pad-logo.tall { height: calc(var(--pad) * .4); }
.pad-no, .pad-yr { position: absolute; font: 400 8.5px var(--sans); letter-spacing: .2em; color: var(--muted); transition: color .4s; }
.pad-no { top: 9px; left: 10px; }
.pad-yr { bottom: 9px; right: 10px; }
.pad:hover, .pad:focus-visible { box-shadow: inset 0 0 0 1px rgba(208,138,69,.45), 0 0 26px rgba(208,138,69,.12); outline: none; }
.pad:hover .pad-img, .pad:focus-visible .pad-img { opacity: 1; transform: none; }
.pad:hover .pad-logo, .pad:focus-visible .pad-logo { opacity: 1; transform: scale(1.04); }
.pad:hover .pad-no, .pad:hover .pad-yr { color: var(--ivory); }
.pad:active { transform: scale(.97); }

.hero-sub { position: absolute; left: auto; right: clamp(28px, 5vw, 90px); bottom: clamp(28px, 5vh, 50px); justify-content: flex-end; gap: 2.6em; font-size: 9px; color: var(--muted); }

@media (max-width: 1100px) { .pads { grid-template-columns: repeat(4, var(--pad)); --pad: clamp(84px, 13vw, 140px); } }
@media (max-width: 700px) {
  .hero { position: relative; height: auto; min-height: 100svh; grid-template-columns: 1fr; align-content: center; padding: 70px var(--gut) 80px; gap: 40px; }
  .hero-mark { writing-mode: horizontal-tb; transform: none; font-size: 18px; letter-spacing: .4em; gap: .8em; }
  .pads { justify-self: stretch; grid-template-columns: repeat(3, 1fr); --pad: auto; gap: 10px; }
  .pad { width: auto; }
  .pad-logo.wide { height: 14px; } .pad-logo.mid { height: 26px; } .pad-logo.tall { height: 44px; }
  .hero-sub { position: static; justify-content: flex-start; flex-wrap: wrap; gap: 1.6em; }
}

/* ---------- Pads als Milchglas: im Ruhezustand milchig-weiß, beim Hover klar mit Logo ---------- */
.pad { background: #d9d0c2; }
.pad-img { opacity: 1; transform: scale(1.25); filter: blur(16px) saturate(.5) brightness(1.15); transition: filter .8s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .7s; }
.pad::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(239, 231, 214, .62); transition: background .7s cubic-bezier(.2,.7,.2,1); }
.pad-logo { opacity: 0; transform: translateY(6px) scale(.98); }
.pad-no, .pad-yr { color: rgba(43, 29, 22, .55); }
.pad:hover .pad-img, .pad:focus-visible .pad-img { filter: blur(0) saturate(1.05) brightness(.62); transform: none; }
.pad:hover::after, .pad:focus-visible::after { background: rgba(20, 14, 10, .28); }
.pad:hover .pad-logo, .pad:focus-visible .pad-logo { opacity: 1; transform: none; }
.pad:hover .pad-no, .pad:hover .pad-yr, .pad:focus-visible .pad-no, .pad:focus-visible .pad-yr { color: var(--ivory); }
.pad:hover, .pad:focus-visible { box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: translateY(-3px); }
@media (hover: none) { .pad-logo { opacity: 1; transform: none; } .pad::after { background: rgba(20, 14, 10,.35); } .pad-img { filter: blur(0) brightness(.6); transform: none; } .pad-no, .pad-yr { color: var(--ivory); } }
/* Wortmarke von oben nach unten lesbar (180° gedreht gegenüber vorher) */
@media (min-width: 701px) { .hero-mark { transform: rotate(180deg); } }   /* S unten, liest sich von unten nach oben (Kopf nach links neigen) – so gewünscht */

/* ---------- Liste: leicht, fein, viel Raum (kein großes Jahr mehr) ---------- */
.index { grid-template-columns: 1fr minmax(0, 620px) 1fr; align-content: center; }
.index-head { grid-column: 1; align-self: start; }
.index-list { grid-column: 2; }
.index-list a { grid-template-columns: 40px 1fr auto; padding: 11px 0; }
.index-list .t { font: 400 clamp(12px, .95vw, 14px)/1.4 var(--serif); letter-spacing: .26em; color: var(--ivory); }
.index-list .n, .index-list .c { font-size: 8.5px; color: var(--muted); }
.index-list a:hover .t { color: var(--amber); }
@media (max-width: 900px) { .index { grid-template-columns: 1fr; } .index-head, .index-list { grid-column: 1; } }

/* Unterzeile früher einblenden; oben rechts: Uhrzeit Bangkok */
.hero-sub { animation: soft-in 1.4s cubic-bezier(.4,0,.2,1) .6s both; }
.hero-time { position: absolute; top: clamp(28px, 5vh, 50px); right: clamp(28px, 5vw, 90px); display: flex; gap: 1.6em; margin: 0; font: 400 9px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); animation: soft-in 1.4s cubic-bezier(.4,0,.2,1) .6s both; }
.hero-time time { color: var(--ivory); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .hero-time { top: 24px; right: var(--gut); } }
/* Inhalte der Bar-Seiten immer sichtbar (nicht mehr vom „aktiven“ Zustand abhängig) */
.venue .venue-info > * { opacity: 1 !important; transform: none !important; }
/* Bar-Seiten: Logos und Jahr etwas kleiner */
.venue-logo.wide { height: clamp(30px, 3.1vw, 50px); }
.venue-logo.mid  { height: clamp(62px, 5.8vw, 96px); }
.venue-logo.tall { height: clamp(96px, 9vw, 146px); }
.venue-year { font-size: clamp(16px, 1.4vw, 21px); letter-spacing: .12em; }
@media (max-width: 900px) { .venue-year { font-size: 17px; } .venue-logo.tall { height: 84px; } .venue-logo.mid { height: 56px; } .venue-logo.wide { height: 26px; } }
/* Wortmarke: nur Deckkraft animieren – die Drehung darf nicht von der Animation überschrieben werden */
.hero-mark { animation: mark-fade 1.6s cubic-bezier(.4,0,.2,1) .2s both; }
@keyframes mark-fade { from { opacity: 0; } to { opacity: 1; } }
/* Startseite einen Hauch heller: wirkt neben den hellen Pads sonst dunkler als der Rest */
.hero { background: #17100c; }

/* ---------- Liste: rechts bündig, links Vorschau-Foto beim Hover ---------- */
.index { grid-template-columns: 1.15fr minmax(0, 560px); column-gap: clamp(60px, 9vw, 180px); padding-left: clamp(28px, 5vw, 90px); padding-right: clamp(28px, 5vw, 90px); max-width: none; align-content: center; }
.index-head { grid-column: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.index-list { grid-column: 2; align-self: center; }
.index-list a { padding: 14px 0; }
.preview { width: min(100%, 520px); aspect-ratio: 4 / 3; overflow: hidden; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.preview img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: opacity .35s; }
.preview.is-on { opacity: 1; transform: none; }
.preview.is-swap img { opacity: 0; }
@media (max-width: 900px) { .preview { display: none; } .index { grid-template-columns: 1fr; } .index-head, .index-list { grid-column: 1; } }
/* Namen + Nummern weiter nach links, Orte bleiben am rechten Rand */
.index { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(50px, 6vw, 110px); }
.preview { width: min(100%, 460px); }

/* Jahr klein hinter dem Bar-Namen */
.index-list .t .y { margin-left: 1.6em; font: 400 8.5px var(--sans); letter-spacing: .24em; color: var(--muted); vertical-align: middle; transition: color .3s; }
.index-list a:hover .t .y { color: var(--amber); }

/* Jahr vorne statt Nummer */
.index-list a { grid-template-columns: 64px 1fr auto; }
/* ---------- Wortmarke nach Entwurf 3: eine Zeile, zwei Gewichte, gleiche Größe – senkrecht ---------- */
.hero-mark { font: 800 clamp(24px, 2.7vw, 40px)/1 var(--serif); letter-spacing: .36em; gap: .55em; }
.hero-mark b { font-weight: 800; }
.hero-mark span { font: 300 clamp(24px, 2.7vw, 40px)/1 var(--serif); letter-spacing: .36em; color: var(--ivory); }
@media (max-width: 700px) { .hero-mark, .hero-mark span { font-size: 19px; letter-spacing: .3em; } }
/* Wortmarke wieder kleiner (nur etwas größer als ursprünglich) */
.hero-mark, .hero-mark span { font-size: clamp(19px, 1.9vw, 27px); }
/* Pads im Ruhezustand: Mischung aus ursprünglichem Milchglas und „Verlauf von oben“ */
@media (hover: hover) {
  .pad:not(:hover):not(:focus-visible)::after { background: linear-gradient(180deg, rgba(236,220,192,.68), rgba(228,204,166,.46)); }
  .pad:not(:hover):not(:focus-visible) .pad-img { filter: blur(22px) saturate(.7) brightness(1.2) contrast(.78); }
}

/* ---------- Bernstein als wiederkehrender, sparsamer Akzent ---------- */
.hero-time time { color: var(--amber); }
.pad:hover .pad-yr, .pad:focus-visible .pad-yr { color: var(--amber); }
.index-head .eyebrow { color: var(--amber); }
.venue-year { color: var(--amber); }
.venue-no { color: rgba(208, 138, 69, .75); }
.to-top:hover { color: var(--amber); }
.site-footer .foot-nav a:hover { color: var(--amber); }
/* Wortmarke in warmem Creme statt Ivory-Weiß (zwischen Ivory und Bernstein, deutlich näher an Creme) */
:root { --cream: #dcc9a8; }
.hero-mark, .hero-mark b, .hero-mark span, .site-footer .foot-mark { color: var(--cream); }
/* Liste: außen mehr Raum, alles etwas nach innen */
.index { padding-left: clamp(40px, 10vw, 200px); padding-right: clamp(40px, 10vw, 200px); }
@media (max-width: 900px) { .index { padding-left: var(--gut); padding-right: var(--gut); } }
/* Pad-Logos: jedes füllt einen großen Rahmen bestmöglich aus (breite Logos die Breite, hohe die Höhe) */
.pad .pad-logo, .pad .pad-logo.wide, .pad .pad-logo.mid, .pad .pad-logo.tall { width: 76%; height: 58%; max-width: none; object-fit: contain; }

/* Einzelne Logos optisch nachjustiert */
.pad--apartment .pad-logo { width: 90% !important; }
.pad--thaipioka .pad-logo { width: 84% !important; }
.pad--24sbv .pad-logo { height: 52% !important; }
.pad--chess .pad-logo { height: 72% !important; width: 80% !important; }

/* =========================================================
   MOBIL – so nah wie möglich am Desktop, nur angepasst
   ========================================================= */
@media (max-width: 700px) {
  :root { --gut: 22px; }

  /* Startseite: Wortmarke senkrecht links, Pads 3 × 4 daneben */
  .hero { position: sticky; height: 100svh; min-height: 0; display: grid; grid-template-columns: 34px 1fr; align-items: center; align-content: center; gap: 18px; padding: 70px 18px 70px 14px; }
  .hero-mark { writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; font-size: 15px !important; letter-spacing: .34em; gap: .5em; }
  .hero-mark span { font-size: 15px !important; letter-spacing: .34em; }
  .pads { justify-self: stretch; grid-template-columns: repeat(3, 1fr); gap: 8px; --pad: auto; }
  .pad { width: auto; }
  .pad .pad-logo, .pad .pad-logo.wide, .pad .pad-logo.mid, .pad .pad-logo.tall { width: 74%; height: 54%; }
  .pad--chess .pad-logo { height: 66% !important; }
  .pad-no, .pad-yr { font-size: 7.5px; letter-spacing: .14em; }
  .pad-no { top: 6px; left: 7px; } .pad-yr { bottom: 6px; right: 7px; }
  .hero-time { top: 22px; right: 18px; font-size: 8px; }
  .hero-sub { position: absolute; left: 18px; right: 18px; bottom: 24px; justify-content: space-between; gap: 0; font-size: 7.5px; letter-spacing: .22em; flex-wrap: nowrap; }

  /* Liste */
  .index { position: relative; min-height: 0; padding: 70px var(--gut) 80px; display: block; }
  .index-head { margin-bottom: 26px; }
  .index-list a { grid-template-columns: 52px 1fr; padding: 13px 0; }
  .index-list .c { display: none; }
  .index-list .t { font-size: 12.5px; letter-spacing: .2em; }
  .index-list .n { font-size: 9px; }

  /* Bar-Seiten: Foto oben, Infos darunter */
  .venue, .venue.flip { grid-template-columns: 1fr; grid-template-rows: 52% 48%; }
  .venue .venue-img, .venue.flip .venue-img { order: 0; margin: 64px var(--gut) 0; }
  .venue-info, .venue.flip .venue-info { justify-content: flex-start; padding: 30px var(--gut) 40px; }
  .venue-no, .venue:not(.flip) .venue-no { top: 24px; right: var(--gut); }
  .venue-logo.wide { height: 30px; max-width: 78%; }
  .venue-logo.mid { height: 58px; max-width: 72%; }
  .venue-logo.tall { height: 86px; }
  .venue-year { margin-top: 20px; font-size: 15px; }
  .venue-meta { margin-top: 14px; gap: 28px; }
  .venue-meta dd { font-size: 11px; }
  .venue address { font-size: 9.5px; line-height: 1.8; }

  /* Footer & Top */
  .site-footer { padding: 34px var(--gut) 40px; gap: 16px; }
  .to-top { right: 14px; bottom: 16px; }
  .to-top span { font-size: 7.5px; }
}
@media (max-width: 700px) {
  .index-head { display: block; text-align: left; }
  .index-head .eyebrow { text-align: left; }
  .venue-logo.wide { height: 40px; max-width: 84%; }
  .venue-logo.mid { height: 76px; max-width: 80%; }
  .venue-logo.tall { height: 108px; }
  .hero { padding-top: 56px; padding-bottom: 84px; }
}

/* =========================================================
   GALERIE-SEITEN
   ========================================================= */
.venue-more { display: inline-block; margin-top: clamp(22px, 2.6vh, 32px); font: 500 9.5px var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--amber); transition: opacity .3s, letter-spacing .4s; }
.venue-more::after { content: " →"; letter-spacing: 0; }
.venue-more:hover { opacity: .75; }

.gallery-page { background: var(--bg); }
.g-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px clamp(24px, 6vw, 110px); }
.g-back, .g-count { font: 400 9.5px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.g-back:hover { color: var(--amber); }
.g-count { justify-self: end; }
.g-mark { font: 800 12px var(--serif); letter-spacing: .44em; color: var(--cream); }
.g-mark span { font-weight: 300; }
.g-intro { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 110px) clamp(50px, 8vh, 90px); }
.g-intro h1 { line-height: 0; }
.g-logo { width: auto; max-width: 70vw; }
.g-logo.wide { height: clamp(34px, 3.4vw, 54px); }
.g-logo.mid { height: clamp(64px, 6vw, 96px); }
.g-logo.tall { height: clamp(100px, 9vw, 150px); }
.g-year { margin-top: 26px; font: 700 clamp(15px, 1.3vw, 19px) var(--serif); letter-spacing: .14em; color: var(--amber); }
.g-meta { display: flex; gap: 2.4em; margin-top: 14px; font: 400 10.5px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ivory); }
.g-intro address { margin-top: 12px; font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); max-width: 40em; line-height: 1.8; }

.g-rows { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 80px) clamp(80px, 10vw, 140px); display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); }
.g-row { display: flex; gap: clamp(10px, 1.2vw, 18px); }
.g-row figure { margin: 0; overflow: hidden; background: var(--surface); opacity: 0; transform: translateY(18px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.g-row figure.in { opacity: 1; transform: none; }
.g-row img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; }
.g-row figure:hover img { transform: scale(1.025); }

.g-nav { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 80px) 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; font: 500 11px var(--serif); letter-spacing: .26em; text-transform: uppercase; }
.g-nav a { color: var(--ivory); transition: color .3s; }
.g-nav a:hover { color: var(--amber); }
.g-nav a span { display: block; margin-bottom: 8px; font: 400 8.5px var(--sans); letter-spacing: .3em; color: var(--muted); }
.g-nav .g-all { font: 400 9.5px var(--sans); letter-spacing: .3em; color: var(--amber); }
.g-nav .g-next { justify-self: end; text-align: right; }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(12, 9, 7, .97); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 88vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.lb button { position: absolute; background: none; border: 0; color: var(--ivory); cursor: pointer; font: 400 10px var(--sans); letter-spacing: .3em; text-transform: uppercase; padding: 14px; opacity: .7; transition: opacity .3s, color .3s; }
.lb button:hover { opacity: 1; color: var(--amber); }
.lb-x { top: 18px; right: 22px; }
.lb-p { left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px !important; }
.lb-n { right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px !important; }
.lb-c { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font: 400 9.5px var(--sans); letter-spacing: .3em; color: var(--muted); }
body.lb-open { overflow: hidden; }

@media (max-width: 700px) {
  .g-head { padding: 20px var(--gut); grid-template-columns: auto 1fr auto; gap: 12px; }
  .g-mark { justify-self: center; font-size: 10px; letter-spacing: .32em; }
  .g-row { flex-direction: column; }
  .g-row figure { flex: none !important; width: 100%; }
  .g-nav { grid-template-columns: 1fr 1fr; }
  .g-nav .g-all { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-bottom: 10px; }
  .lb img { max-width: 100vw; }
  .lb-p, .lb-n { top: auto; bottom: 10px; transform: none; }
}

/* ---------- Mobil, Runde 2: beige Milchglas-Pads mit weißem Logo, 2 Spalten, weniger Leerraum ---------- */
@media (max-width: 700px) {
  .hero { position: relative; height: auto; min-height: 0; align-content: start; padding: 64px 18px 64px 12px; gap: 14px; }
  .hero-mark { align-self: start; position: sticky; top: 64px; }
  .pads { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-sub { position: static; grid-column: 1 / -1; margin-top: 18px; }
  /* Milchglas wie am Desktop, aber etwas tiefer getönt, damit das weiße Logo lesbar ist */
  .pad::after { background: linear-gradient(180deg, rgba(214,192,156,.62), rgba(196,170,132,.55)) !important; }
  .pad .pad-img { filter: blur(18px) saturate(.6) brightness(.95) contrast(.8) !important; transform: scale(1.2) !important; }
  .pad .pad-logo, .pad .pad-logo.wide, .pad .pad-logo.mid, .pad .pad-logo.tall { width: 60%; height: 38%; opacity: 1 !important; transform: none !important; filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(60,40,25,.35)); }
  .pad--chess .pad-logo { height: 52% !important; width: 66% !important; }
  .pad--apartment .pad-logo { width: 78% !important; }
  .pad--24sbv .pad-logo { height: 34% !important; }
  .pad-no, .pad-yr { color: rgba(255,255,255,.85) !important; }

  /* Liste: weniger Leerraum oben und unten */
  .index { padding-top: 44px; padding-bottom: 46px; }
  .index-head { margin-bottom: 16px; }
  .index-list a { padding: 10px 0; }
}

/* ---------- Version 2: zweite Seite (Panorama, Since, Namen) ---------- */
.index--v2 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 0 clamp(40px, 6vh, 70px) !important; gap: 0; }
.v2-pano { width: 100%; aspect-ratio: 4 / 1; background-size: cover; background-position: center 50%; filter: brightness(1.05) saturate(1.05); }
.v2-since { margin-top: clamp(34px, 5.5vh, 60px); font: 300 clamp(12px, 1.1vw, 16px) var(--serif); letter-spacing: .7em; margin-right: -.7em; text-transform: uppercase; color: var(--cream); }
.v2-since b { font-weight: 800; }
.v2-names { max-width: 980px; margin: clamp(34px, 5.5vh, 64px) auto 0; padding: 0 var(--gut); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: 16px; font: 400 clamp(9.5px, .78vw, 11px) var(--serif); letter-spacing: .32em; text-transform: uppercase; }
.v2-names a { color: var(--ivory); opacity: .78; transition: color .35s, opacity .35s; white-space: nowrap; }
.v2-names a:hover, .v2-names a:focus-visible { color: var(--amber); opacity: 1; outline: none; }
.v2-names i { font-style: normal; color: var(--amber); opacity: .7; margin: 0 1.1em 0 .8em; }
@media (max-width: 700px) {
  .index--v2 { padding-bottom: 50px !important; }
  .v2-pano { aspect-ratio: 2.4 / 1; }
  .v2-since { margin-top: 30px; font-size: 11px; letter-spacing: .5em; margin-right: -.5em; }
  .v2-names { margin-top: 28px; row-gap: 12px; font-size: 9px; letter-spacing: .24em; }
  .v2-names i { margin: 0 .7em 0 .5em; }
}

.v2-names { flex-direction: column; align-items: center; row-gap: 18px; }
.v2-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: 12px; }
@media (max-width: 700px) { .v2-names { row-gap: 12px; } }

/* Version 2: Satz in Schreibschrift im Panorama */
.v2-pano { position: relative; display: flex; align-items: center; justify-content: center; }
.v2-pano::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 75% at 50% 50%, rgba(14, 9, 6,.62), rgba(14, 9, 6,.18) 75%); }
.v2-quote { position: relative; max-width: min(900px, 80%); font: 400 clamp(22px, 2.15vw, 34px)/1.45 "Allura", cursive; letter-spacing: .01em; color: #f0e2c8; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.v2-names { max-width: 1320px; }
@media (min-width: 1000px) { .v2-line { flex-wrap: nowrap; } }
@media (max-width: 700px) { .v2-pano { aspect-ratio: auto; min-height: 260px; padding: 34px 22px; } .v2-quote { max-width: 100%; font-size: 22px; line-height: 1.4; } }

.v2-quote { font-size: clamp(24px, 2.3vw, 36px); }
.v2-brand { font: 300 .5em var(--serif); letter-spacing: .34em; margin-right: .35em; vertical-align: .18em; color: var(--cream); white-space: nowrap; }
.v2-brand b { font-weight: 800; }

/* ---------- Version 2, Runde 3: Vollbild-Foto, nur die Beschreibung mittig ---------- */
.index--v2 { position: sticky; top: 0; height: 100svh; min-height: 0; padding: 0 !important; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.index--v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 58% at 50% 50%, rgba(14, 9, 6,.64), rgba(14, 9, 6,.22) 80%); }
.index--v2 .v2-quote { position: relative; max-width: min(860px, 76%); text-align: center; font: 400 clamp(19px, 1.75vw, 28px)/1.65 "Petit Formal Script", cursive; letter-spacing: .01em; color: #f0e2c8; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 700px) { .index--v2 { position: sticky; } .index--v2 .v2-quote { max-width: 86%; font-size: 17px; line-height: 1.6; } }
.index--v2 .v2-quote { font-size: clamp(21px, 2vw, 32px); max-width: min(940px, 78%); }
/* Version 2: Beschreibung kleiner, ruhiger, eleganter */
.index--v2 .v2-quote { max-width: min(620px, 74%); font-size: clamp(15px, 1.25vw, 20px); line-height: 1.95; letter-spacing: .02em; color: rgba(240, 226, 200, .92); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.index--v2::before { background: radial-gradient(ellipse 48% 46% at 50% 50%, rgba(14, 9, 6,.58), rgba(14, 9, 6,.16) 85%); }
@media (max-width: 700px) { .index--v2 .v2-quote { max-width: 82%; font-size: 14.5px; line-height: 1.9; } }
/* Version 2: weiche, eckige Vignette im Seiten-Braun von außen nach innen */
.index--v2::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 16vw 4vw rgba(20, 14, 10, .92); }
.index--v2 .v2-quote { z-index: 1; }
.index--v2 .v2-quote { max-width: min(1080px, 80%); }  /* ca. 2,5 Zeilen */
.index--v2 .v2-quote { max-width: min(47em, 86vw); }  /* Breite an Schriftgröße gekoppelt: überall ca. 2,5 Zeilen */
.index--v2 .v2-quote { max-width: min(42em, 86vw); }

/* Version 2: „View portfolio“ unten mittig, blendet 3 s nach Ankunft langsam ein */
.v2-more { position: absolute; z-index: 2; left: 50%; bottom: clamp(30px, 5vh, 52px); transform: translate(-50%, 6px); font: 500 9.5px var(--sans); letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity 2.2s cubic-bezier(.4,0,.2,1), transform 2.2s cubic-bezier(.2,.7,.2,1), color .3s; pointer-events: none; }
.v2-more.is-on { opacity: .85; transform: translate(-50%, 0); pointer-events: auto; }
.v2-more:hover { color: var(--amber); opacity: 1; }

/* Version 2: Beschreibung blendet sofort in 1 s ein */
.index--v2 .v2-quote { opacity: 0; transform: translateY(8px); transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.index--v2 .v2-quote.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .index--v2 .v2-quote, .v2-more { opacity: 1; transform: none; transition: none; } }

/* Version 2: Text breiter, „since 2017“ allein in der letzten Zeile */
.index--v2 .v2-quote { max-width: min(52em, 90vw); }

/* Mobil: alle 12 Pads auf einem Bildschirm (3 × 4), Zitat in 3 Zeilen */
@media (max-width: 700px) {
  .hero { position: sticky; top: 0; height: 100svh; min-height: 0; align-content: center; align-items: center; padding: 56px 16px 64px 10px; gap: 14px; }
  .hero-mark { align-self: center; position: static; }
  .pads { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pad .pad-logo, .pad .pad-logo.wide, .pad .pad-logo.mid, .pad .pad-logo.tall { width: 66%; height: 40%; }
  .hero-sub { position: absolute; left: 16px; right: 16px; bottom: 22px; margin: 0; }
  .index--v2 .q-br { display: none; }
  .index--v2 .v2-quote { max-width: 94vw; font-size: 10.5px; line-height: 2; letter-spacing: 0; }
}
@media (max-width: 700px) { .index--v2 .v2-quote { max-width: calc(100vw - 20px); font-size: 10px; } }

/* Mobil: Hintergrund wieder im ursprünglichen, dunkleren Braun */
@media (max-width: 700px) {
  :root { --bg: #120d0b; --surface: #1c1410; }
  .hero { background: #150f0d; }
}