/* Grundlook der heutigen Seite: weiß, Garamond, große Fotos. Eine Spalte am Handy. */
:root{
  --bg:#ffffff; --ink:#1c1c1e; --muted:#6c6c72; --line:#e7e7ea; --soft:#f4f4f6;
  --display:"EB Garamond", Georgia, serif;
  --body:"Jost", "Helvetica Neue", Arial, sans-serif;
  --rand:clamp(16px, 4vw, 56px);
  color-scheme: light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:300 17px/1.6 var(--body)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
.eyebrow{font:400 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.abschnitt{font-size:clamp(28px,4vw,40px);margin-bottom:24px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--rand)}
.logo{font:400 26px/1 var(--display);letter-spacing:.12em;white-space:nowrap}
.logo span{font-size:.55em;letter-spacing:.22em;color:var(--muted)}
.logo.klein{font-size:21px}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{color:var(--muted)} .nav a:hover{color:var(--ink)}
.nav .lang{border-left:1px solid var(--line);padding-left:20px}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.burger i{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px 0}
@media (max-width:900px){.nav{display:none}.burger{display:block}.logo{font-size:21px}}

/* Fuß */
.fuss{border-top:1px solid var(--line);margin-top:80px}
.fuss-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding:36px var(--rand);font-size:14px;color:var(--muted)}
.fuss p{margin:8px 0 0}
.fuss-links{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}

/* ---------- A ---------- */
.a-hero{height:min(78vh,760px);min-height:440px;background:center/cover;display:flex;align-items:flex-end;position:relative}
.a-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.a-hero-text{position:relative;z-index:1;color:#fff;padding:0 var(--rand) clamp(28px,6vw,64px)}
.a-hero h1{font-size:clamp(48px,9vw,104px);letter-spacing:.06em;line-height:1}
.a-hero p{font-size:clamp(17px,2vw,21px);margin:14px 0 0;max-width:34ch}
.a-baender{display:grid;gap:6px;margin-top:6px}
.a-band{position:relative;height:clamp(220px,34vw,420px);background:center/cover;display:flex;align-items:flex-end;justify-content:space-between;color:#fff;padding:0 var(--rand) clamp(22px,3vw,40px)}
.a-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.05) 70%)}
.a-band>*{position:relative}
.a-band h2{font-size:clamp(30px,4.4vw,54px);line-height:1.05}
.a-band p{margin:6px 0 0;font-size:16px;opacity:.9;max-width:40ch}
.pfeil{font-size:28px;opacity:.8}
.a-kontakt{text-align:center;padding:72px var(--rand) 0}
.a-kontakt h2{font-size:40px}
.mail{font:400 26px var(--display);letter-spacing:.04em}

