*{box-sizing:border-box}
:root{--wine:#660000;--red:#990000;--ink:#333;--muted:#626262;--soft:#faf8f8;--line:#eadede}
html{background:var(--wine)}
body{margin:0;background:var(--wine);font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
.hero{width:100%;height:clamp(210px,31vw,430px);overflow:hidden;background:#111}
.hero img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 35%}
.wine-band{height:24px;background:var(--wine)}
.topnav{height:68px;background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:center;gap:34px}
.topnav a{color:#555;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;font-size:14px;padding:10px 0}
.topnav a.active{background:var(--wine);color:#fff;border-radius:22px;padding:12px 18px}
.mobile-nav{display:none}
.page{max-width:1060px;margin:0 auto;background:#fff;padding:58px 70px 72px}
.eyebrow{margin:0 0 12px;color:var(--red);font-size:13px;font-weight:800;letter-spacing:.18em}
h1,h2,h3,p{margin-top:0}
h1{margin-bottom:13px;color:var(--wine);font-size:clamp(3.4rem,6vw,5.3rem);line-height:.96;letter-spacing:-.04em}
.lead{margin-bottom:22px;font-size:clamp(1.25rem,2vw,1.65rem);color:#555}
.introtext{max-width:680px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.65}
.intro{padding-bottom:48px;border-bottom:2px solid var(--wine)}
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;padding:58px 0}
h2{margin-bottom:18px;font-size:clamp(1.85rem,3vw,2.6rem);line-height:1.08}
.storytext p,.repertoire p{font-size:1.02rem;line-height:1.68;color:#555}
.ensemble{padding:50px 0 58px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sectionhead{margin-bottom:29px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.cards article{min-height:135px;padding:24px 20px;background:var(--soft);border-top:4px solid var(--red)}
.cards span{display:block;margin-bottom:13px;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.1em}
.cards h3{margin:0;font-size:1.13rem;line-height:1.25}
.more{color:var(--wine);font-weight:700;text-decoration:none}
.repertoire{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;padding:58px 0}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}
.tags span{border:1px solid #dfcaca;border-radius:22px;padding:8px 13px;color:var(--wine);font-size:.85rem;font-weight:700}
.linksbox{display:grid;grid-template-columns:repeat(3,1fr);background:var(--wine)}
.linksbox a{min-height:135px;padding:27px 25px;color:#fff;text-decoration:none;border-right:1px solid #8e3e3e;position:relative}
.linksbox a:last-child{border-right:0}
.linksbox small{display:block;margin-bottom:12px;color:#e8b4ad;font-size:10px;font-weight:800;letter-spacing:.14em}
.linksbox strong{display:block;font-size:1.1rem;line-height:1.25;padding-right:25px}
.linksbox a>span{position:absolute;right:20px;bottom:23px;font-size:1.5rem}
footer{max-width:1060px;margin:0 auto;padding:25px 30px 34px;color:#e7cccc;font-size:12px;display:flex;justify-content:space-between}
footer a{color:#fff;text-decoration:none}
@media(max-width:720px){
 .hero{height:190px}.hero img{object-position:center 30%}.wine-band{height:9px}
 .desktop-nav{display:none}
 .mobile-nav{height:44px;background:#fff;display:grid;grid-template-columns:1fr 1.45fr 1fr .8fr;border-bottom:1px solid #ddd;position:relative;z-index:10}
 .mobile-nav>a,.mobile-nav summary{display:flex;align-items:center;justify-content:center;color:#555;text-decoration:none;text-transform:uppercase;font-size:10px;border-right:1px solid #eee;list-style:none}
 .mobile-nav>a.active{background:var(--wine);color:#fff}
 .mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav details{position:relative}
 .mobile-nav summary{height:44px;cursor:pointer}
 .mobile-menu{position:absolute;right:6px;top:46px;width:150px;background:#fff;border:1px solid #ddd;box-shadow:0 8px 20px #0002}
 .mobile-menu a{display:block;padding:12px 14px;color:#555;text-decoration:none;text-transform:uppercase;font-size:11px;border-bottom:1px solid #eee}
 .page{padding:30px 14px 48px}
 .intro{padding-bottom:30px}h1{font-size:2.75rem}.lead{font-size:1.08rem}.introtext{font-size:.91rem;line-height:1.55}
 .story,.repertoire{grid-template-columns:1fr;gap:7px;padding:35px 0}
 h2{font-size:1.65rem}.storytext p,.repertoire p{font-size:.93rem;line-height:1.58}
 .ensemble{padding:35px 0}.cards{grid-template-columns:1fr;gap:10px}.cards article{min-height:0;padding:17px 16px}
 .linksbox{grid-template-columns:1fr}.linksbox a{min-height:94px;padding:20px;border-right:0;border-bottom:1px solid #8e3e3e}.linksbox a:last-child{border-bottom:0}
 footer{padding:22px 16px 30px}
}
@media(max-width:430px){
 .hero{height:165px}
 h1{font-size:2.55rem}
}

/* =========================================================
   V3 – Fotobalken wie auf der Termine-Seite
   ========================================================= */
.hero{
  height:clamp(150px,18vw,260px);
}
.hero img{
  object-fit:cover;
  object-position:center 34%;
}
@media(max-width:720px){
  .hero{
    height:108px;
  }
  .hero img{
    object-position:center 32%;
  }
}

/* V3.1 – wie Termine V3 */
.topnav{height:58px;gap:30px}
.topnav a{font-size:13px}
.topnav a.active{padding:10px 17px}
.hero{height:clamp(150px,18vw,260px)}
.hero img{object-position:center 48%}
.trio-photo{margin:42px 0 54px}
.trio-photo img{display:block;width:100%;height:auto;border-radius:4px}
h1{font-size:clamp(3.2rem,5.2vw,4.7rem)}
@media(max-width:720px){
 .hero{height:108px}
 .hero img{object-position:center 48%}
 .trio-photo{margin:28px 0 34px}
 h1{font-size:2.65rem}
}
@media(max-width:380px){h1{font-size:2.45rem}}

/* TERMINE – exakt gleiche Überschrift-Typografie wie Personen V2 */
.termine-page h1{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:clamp(2.8rem,5vw,4.3rem) !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  margin:0 0 15px !important;
}
@media(max-width:720px){
  .termine-page h1{font-size:2.4rem !important;}
}