/* ---------- B ---------- */
.b-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(32px,6vw,80px) var(--rand)}
.b-intro h1{font-size:clamp(38px,5.4vw,68px);line-height:1.05}
.b-intro p{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:44ch;margin:20px 0 0}
.b-intro img{aspect-ratio:4/3;object-fit:cover;width:100%}
.b-filter{display:flex;gap:10px;padding:0 var(--rand) 28px;overflow-x:auto;scrollbar-width:none}
.b-filter a{white-space:nowrap;font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--muted)}
.b-filter a.an{background:var(--ink);border-color:var(--ink);color:#fff}
.b-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px) clamp(16px,2vw,28px);padding:0 var(--rand)}
.karte img{aspect-ratio:3/2;object-fit:cover;width:100%}
.karte-meta{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.karte h3{font-size:clamp(24px,2.2vw,30px);margin-top:4px}
.b-mehr{text-align:center;margin:48px 0 0}
@media (max-width:760px){.b-intro{grid-template-columns:1fr}.b-intro img{order:-1}.b-raster{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:1100px){.b-raster{grid-template-columns:repeat(2,1fr)}}

/* ---------- C ---------- */
.c-top{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.c-haupt{min-height:min(76vh,720px);background:center/cover;display:flex;align-items:flex-end;color:#fff;position:relative;padding:0 var(--rand) clamp(28px,5vw,56px)}
.c-haupt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65))}
.c-haupt>div{position:relative;max-width:560px}
.c-haupt .eyebrow{color:rgba(255,255,255,.8)}
.c-haupt h1{font-size:clamp(42px,6vw,78px);line-height:1.02;margin-top:10px}
.c-haupt p{font-size:18px;margin:12px 0 0}
.c-neben{display:grid;grid-template-rows:repeat(3,1fr);gap:6px}
.c-klein{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 22px}
.c-klein img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-klein::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.65));z-index:1}
.c-klein>*:not(img){position:relative;z-index:2}
.c-klein .eyebrow{color:rgba(255,255,255,.8)}
.c-klein h3{font-size:26px;margin-top:4px}
.c-bereiche{padding:72px var(--rand) 0}
.c-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kachel{aspect-ratio:1/1;background:center/cover;position:relative;display:flex;align-items:flex-end;padding:18px;color:#fff}
.kachel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.65))}
.kachel h3{position:relative;font-size:clamp(20px,2vw,27px);line-height:1.1}
.kachel:first-child{grid-column:span 2;aspect-ratio:auto}
.c-bio{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,64px);align-items:center;padding:80px var(--rand) 0}
.c-bio img{aspect-ratio:4/3;object-fit:cover;width:100%}
.c-bio h2{font-size:40px}
.c-bio p{color:var(--muted);max-width:56ch}
@media (max-width:900px){.c-top{grid-template-columns:1fr}.c-haupt{min-height:520px}.c-neben{grid-template-rows:none;grid-template-columns:1fr}.c-klein{min-height:200px}
  .c-kacheln{grid-template-columns:repeat(2,1fr)}.kachel:first-child{aspect-ratio:2/1}.c-bio{grid-template-columns:1fr}}

/* ---------- Projektseiten ---------- */
.p-titelbild{height:min(62vh,620px);min-height:300px;background:center/cover}
.p-kopf,.p-text,.hoer,.p-hinweis,.p-weiter,.fr-weitere{max-width:980px;margin-left:auto;margin-right:auto;padding-left:var(--rand);padding-right:var(--rand)}
.p-kopf{padding-top:48px}
.p-kopf h1{font-size:clamp(44px,7vw,84px);line-height:1.02;margin-top:10px}
.p-unter{font:italic 400 clamp(21px,2.4vw,28px)/1.3 var(--display);color:var(--muted);margin:10px 0 0}
.p-daten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:36px 0 0}
.p-daten dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.p-daten dd{margin:4px 0 0;font-size:15px;line-height:1.4}
.p-text{padding-top:32px;font-size:clamp(18px,1.7vw,20px)}
.p-text p{max-width:62ch}
.p-video{max-width:1280px;margin:40px auto 0;aspect-ratio:16/9;background:center/cover;position:relative;display:flex;align-items:center;justify-content:center}
.p-video span{position:absolute;bottom:14px;left:16px;font-size:12px;color:#fff;background:rgba(0,0,0,.5);padding:4px 9px}
.play{width:84px;height:84px;border-radius:50%;border:0;background:rgba(255,255,255,.92);position:relative;cursor:pointer}
.play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid var(--ink);border-top:16px solid transparent;border-bottom:16px solid transparent}
.play.klein{width:44px;height:44px;flex:none;background:var(--ink)}
.play.klein::after{left:17px;top:13px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.p-galerie{max-width:1280px;margin:6px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p-galerie img{aspect-ratio:3/2;object-fit:cover;width:100%}
.p-galerie.vier{grid-template-columns:repeat(4,1fr);margin-top:40px}
.p-galerie.vier img{aspect-ratio:3/4}
.p-hinweis{font-size:12px;color:var(--muted);margin-top:16px}
.p-weiter{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:48px;padding-top:20px;font:400 21px var(--display)}
.hoer{margin-top:32px;display:grid;gap:10px}
.hoer-zeile{display:grid;grid-template-columns:44px minmax(150px,240px) 1fr;gap:16px;align-items:center;background:var(--soft);padding:12px 16px}
.hoer-zeile b{display:block;font:400 21px var(--display)}
.hoer-zeile span{font-size:13px;color:var(--muted)}
.welle{height:34px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(0deg,#000,#000) center/100% 100%;opacity:.55;clip-path:polygon(0 40%,4% 20%,9% 55%,14% 10%,20% 45%,27% 25%,33% 60%,40% 15%,47% 50%,55% 30%,62% 65%,70% 20%,78% 50%,85% 35%,92% 60%,100% 40%,100% 60%,92% 80%,85% 70%,78% 85%,70% 75%,62% 90%,55% 70%,47% 85%,40% 80%,33% 95%,27% 70%,20% 85%,14% 90%,9% 75%,4% 80%,0 60%)}
.welle.leer{opacity:.15}
.fr-weitere{margin-top:72px}
.fr-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fr-liste img{aspect-ratio:3/2;object-fit:cover;width:100%;margin-bottom:10px}
.fr-liste b{display:block;font:400 24px var(--display)}
.fr-liste span{font-size:14px;color:var(--muted)}
@media (max-width:760px){.p-daten{grid-template-columns:1fr 1fr}.p-galerie{grid-template-columns:1fr 1fr}.p-galerie img:first-child{grid-column:span 2}
  .p-galerie.vier{grid-template-columns:1fr 1fr}.p-galerie.vier img:first-child{grid-column:auto}
  .hoer-zeile{grid-template-columns:44px 1fr}.welle{grid-column:1/-1}.fr-liste{grid-template-columns:1fr}.p-weiter{font-size:17px}}

/* Runde 2 */
.hl{padding:48px clamp(16px,6vw,120px) 0}
.hl .c-top{gap:6px}
.vita-zeile{text-align:center;margin:64px 0 0;font:400 21px var(--display)}
.vita-zeile a{border-bottom:1px solid var(--line);padding-bottom:3px}
.fr-liste.sechs{grid-template-columns:repeat(3,1fr);row-gap:32px}
.projekt .fr-weitere{max-width:1280px}
.p-galerie.zwei{grid-template-columns:1fr 1fr;margin-top:40px}
.p-galerie.zwei img{aspect-ratio:4/5}
@media (max-width:760px){.fr-liste.sechs{grid-template-columns:1fr 1fr}.fr-liste.sechs b{font-size:19px}.p-galerie.zwei img:first-child{grid-column:auto}.hl{padding-top:32px}}

/* Runde 3: Bildnachweise */
.credit{position:absolute;right:10px;bottom:7px;z-index:3;font:400 10.5px/1 var(--body);letter-spacing:.03em;color:rgba(255,255,255,.78);text-shadow:0 0 4px rgba(0,0,0,.6);pointer-events:none}
.credit.fehlt{color:#ffd27a}
.a-hero,.p-titelbild,.c-haupt,.c-klein,.a-band{position:relative}
.bildrahmen{position:relative;margin:0}
.p-galerie.zwei img{aspect-ratio:3/2}

/* Runde 4: Mexico-Galerie (Mauerwerk wie auf der alten Seite) */
.mx-galerie{max-width:1280px;margin:40px auto 0;padding:0 var(--rand);columns:3 280px;column-gap:8px}
.mx-galerie img{width:100%;margin:0 0 8px;break-inside:avoid}
.galerie-credit{max-width:1280px;margin:6px auto 0;padding:0 var(--rand);font-size:12px;color:var(--muted)}
@media (max-width:760px){.mx-galerie{columns:2;column-gap:6px}.mx-galerie img{margin-bottom:6px}}

/* Runde 5: Mexico wie alte Seite: Gruppen mit Weißraum, Bilder stoßen aneinander */
.mx-alt{max-width:980px;margin:48px auto 0;padding:0 var(--rand);display:flex;flex-direction:column;gap:clamp(28px,8vw,80px)}
.mxz{display:flex;width:100%}
.mxz img{height:100%;object-fit:cover;min-width:0}
.mx-alt+.galerie-credit{max-width:980px}
.mx-hb{margin-top:10px}
.mx-montage{display:flex;gap:4px;background:#fff}
.mx-montage img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;filter:grayscale(1)}
.mx-montage img:nth-child(2){flex:1.6 1 0}
@media (max-width:760px){.mx-montage img:not(:nth-child(2)){display:none}}

/* ================= Echte Website (bauen.py) ================= */
.hintergrund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.a-hero,.a-band,.c-haupt,.p-titelbild,.p-video{position:relative;overflow:hidden;background:#111}
.a-hero::after,.a-band::before,.c-haupt::before{z-index:1}
.a-hero-text,.a-band>div,.a-band .pfeil,.c-haupt>div{position:relative;z-index:2}
.a-band{color:#fff}
.p-titelbild{background:none}
.nav a[aria-current]{color:var(--ink)}
.seite-kopf{padding:clamp(32px,6vw,72px) var(--rand) 20px}
.seite-kopf h1{font-size:clamp(40px,6vw,68px)}
.b-filter button{font:inherit;font-size:14px;background:none;cursor:pointer;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--muted)}
.b-filter button.an{background:var(--ink);border-color:var(--ink);color:#fff}
.raster-zelle[hidden]{display:none}
.karte .bildrahmen img,.fr-liste img{aspect-ratio:3/2;object-fit:cover;width:100%}
.b-raster.klein{padding:0}
.bereich-kopf{height:clamp(240px,38vw,460px);align-items:flex-end}
.bereich-kopf h1{font-size:clamp(36px,5.4vw,64px);line-height:1.05}
.bereich-link{padding:20px var(--rand) 0;font:400 21px var(--display)}
.b-raster{padding-top:32px}
.leer{padding:40px var(--rand);color:var(--muted)}
.p-video{cursor:pointer}
.p-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
.p-video .play{position:relative;z-index:2}
.video-hinweis{position:absolute;bottom:14px;left:16px;z-index:2;font-size:12px;color:#fff;background:rgba(0,0,0,.55);padding:4px 9px}
.video-hinweis a{text-decoration:underline}
.mxg .hoer-zeile,.hoer .hoer-zeile{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px;background:var(--soft);padding:12px 16px}
.hoer-titel{flex:1 1 200px}
.hoer-zeile audio{flex:1 1 280px;height:36px;min-width:0}
.p-galerie figure{margin:0}
.p-galerie img{display:block}
.p-links{max-width:980px;margin:48px auto 0;padding:0 var(--rand)}
.p-links h2,.seite h2{font-size:26px;margin:28px 0 10px}
.p-links ul,.liste{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.p-links li span,.liste span{color:var(--muted);font-size:14px}
.p-links a,.liste a,.seite-text a{border-bottom:1px solid var(--line)}
.p-hinweis.entwurf{color:#a15c00}
.seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px);padding:clamp(32px,6vw,80px) var(--rand) 0;max-width:1280px;margin:0 auto;align-items:start}
.seite:not(:has(.seite-bild)){grid-template-columns:minmax(0,760px);justify-content:center}
.seite-bild img{width:100%;aspect-ratio:1/1;object-fit:cover}
.seite-text h1{font-size:clamp(40px,6vw,64px);margin-bottom:20px}
.seite-text p{max-width:62ch}
.mail-gross{font:400 clamp(26px,4vw,38px) var(--display);margin:24px 0 4px}
.mx-montage img.breit{flex:1.6 1 0}
@media (max-width:760px){.seite{grid-template-columns:1fr}}
/* Mobiles Menü */
@media (max-width:900px){
  .nav{position:fixed;inset:61px 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:8px var(--rand) 20px;border-bottom:1px solid var(--line);display:none}
  .nav.offen{display:flex}
  .nav a{padding:12px 0;font-size:19px;color:var(--ink);border-bottom:1px solid var(--soft)}
  .nav .lang{border-left:0;padding-left:0}
}
.p-galerie.n2,.p-galerie.n4{grid-template-columns:repeat(2,1fr)}
.p-galerie.n1{grid-template-columns:1fr}
@media (min-width:761px){.p-galerie.n4{grid-template-columns:repeat(4,1fr)}.p-galerie.n4 img{aspect-ratio:3/4}}
@media (max-width:760px){.b-raster.klein{grid-template-columns:1fr 1fr;gap:20px 12px}.b-raster.klein .karte h3{font-size:19px}.b-raster.klein .karte-meta span:first-child{display:none}
  .p-galerie.n3 img:first-child,.p-galerie.n4 img:first-child{grid-column:auto}}
@media (min-width:761px){.seite-bild{position:sticky;top:90px}}
.bereich-leiste{display:flex;justify-content:space-between;gap:16px;padding:14px var(--rand);border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bereich-leiste a:first-child{color:var(--ink)}
.zitate{max-width:980px;margin:36px auto 0;padding:0 var(--rand)}
.zitate blockquote{margin:0 0 24px;padding-left:22px;border-left:2px solid var(--ink)}
.zitate blockquote p{font:italic 400 clamp(21px,2.3vw,27px)/1.4 var(--display);margin:0;max-width:52ch}
.zitate footer{margin-top:10px;font-size:14px;color:var(--muted)}
.p-video-oben{max-width:none;margin:0}
.p-video .credit{z-index:3}
.video-liste{max-width:1280px;margin:48px auto 0;display:grid;gap:40px;padding:0 var(--rand)}
.video-liste figure{margin:0}
.video-liste .p-video{margin:0;max-width:none}
.video-liste figcaption{font:400 clamp(22px,2.4vw,30px) var(--display);margin-top:12px}
.reels{max-width:980px;margin:40px auto 0;padding:0 var(--rand);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));gap:20px;justify-content:center}
.reels figure{margin:0}.reels video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#111;display:block}
.reels figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.p-video-klein{max-width:640px}
.link-kasten{max-width:980px;margin:48px auto 0;padding:28px var(--rand);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--soft);border-left:3px solid var(--ink)}
.link-kasten p{margin:0;font:400 clamp(19px,2vw,23px)/1.35 var(--display);max-width:40ch}
.knopf{display:inline-block;background:var(--ink);color:#fff;padding:14px 26px;font:500 16px var(--body);letter-spacing:.04em;white-space:nowrap}
.knopf:hover{background:#000}
.link-kasten.oben{margin-top:32px}
/* Große Bildschirme: Inhalt nicht endlos breit ziehen */
main{max-width:1600px;margin:0 auto}
.a-band{height:clamp(220px,34vw,560px)}
.a-hero{height:min(78vh,880px)}
@media (min-width:1601px){.kopf-in,.fuss-in{max-width:1600px;margin:0 auto}}

.video-quer{max-width:1280px;margin:40px auto 0;padding:0 var(--rand)}
.video-quer video{width:100%;display:block;background:#111}
.video-quer figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.spotify,.soundcloud,.podigee,.bandcamp{max-width:700px;margin:40px auto 0;padding:0 var(--rand)}
.spotify button,.soundcloud button,.podigee button,.bandcamp button{font:inherit;font-size:16px;width:100%;padding:18px;border:1px solid var(--line);background:none;cursor:pointer;color:inherit}
.podigee button:hover,.bandcamp button:hover{background:rgba(0,0,0,.04)}
.bandcamp iframe{border:0;width:100%;height:470px;display:block}
.video-titel{font:400 clamp(22px,2.4vw,30px)/1.2 var(--display);margin:0 0 12px}
.hoeren{max-width:1400px;margin:0 auto;padding:48px var(--rand) 0}
.h-kopf h1{font:400 clamp(40px,6vw,72px)/1 var(--display);margin:0 0 12px}
.h-kopf p{color:var(--muted);max-width:60ch}
.h-sprung{display:flex;gap:20px;margin-top:16px;font-size:15px}
.hoeren section{margin-top:56px}
.h-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:36px 24px;margin-top:20px}
.h-video{margin:0;min-width:0}
.h-video .p-video{margin:0;max-width:none}
.h-video video{width:100%;aspect-ratio:16/9;background:#111;display:block;object-fit:contain}
.h-video figcaption{margin-top:10px}
.h-video figcaption b{font:400 21px/1.25 var(--display);display:block}
.h-herkunft{font-size:14px;color:var(--muted);margin:4px 0 0}
.h-herkunft a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.h-herkunft a:hover{color:var(--ink)}
.h-audio{max-width:none;margin-top:20px}
.h-album{margin-top:20px}.h-album b{font:400 24px var(--display)}
.h-album .bandcamp{margin:12px 0 0;padding:0}
.dienste{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 16px}
.dienste a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 10px;font-size:15px;color:var(--ink);text-decoration:none}
.dienste a:hover{background:var(--soft)}
.dienste svg{width:20px;height:20px;flex:none}
.podigee iframe{width:100%;border:0}
.tuba-videos,.video-liste.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.video-reihe{max-width:1600px;margin:40px auto 0;padding:0 var(--rand);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.video-reihe .p-video{margin:0;max-width:none}
.video-reihe .video-hinweis{font-size:11px}
.video-reihe figure{margin:0;min-width:0}
.video-reihe figcaption{font-size:14px;color:var(--muted);margin-top:6px}
@media (max-width:900px){.video-reihe{grid-template-columns:1fr}}
.bereich-videos .video-titel{font-size:clamp(19px,1.6vw,24px);margin:0 0 10px}
.video-reihe figcaption a{color:inherit}
@media (min-width:761px){.p-titelbild.ganz{height:auto;min-height:0;aspect-ratio:var(--verh)}}
.bereich-videos figure{display:flex;flex-direction:column;justify-content:flex-end}
.insta{max-width:1100px;margin:48px auto 0;padding:0 var(--rand)}
.insta h2{font:400 26px var(--display);margin:0 0 14px}.insta h2 a{color:inherit}
.insta-raster{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.insta-raster img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--soft)}
@media (max-width:760px){.insta-raster{grid-template-columns:repeat(3,1fr)}}
.insta-raster{position:relative}
.insta-credit{position:static;display:block;grid-column:1/-1;color:var(--muted);text-shadow:none;padding:0;font-size:12px;background:none}
.insta-fuss{margin:10px 0 0;font-size:15px}.insta-fuss a{color:inherit}
.soundcloud iframe{width:100%;border:0;display:block}
.h-album .soundcloud{margin:12px 0 0;padding:0}
.bandcamp+.soundcloud,.soundcloud+.soundcloud,.soundcloud+.bandcamp{margin-top:12px}
.h-streaming{margin-top:28px;display:grid;gap:18px}
.h-dienst-gruppe b{font:400 22px var(--display);display:block;margin-bottom:4px}
.h-streaming .dienste{margin:4px 0 0}
.b-info{max-width:900px;margin:64px auto 0;padding:0 var(--rand);display:grid;gap:40px}
.b-info h2{font:400 clamp(26px,3vw,34px)/1.15 var(--display);margin:0 0 12px}
.b-info h3{font:500 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.b-hinweis p{max-width:62ch}.b-hinweis a{color:inherit}
.eq-spalten{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.eq-spalten ul{list-style:none;margin:0;padding:0}.eq-spalten li{padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
@media (max-width:760px){.eq-spalten{grid-template-columns:1fr}}
.h-streaming .spotify{margin:12px 0 0;padding:0}
.spotify iframe{width:100%;height:352px;border:0;border-radius:12px;display:block}
.p-weiter a{color:inherit;text-decoration:none;max-width:48%}.p-weiter a:hover{text-decoration:underline;text-underline-offset:4px}
.p-weiter .blaettern-vor{text-align:right;margin-left:auto}
.dienste-oben{max-width:700px;margin:40px auto 0;padding:0 var(--rand)}
.dienste-oben+.soundcloud,.dienste-oben+.podigee,.dienste-oben+.bandcamp{margin-top:16px}
/* Handy: Titelbild im eigenen Seitenverhältnis zeigen statt hoch zu beschneiden */
@media (max-width:760px){.p-titelbild{height:auto;min-height:0;aspect-ratio:var(--verh,1.5);max-height:min(78vh,110vw)}}
@media (max-width:760px){.a-hero{height:min(64vh,600px);min-height:400px}}
/* Ausgewählte Projekte: am Handy als ruhige Karten statt großer Bildflächen */
.hl-karten{display:none}
@media (max-width:900px){.hl .c-top{display:none}.hl-karten{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}}
.kapitel{max-width:1100px;margin:56px auto 0;padding:0 var(--rand)}
.kapitel h2{font:400 clamp(26px,3vw,34px)/1.15 var(--display);margin:0 0 6px}.kapitel-text{color:var(--muted);margin:0 0 20px;font-size:15px}
.kapitel-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 14px}
.kapitel-raster a{color:inherit;text-decoration:none}.kapitel-raster .bildrahmen{position:relative;display:block;overflow:hidden;border-radius:3px}
.kapitel-raster img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s}.kapitel-raster a:hover img{transform:scale(1.03)}
.kapitel-raster b{display:block;font:400 20px/1.2 var(--display);margin-top:8px}.kapitel-raster small{display:block;color:var(--muted);font-size:13px;line-height:1.3}
@media (max-width:760px){.kapitel-raster{grid-template-columns:1fr 1fr}}
.kapitel-raster a.aktiv{opacity:.45;pointer-events:none}
.downloads{max-width:700px;margin:40px auto 0;padding:0 var(--rand);display:grid;gap:10px}
.downloads a{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:12px 14px;color:inherit;text-decoration:none}
.downloads a:hover{background:var(--soft)}.downloads span{grid-row:span 2;font-size:22px;text-align:center}
.downloads b{font:400 19px var(--display)}.downloads small{color:var(--muted);font-size:13px}
.p-galerie.viele{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.p-galerie.viele{grid-template-columns:1fr 1fr}}
.p-weiter a{display:flex;flex-direction:column;gap:4px}
.p-weiter small{font:400 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.p-weiter b{font-weight:400;line-height:1.2}
.p-weiter .blaettern-vor{align-items:flex-end}
.p-weiter a:hover{text-decoration:none}.p-weiter a:hover b{text-decoration:underline;text-underline-offset:4px}
/* Fußzeile (Variante B, dunkel) */
.fuss{background:#1c1c1e;color:#e9e7e2;border-top:0;margin-top:96px}
.fuss-in{display:block;padding:60px var(--rand) 28px;color:inherit;font-size:15px}
.fuss-spalten{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fuss h4{font:500 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#9a9890;margin:0 0 14px}
.fuss .logo{color:#fff;text-decoration:none}.fuss .logo span{color:#9a9890}
.fuss p{color:#c9c6bf;margin:12px 0 0;line-height:1.7}
.fuss a{color:inherit;text-decoration:none}.fuss a:hover{color:#fff}
.fuss ul{list-style:none;margin:0;padding:0;line-height:2}
.fuss-icons{display:flex;gap:12px;margin-top:18px}
.fuss-icons a{display:inline-flex;width:40px;height:40px;border-radius:50%;border:1px solid rgba(233,231,226,.5);align-items:center;justify-content:center}
.fuss-icons a:hover{border-color:#fff}.fuss-icons svg{width:18px;height:18px}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #3a3a3d;margin-top:48px;padding-top:18px;font-size:13px;color:#9a9890}
.fuss-unten nav{display:flex;gap:18px}
@media (max-width:760px){.fuss-spalten{grid-template-columns:1fr 1fr;gap:28px 20px}.fuss-kontakt{grid-column:1/-1}.fuss ul{line-height:1.5}.fuss li{margin-bottom:10px}}
/* Karten ruhiger: ein Tag, eine Zeile, Titel max. zwei Zeilen */
.karte-meta{gap:12px;white-space:nowrap}.karte-meta span:first-child{overflow:hidden;text-overflow:ellipsis}
.karte h3{line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hoer{margin-bottom:48px}
.oben-blaettern{display:flex;gap:22px}.oben-blaettern a{color:inherit;text-decoration:none}.oben-blaettern a:hover{text-decoration:underline;text-underline-offset:3px}
/* Video-Raster symmetrisch: bei Rest 1 wird das erste Video groß */
.video-reihe.sp2{grid-template-columns:repeat(2,1fr)}.video-reihe.sp3{grid-template-columns:repeat(3,1fr)}.video-reihe.sp4{grid-template-columns:repeat(4,1fr)}
.video-reihe.gross>figure:first-child{grid-column:1/-1}
@media (max-width:900px){.video-reihe.sp2,.video-reihe.sp3,.video-reihe.sp4{grid-template-columns:1fr}}
.titel-lang{max-width:980px;margin:40px auto -12px;padding:0 var(--rand);font:400 clamp(24px,2.6vw,32px)/1.25 var(--display);color:var(--muted)}
.p-weiter.oben{border-top:0;border-bottom:1px solid var(--line);margin-top:20px;padding-top:0;padding-bottom:16px}
.reels{max-width:1100px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));justify-content:stretch}.reels:has(figure:only-child){max-width:420px}
/* Kapitel-Unterseiten: Titelbild nicht randlos (Quellbilder oft nur Videostandbilder) */
.p-titelbild.schmal{max-width:1100px;margin:28px auto 0;height:auto;min-height:0;aspect-ratio:16/9;border-radius:3px}
@media (max-width:1150px){.p-titelbild.schmal{margin:20px var(--rand) 0}}