*{box-sizing:border-box}
:root{
  --ink:#171717;
  --paper:#eeeae2;
  --paper2:rgba(239,235,227,.91);
  --line:rgba(20,20,20,.28);
  --muted:#66625d;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#d9d4ca;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  letter-spacing:.015em;
}
.weinberg-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  background-image:
    linear-gradient(90deg,rgba(233,229,220,.20),rgba(233,229,220,.04)),
    url("bilder/weinberg.jpg");
  background-repeat:no-repeat;
  background-position:right 12% center;
  background-size:auto 105vh;
  filter:grayscale(1) contrast(.88);
  opacity:.58;
}
.veil{
  position:fixed; inset:0; z-index:-2;
  background:linear-gradient(90deg,rgba(238,234,226,.97) 0%,rgba(238,234,226,.91) 42%,rgba(238,234,226,.50) 74%,rgba(238,234,226,.22) 100%);
}
.site-header{
  width:min(1180px,calc(100% - 64px));
  margin:auto;
  min-height:112px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand{color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:2px}
.brand-main{font-size:30px;font-weight:400;letter-spacing:.08em}
.brand-sub{font-size:8px;letter-spacing:.23em}
.nav{display:flex;gap:30px}
.nav a,.down{color:inherit;text-decoration:none;font-size:11px;letter-spacing:.16em}
.nav a:hover,.down:hover{opacity:.55}
.menu-button{display:none;background:none;border:0;font:inherit;letter-spacing:.14em}
.hero{
  width:min(1180px,calc(100% - 64px));
  min-height:calc(100vh - 112px);
  margin:auto;
  padding:70px 0 90px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.eyebrow{font-size:10px;letter-spacing:.23em;margin:0 0 34px}
.hero h1{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:clamp(48px,7vw,92px);
  line-height:.94;
  letter-spacing:-.025em;
}
.hero h1 span{font-style:italic;font-weight:400}
.place{font-size:18px;letter-spacing:.35em;margin:27px 0 48px}
.venues{
  display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:34px;
  width:min(760px,75%);
  padding-top:20px;border-top:1px solid var(--line);
}
.venues p{font-size:11px;line-height:1.55;letter-spacing:.06em;margin:0}
.venues strong{font-weight:500;letter-spacing:.12em}
.down{margin-top:auto;padding-top:70px}
.content,.tickets,footer{
  width:min(980px,calc(100% - 64px));
  margin-left:clamp(32px,8vw,150px);
}
.content{padding:60px 0 20px}
.event{
  display:grid;
  grid-template-columns:105px minmax(0,1fr);
  gap:38px;
  padding:54px 0 66px;
  border-top:1px solid var(--line);
  background:linear-gradient(90deg,rgba(238,234,226,.75),rgba(238,234,226,.48),transparent);
}
.date{
  display:flex;flex-direction:column;align-items:flex-start;
  font-size:10px;letter-spacing:.2em;
}
.date strong{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:64px;font-weight:400;letter-spacing:-.06em;line-height:1;
}
.event-body{max-width:640px}
.meta{font-size:10px;letter-spacing:.18em;color:var(--muted);margin:0 0 30px}
.event h2{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(24px,3vw,36px);
  line-height:1.12;font-weight:400;margin:0 0 18px;
}
.event h3{
  font-size:14px;letter-spacing:.16em;font-weight:500;
  margin:34px 0 8px;
}
.event p{font-size:15px;line-height:1.5;margin:5px 0}
.artists{color:#403d39;font-size:14px!important}
.artists.big{font-size:18px!important}
.versus{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;color:var(--muted);margin:24px 0!important}
.subevent{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}
.works{margin-top:26px}
.works p{font-size:14px;margin:8px 0}
.tickets{
  padding:95px 0 110px;
  border-top:1px solid var(--line);
}
.tickets h2{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(28px,4vw,44px);
  font-weight:300;letter-spacing:-.015em;margin:0 0 50px;
}
.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 60px;max-width:850px}
.ticket-grid p,.ticket-note{font-size:14px;line-height:1.65}
.ticket-grid strong{font-weight:500;letter-spacing:.05em}
.ticket-note{margin-top:46px}
a{color:inherit}
footer{
  padding:28px 0 55px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;
}
footer p{font-size:10px;letter-spacing:.1em;margin:0}

@media (max-width:780px){
  body{
    background:#ddd8cf;
    font-size:13px;
  }

  .weinberg-bg{
    background-position:72% top;
    background-size:auto 100vh;
    opacity:.44;
  }

  .veil{
    background:rgba(238,234,226,.72);
  }

  .site-header{
    width:86%;
    max-width:430px;
    min-height:auto;
    margin:0 auto;
    padding:22px 0 12px;
    display:block;
    border-bottom:1px solid rgba(20,20,20,.18);
  }

  .brand{
    display:block;
    margin-bottom:14px;
  }

  .brand-main{
    display:block;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:27px;
    line-height:1;
    letter-spacing:.04em;
  }

  .brand-sub{
    display:block;
    margin-top:5px;
    font-size:6px;
    letter-spacing:.14em;
  }

  .menu-button{
    display:none;
  }

  .nav{
    display:block;
    position:static;
    border:0;
    background:transparent;
    min-width:0;
  }

  .nav a{
    display:block;
    padding:3px 0;
    border:0;
    font-size:9px;
    letter-spacing:.08em;
    text-transform:none;
  }

  .hero{
    width:86%;
    max-width:430px;
    min-height:0;
    margin:0 auto;
    padding:26px 0 42px;
    display:block;
  }

  .eyebrow{
    margin:0 0 14px;
    font-size:8px;
    letter-spacing:.12em;
  }

  .hero h1{
    margin:0 0 10px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:30px;
    line-height:1.05;
    letter-spacing:0;
    font-weight:300;
  }

  .hero h1 br{
    display:none;
  }

  .hero h1 span{
    font-style:normal;
  }

  .place{
    margin:0 0 24px;
    font-size:11px;
    letter-spacing:.12em;
  }

  .venues{
    display:block;
    width:100%;
    padding-top:0;
    border-top:0;
  }

  .venues p{
    margin:0 0 13px;
    font-size:11px;
    line-height:1.4;
    letter-spacing:0;
  }

  .venues strong{
    font-weight:400;
    letter-spacing:.05em;
  }

  .down{
    display:none;
  }

  .content,
  .tickets,
  footer{
    width:86%;
    max-width:430px;
    margin:0 auto;
  }

  .content{
    padding:0 0 20px;
  }

  .event{
    display:block;
    padding:28px 0 34px;
    border-top:1px solid rgba(20,20,20,.18);
    background:transparent;
  }

  .date{
    display:block;
    margin:0 0 12px;
    font-size:12px;
    line-height:1.35;
    letter-spacing:0;
    text-transform:none;
  }

  .date span,
  .date strong{
    display:inline;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:12px;
    font-weight:300;
    letter-spacing:0;
    line-height:1.35;
  }

  .date span:first-child::after{
    content:", ";
  }

  .date strong::after{
    content:".";
  }

  .date span:last-child{
    margin-left:3px;
  }

  .event-body{
    max-width:none;
  }

  .meta{
    margin:0 0 14px;
    font-size:11px;
    line-height:1.45;
    letter-spacing:0;
    color:#333;
  }

  .event h2{
    margin:13px 0 5px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:15px;
    line-height:1.35;
    font-weight:400;
    letter-spacing:0;
  }

  .event h3{
    margin:17px 0 4px;
    font-size:13px;
    line-height:1.35;
    letter-spacing:0;
    font-weight:400;
  }

  .event p,
  .event .artists,
  .event .artists.big,
  .works p{
    margin:3px 0;
    font-size:13px !important;
    line-height:1.45;
    letter-spacing:0;
  }

  .versus{
    margin:10px 0 !important;
    font-family:inherit;
    font-style:normal;
    color:#444;
  }

  .subevent{
    margin-top:20px;
    padding-top:18px;
    border-top:1px solid rgba(20,20,20,.14);
  }

  .works{
    margin-top:13px;
  }

  .tickets{
    padding:38px 0 48px;
    border-top:1px solid rgba(20,20,20,.18);
  }

  .tickets .eyebrow{
    margin-bottom:8px;
  }

  .tickets h2{
    margin:0 0 20px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:20px;
    line-height:1.2;
    letter-spacing:0;
    font-weight:300;
  }

  .ticket-grid{
    display:block;
  }

  .ticket-grid p,
  .ticket-note{
    margin:0 0 16px;
    font-size:12px;
    line-height:1.5;
  }

  footer{
    padding:22px 0 38px;
    display:block;
    border-top:1px solid rgba(20,20,20,.18);
  }

  footer p{
    margin:0 0 5px;
    font-size:9px;
    line-height:1.4;
    letter-spacing:.04em;
  }
}


@media (max-width:780px){
  body{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.45;
  }

  .brand-main{
    font-size:24px;
    font-weight:300;
    letter-spacing:.03em;
  }

  .brand-sub{
    font-size:7px;
    line-height:1.4;
  }

  .nav a{
    font-size:10px;
    line-height:1.4;
  }

  .eyebrow{
    font-size:9px;
    line-height:1.4;
  }

  .hero h1{
    font-size:26px;
    line-height:1.12;
    font-weight:300;
    letter-spacing:0;
  }

  .place{
    font-size:11px;
    line-height:1.4;
  }

  .venues p{
    font-size:12px;
    line-height:1.45;
  }

  .date,
  .date span,
  .date strong{
    font-size:12px;
    line-height:1.4;
    font-weight:300;
  }

  .meta{
    font-size:11px;
    line-height:1.45;
  }

  .event h2{
    font-size:18px;
    line-height:1.25;
    font-weight:400;
    margin:12px 0 6px;
  }

  .event h3{
    font-size:14px;
    line-height:1.35;
    font-weight:400;
    margin:16px 0 4px;
  }

  .event p,
  .event .artists,
  .event .artists.big,
  .works p{
    font-size:14px !important;
    line-height:1.5;
  }

  .tickets h2{
    font-size:20px;
    line-height:1.25;
    font-weight:300;
  }

  .ticket-grid p,
  .ticket-note{
    font-size:13px;
    line-height:1.5;
  }

  footer p{
    font-size:10px;
    line-height:1.45;
  }
}
\n\n/* Partner- und Fördererlogos */\n.logos{\n  width:min(980px,calc(100% - 64px));\n  margin-left:clamp(32px,8vw,150px);\n  padding:42px 0 34px;\n  border-top:1px solid var(--line);\n}\n.logo-grid{\n  display:flex;\n  align-items:center;\n  flex-wrap:wrap;\n  gap:28px 38px;\n  max-width:900px;\n}\n.logo-item{\n  display:flex;\n  align-items:center;\n  justify-content:flex-start;\n  min-height:74px;\n}\n.logo-item img{\n  display:block;\n  width:auto;\n  max-width:100%;\n  height:auto;\n  object-fit:contain;\n}\n.logo-daskino img{max-width:190px;max-height:70px}\n.logo-land img{max-width:150px;max-height:92px}\n.logo-stadt img{max-width:235px;max-height:58px}\n.logo-khg img{max-width:210px;max-height:64px}\n\n@media (max-width:780px){\n  .logos{\n    width:86%;\n    max-width:430px;\n    margin:0 auto;\n    padding:28px 0 24px;\n  }\n  .logo-grid{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:20px 18px;\n    align-items:center;\n  }\n  .logo-item{\n    min-height:62px;\n    justify-content:center;\n  }\n  .logo-daskino img{max-width:145px;max-height:54px}\n  .logo-land img{max-width:115px;max-height:76px}\n  .logo-stadt img{max-width:155px;max-height:42px}\n  .logo-khg img{max-width:145px;max-height:50px}\n}\n\n@media (max-width:420px){\n  .logo-grid{grid-template-columns:1fr}\n  .logo-item{min-height:54px}\n  .logo-daskino img{max-width:170px}\n  .logo-land img{max-width:125px}\n  .logo-stadt img{max-width:200px}\n  .logo-khg img{max-width:165px}\n}\n

/* ===== FINAL: Partner-/Fördererlogos ===== */
.logos {
  width: min(1160px, calc(100% - 64px));
  margin: 44px auto 58px;
  padding-top: 38px;
  border-top: 1px solid rgba(20,20,20,.24);
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 55px;
}

.logo-item {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* optisch ausgeglichene Größen */
.logo-daskino img {
  max-width: 190px;
  max-height: 60px;
}
.logo-land img {
  max-width: 175px;
  max-height: 78px;
}
.logo-stadt img {
  max-width: 230px;
  max-height: 58px;
}
.logo-khg img {
  max-width: 185px;
  max-height: 64px;
}

@media (max-width: 780px) {
  .logos {
    width: 86%;
    margin: 28px auto 38px;
    padding-top: 24px;
  }

  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 22px;
  }

  .logo-item {
    height: 48px;
  }

  .logo-daskino img {
    max-width: 90px;
    max-height: 31px;
  }
  .logo-land img {
    max-width: 82px;
    max-height: 40px;
  }
  .logo-stadt img {
    max-width: 108px;
    max-height: 29px;
  }
  .logo-khg img {
    max-width: 88px;
    max-height: 32px;
  }
}


/* ===== MOBILE ORIENTATION FIX ===== */

/* verhindert Größen-Sprünge beim Drehen auf iPhone/iPad */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/* Bilder und Logos dürfen nie über ihren Container hinauswachsen */
img {
  max-width: 100%;
  height: auto;
}

/* PORTRAIT */
@media (max-width: 780px) and (orientation: portrait) {
  .weinberg-bg {
    background-size: auto 88svh !important;
    background-position: 70% top !important;
  }

  .site-header,
  .hero,
  .content,
  .tickets,
  footer,
  .logos {
    width: 86% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero {
    min-height: auto !important;
  }

  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .logo-item {
    min-width: 0 !important;
  }
}

/* LANDSCAPE */
@media (max-width: 950px) and (orientation: landscape) {
  .weinberg-bg {
    background-size: auto 125svh !important;
    background-position: 82% center !important;
  }

  .site-header,
  .hero,
  .content,
  .tickets,
  footer,
  .logos {
    width: min(88%, 760px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }

  .hero h1 {
    font-size: 28px !important;
    line-height: 1.08 !important;
  }

  .venues {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .event {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .logo-item {
    height: 52px !important;
    min-width: 0 !important;
  }

  .logo-daskino img {
    max-width: 105px !important;
    max-height: 34px !important;
  }

  .logo-land img {
    max-width: 98px !important;
    max-height: 44px !important;
  }

  .logo-stadt img {
    max-width: 125px !important;
    max-height: 31px !important;
  }

  .logo-khg img {
    max-width: 102px !important;
    max-height: 35px !important;
  }
}

/* Nach Browser-Drehung flexibel bleiben */
@supports (height: 100dvh) {
  @media (max-width: 950px) {
    .weinberg-bg {
      min-height: 100dvh;
    }
  }
}


/* ===== FINAL MOBILE LOGO SIZE ===== */
@media (max-width:780px) and (orientation:portrait) {
  .logos {
    width:86% !important;
    margin:28px auto 38px !important;
    padding-top:24px !important;
  }

  .logo-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:22px 26px !important;
    align-items:center !important;
    justify-items:center !important;
  }

  .logo-item {
    width:100% !important;
    height:42px !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .logo-item img {
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    margin:auto !important;
  }

  .logo-daskino img { max-width:78px !important; max-height:25px !important; }
  .logo-land img    { max-width:72px !important; max-height:34px !important; }
  .logo-stadt img   { max-width:92px !important; max-height:24px !important; }
  .logo-khg img     { max-width:76px !important; max-height:28px !important; }
}

/* iPhone quer: klein, alle vier nebeneinander */
@media (max-width:950px) and (orientation:landscape) {
  .logo-grid {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .logo-item { height:44px !important; }
  .logo-daskino img { max-width:86px !important; max-height:27px !important; }
  .logo-land img    { max-width:80px !important; max-height:36px !important; }
  .logo-stadt img   { max-width:100px !important; max-height:26px !important; }
  .logo-khg img     { max-width:84px !important; max-height:29px !important; }
}


/* ===== APPROVED LOGO PROPORTIONS ===== */
@media (min-width: 781px) {
  .logos {
    width: min(1160px, calc(100% - 64px)) !important;
    margin: 44px auto 58px !important;
    padding-top: 38px !important;
  }
  .logo-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 48px !important;
    align-items: center !important;
  }
  .logo-item { height: 86px !important; }
  .logo-daskino img { max-width: 205px !important; max-height: 64px !important; }
  .logo-land img    { max-width: 185px !important; max-height: 82px !important; }
  .logo-stadt img   { max-width: 240px !important; max-height: 60px !important; }
  .logo-khg img     { max-width: 195px !important; max-height: 68px !important; }
}

@media (max-width: 780px) and (orientation: portrait) {
  .logos {
    width: 86% !important;
    margin: 30px auto 40px !important;
    padding-top: 26px !important;
  }
  .logo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 28px 24px !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .logo-item {
    width: 100% !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .logo-daskino img { max-width: 118px !important; max-height: 38px !important; }
  .logo-land img    { max-width: 105px !important; max-height: 50px !important; }
  .logo-stadt img   { max-width: 132px !important; max-height: 34px !important; }
  .logo-khg img     { max-width: 108px !important; max-height: 40px !important; }
}

@media (max-width: 950px) and (orientation: landscape) {
  .logo-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 22px !important;
  }
  .logo-item { height: 54px !important; }
  .logo-daskino img { max-width: 112px !important; max-height: 35px !important; }
  .logo-land img    { max-width: 102px !important; max-height: 46px !important; }
  .logo-stadt img   { max-width: 132px !important; max-height: 33px !important; }
  .logo-khg img     { max-width: 108px !important; max-height: 38px !important; }
}

/* ===== PROGRAMMBILDER ===== */
.venue-photo,
.artist-photo {
  margin: 16px 0 22px;
}
.venue-photo img,
.artist-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.venue-photo {
  width: 185px;
  max-width: 38%;
}
.venue-photo-wide {
  width: 240px;
  max-width: 46%;
}
.artist-photo-single {
  width: 160px;
  max-width: 34%;
}
.artist-photo figcaption {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: #55514c;
}
.artist-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin: 18px 0 22px;
}
.artist-gallery .artist-photo {
  margin: 0;
  width: auto;
  max-width: none;
}
.artist-gallery .artist-photo img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 780px) and (orientation: portrait) {
  .venue-photo {
    width: 130px;
    max-width: 46%;
    margin: 12px 0 18px;
  }
  .venue-photo-wide {
    width: 165px;
    max-width: 56%;
  }
  .artist-photo-single {
    width: 120px;
    max-width: 42%;
  }
  .artist-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 18px;
  }
  .artist-photo figcaption {
    font-size: 9px;
    line-height: 1.3;
  }
}

@media (max-width: 950px) and (orientation: landscape) {
  .venue-photo { width: 145px; max-width: 28%; }
  .venue-photo-wide { width: 190px; max-width: 34%; }
  .artist-photo-single { width: 125px; max-width: 25%; }
  .artist-gallery { gap: 12px; }
}


/* ===== ATMOSPHERIC FESTIVAL DESIGN 2026 ===== */
:root{
  --warm-paper:#f1ece3;
  --warm-paper-deep:#e7ded0;
  --warm-ink:#17130f;
  --gold:#b98242;
  --gold-soft:rgba(185,130,66,.42);
  --cream:#f5ede2;
}

body{
  background:var(--warm-paper);
  color:var(--warm-ink);
}

.weinberg-bg{
  opacity:.22 !important;
  filter:grayscale(1) sepia(.18) contrast(.88) !important;
}

.veil{
  background:linear-gradient(
    90deg,
    rgba(241,236,227,.96) 0%,
    rgba(241,236,227,.88) 48%,
    rgba(241,236,227,.58) 78%,
    rgba(241,236,227,.36) 100%
  ) !important;
}

.site-header{
  border-bottom-color:rgba(80,55,30,.22) !important;
}

.brand-main,
.nav a{
  letter-spacing:.12em;
}

.hero{
  position:relative;
  isolation:isolate;
  width:100% !important;
  max-width:none !important;
  min-height:calc(100svh - 112px) !important;
  margin:0 !important;
  padding:clamp(72px,9vh,120px) max(32px,calc((100vw - 1180px)/2)) 84px !important;
  color:#f5eee4;
  overflow:hidden;
  justify-content:flex-start !important;
  background:
    linear-gradient(90deg,rgba(14,12,10,.56) 0%,rgba(20,14,8,.35) 44%,rgba(15,10,5,.08) 72%,rgba(10,8,6,.18) 100%),
    linear-gradient(0deg,rgba(14,10,7,.46) 0%,rgba(14,10,7,.03) 46%),
    url("bilder/al-gazoulia.jpg") center 50% / cover no-repeat;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.16);
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:35%;
  z-index:-1;
  background:linear-gradient(to bottom,transparent,rgba(18,12,8,.38));
  pointer-events:none;
}

.hero .eyebrow{
  color:#f0dfc8;
  margin-bottom:28px;
}

.hero h1{
  max-width:780px;
  font-size:clamp(56px,7.6vw,108px) !important;
  line-height:.9 !important;
  color:#fff7ec;
  text-shadow:0 2px 18px rgba(0,0,0,.14);
}

.hero h1 span{
  color:#f2d4aa;
  font-style:normal !important;
  font-weight:300 !important;
}

.hero .place{
  color:#f2ddc2;
  margin-top:24px;
}

.hero .venues{
  margin-top:4px;
  padding-top:22px;
  border-top:1px solid rgba(245,237,226,.42);
  color:#f9f1e7;
}

.hero .venues strong{
  color:#f3d0a3;
}

.hero .down{
  color:#f4d9b5;
  margin-top:auto;
}

.content{
  padding-top:86px !important;
}

.event{
  background:
    linear-gradient(90deg,rgba(244,238,228,.93),rgba(239,231,218,.76),rgba(239,231,218,.10)) !important;
  border-top-color:rgba(87,59,29,.23) !important;
}

.date strong{
  color:#8e6235;
}

.meta{
  color:#755f49 !important;
}

.event h2,
.event h3{
  color:#24180f;
}

.subevent{
  border-top-color:rgba(117,82,45,.24) !important;
}

.film-still{
  width:min(360px,74%);
  margin:16px 0 20px;
}

.film-still img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center;
  border-radius:2px;
  box-shadow:0 10px 28px rgba(64,39,18,.14);
}

.venue-photo img,
.artist-photo img{
  box-shadow:0 8px 24px rgba(70,45,20,.10);
}

.artist-photo figcaption{
  color:#6f5b48;
}

.tickets{
  border-top-color:rgba(87,59,29,.23) !important;
}

.tickets .eyebrow,
.tickets h2{
  color:#2d2016;
}

.logos{
  border-top-color:rgba(87,59,29,.23) !important;
}

footer{
  border-top-color:rgba(87,59,29,.23) !important;
}

@media (max-width:780px){
  .site-header{
    width:86% !important;
    max-width:430px !important;
  }

  .hero{
    width:100% !important;
    max-width:none !important;
    min-height:72svh !important;
    padding:48px 7% 48px !important;
    background:
      linear-gradient(180deg,rgba(12,9,7,.24) 0%,rgba(16,10,7,.12) 34%,rgba(14,9,5,.48) 100%),
      url("bilder/al-gazoulia.jpg") center 50% / cover no-repeat !important;
  }

  .hero h1{
    font-size:clamp(44px,13vw,68px) !important;
    line-height:.93 !important;
    margin-bottom:12px !important;
  }

  .hero h1 br{
    display:block !important;
  }

  .hero .place{
    font-size:11px !important;
    letter-spacing:.19em !important;
    margin:18px 0 30px !important;
  }

  .hero .venues{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:min(88%,340px) !important;
    border-top:1px solid rgba(245,237,226,.36) !important;
  }

  .hero .venues p{
    color:#f9f1e7 !important;
    margin:0 0 7px !important;
    font-size:11px !important;
  }

  .content{
    padding-top:38px !important;
  }

  .event{
    background:rgba(244,238,228,.70) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .film-still{
    width:min(58vw,215px) !important;
    margin:14px 0 18px !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .hero{
    min-height:88svh !important;
    padding:34px 7% 40px !important;
    background-position:center 46% !important;
  }

  .hero h1{
    font-size:48px !important;
  }

  .hero .venues{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:min(760px,90%) !important;
  }
}


/* ===== DEZENTERE AL-GAZOULIA-STIMMUNG ===== */
.hero{
  min-height:72svh !important;
  color:#f4eee6 !important;
  background:
    linear-gradient(90deg,rgba(20,16,12,.52) 0%,rgba(28,21,15,.34) 42%,rgba(28,21,15,.16) 72%,rgba(20,16,12,.22) 100%),
    linear-gradient(0deg,rgba(19,14,10,.34) 0%,rgba(19,14,10,.03) 58%),
    #6f655a !important;
  position:relative !important;
}

.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:6% 8% 4% 34%;
  background:url("bilder/al-gazoulia.jpg") center center / contain no-repeat;
  opacity:.72;
  filter:saturate(.88) contrast(.92) brightness(.93);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 68% 58%, rgba(207,149,89,.16), transparent 28%),
    linear-gradient(90deg,rgba(26,20,15,.44),rgba(26,20,15,.08) 65%,rgba(26,20,15,.20));
}

.hero h1{
  font-size:clamp(48px,6.2vw,88px) !important;
  line-height:.94 !important;
}

.hero .venues{
  width:min(700px,68%) !important;
}

@media (max-width:780px) and (orientation:portrait){
  .hero{
    min-height:68svh !important;
    padding:44px 7% 42px !important;
    background:#756b61 !important;
  }

  .hero::before{
    inset:8% 6% 8% 27%;
    background-size:contain !important;
    background-position:center 48% !important;
    opacity:.64 !important;
  }

  .hero::after{
    background:
      linear-gradient(90deg,rgba(25,19,14,.54) 0%,rgba(25,19,14,.26) 52%,rgba(25,19,14,.08) 100%) !important;
  }

  .hero h1{
    font-size:clamp(38px,11.5vw,56px) !important;
  }

  .hero .venues{
    width:min(88%,330px) !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .hero{
    min-height:74svh !important;
    background:#756b61 !important;
  }

  .hero::before{
    inset:4% 10% 5% 42%;
    opacity:.68 !important;
  }
}


/* ===== SPIELORTE / DATEN GRÖSSER ===== */
.hero .venues p{
  font-size:15px !important;
  line-height:1.45 !important;
  margin-bottom:18px !important;
}

.hero .venues strong{
  font-size:16px !important;
  letter-spacing:.08em !important;
  font-weight:500 !important;
}

@media (max-width:780px){
  .hero .venues p{
    font-size:13px !important;
    line-height:1.45 !important;
    margin-bottom:14px !important;
  }

  .hero .venues strong{
    font-size:14px !important;
    letter-spacing:.06em !important;
  }
}


/* ===== SUFI-BILD WIEDER GROSS, ABER RUHIG GEFILTERT ===== */
.hero{
  min-height:calc(100svh - 112px) !important;
  background:#6b6259 !important;
  overflow:hidden !important;
}

.hero::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:0 !important;
  background:url("bilder/al-gazoulia.jpg") center 50% / cover no-repeat !important;
  opacity:.82 !important;
  filter:grayscale(.18) sepia(.14) saturate(.72) contrast(.88) brightness(.82) !important;
  transform:scale(1.015);
}

.hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  height:auto !important;
  background:
    linear-gradient(90deg,
      rgba(18,14,11,.57) 0%,
      rgba(18,14,11,.39) 38%,
      rgba(18,14,11,.16) 68%,
      rgba(18,14,11,.18) 100%),
    linear-gradient(0deg,
      rgba(18,13,9,.43) 0%,
      rgba(18,13,9,.04) 58%,
      rgba(18,13,9,.10) 100%) !important;
}

@media (max-width:780px) and (orientation:portrait){
  .hero{
    min-height:78svh !important;
  }

  .hero::before{
    inset:0 !important;
    background-size:cover !important;
    background-position:center 48% !important;
    opacity:.78 !important;
    filter:grayscale(.18) sepia(.14) saturate(.70) contrast(.88) brightness(.80) !important;
    transform:none !important;
  }

  .hero::after{
    background:
      linear-gradient(90deg,
        rgba(17,13,10,.57) 0%,
        rgba(17,13,10,.32) 55%,
        rgba(17,13,10,.13) 100%),
      linear-gradient(0deg,
        rgba(17,12,8,.40) 0%,
        rgba(17,12,8,.04) 62%) !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .hero{
    min-height:88svh !important;
  }
  .hero::before{
    inset:0 !important;
    background-size:cover !important;
    background-position:center 50% !important;
    opacity:.80 !important;
    transform:none !important;
  }
}


/* ===== SUFI-BILD HELLER / POSITIVER ===== */
.hero{
  background:#b7aa98 !important;
}

.hero::before{
  opacity:.92 !important;
  filter:
    grayscale(.05)
    sepia(.07)
    saturate(.92)
    contrast(.90)
    brightness(1.08) !important;
}

.hero::after{
  background:
    linear-gradient(90deg,
      rgba(44,31,20,.34) 0%,
      rgba(44,31,20,.19) 38%,
      rgba(255,240,218,.05) 70%,
      rgba(255,236,207,.08) 100%),
    linear-gradient(0deg,
      rgba(50,33,18,.22) 0%,
      rgba(255,239,215,.03) 58%,
      rgba(255,244,225,.08) 100%) !important;
}

.hero h1{
  color:#fffaf2 !important;
  text-shadow:0 1px 12px rgba(43,27,14,.20) !important;
}

.hero h1 span,
.hero .place,
.hero .eyebrow,
.hero .venues strong,
.hero .down{
  color:#ffe2b8 !important;
}

.hero .venues p{
  color:#fff9ef !important;
}

@media (max-width:780px) and (orientation:portrait){
  .hero::before{
    opacity:.92 !important;
    filter:
      grayscale(.04)
      sepia(.06)
      saturate(.94)
      contrast(.90)
      brightness(1.10) !important;
  }

  .hero::after{
    background:
      linear-gradient(90deg,
        rgba(45,30,18,.34) 0%,
        rgba(45,30,18,.17) 55%,
        rgba(255,239,216,.04) 100%),
      linear-gradient(0deg,
        rgba(48,31,17,.20) 0%,
        rgba(255,240,218,.03) 62%) !important;
  }
}


/* ===== FESTIVALTITEL NEBEN DATUM ===== */
.hero-title-row{
  display:flex;
  align-items:center;
  gap:clamp(42px,7vw,110px);
  width:100%;
}

.festival-title{
  max-width:430px;
  font-size:clamp(25px,3.2vw,47px);
  line-height:1.08;
  font-weight:300;
  letter-spacing:.01em;
  color:#fff4e5;
  text-shadow:0 1px 12px rgba(43,27,14,.18);
}

@media (max-width:780px) and (orientation:portrait){
  .hero-title-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    align-items:center;
    gap:18px;
  }

  .festival-title{
    font-size:clamp(19px,6vw,27px);
    line-height:1.1;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .hero-title-row{
    display:flex;
    gap:44px;
  }

  .festival-title{
    font-size:28px;
  }
}


/* ===== FESTIVALTITEL WEICHER / POETISCHER ===== */
.festival-title{
  font-family:"Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:clamp(29px,3.7vw,53px) !important;
  line-height:1.04 !important;
  letter-spacing:.005em !important;
  color:#fff0dc !important;
  text-shadow:0 1px 14px rgba(64,38,17,.16) !important;
}

@media (max-width:780px) and (orientation:portrait){
  .festival-title{
    font-size:clamp(22px,7vw,31px) !important;
    line-height:1.06 !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .festival-title{
    font-size:32px !important;
  }
}


/* ===== DATUM ETWAS KLEINER ===== */
.hero h1{
  font-size:clamp(40px,5vw,70px) !important;
  line-height:.96 !important;
}

@media (max-width:780px) and (orientation:portrait){
  .hero h1{
    font-size:clamp(31px,9vw,44px) !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .hero h1{
    font-size:clamp(34px,6vw,52px) !important;
  }
}


/* ===== FESTIVALTITEL KLAR IM VORDERGRUND ===== */
.festival-title{
  max-width:560px !important;
  font-size:clamp(38px,5.2vw,72px) !important;
  line-height:.98 !important;
  font-weight:400 !important;
  letter-spacing:-.012em !important;
  color:#fff4e6 !important;
  text-shadow:
    0 2px 18px rgba(58,34,16,.20),
    0 1px 3px rgba(58,34,16,.14) !important;
}

.hero-title-row{
  gap:clamp(36px,5vw,78px) !important;
  align-items:center !important;
}

@media (max-width:780px) and (orientation:portrait){
  .hero-title-row{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr) !important;
    gap:12px !important;
  }

  .festival-title{
    font-size:clamp(28px,8.7vw,40px) !important;
    line-height:1 !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .festival-title{
    font-size:clamp(36px,5.7vw,54px) !important;
  }
}


/* ===== FESTIVALTITEL ETWAS KLEINER ===== */
.festival-title{
  font-size:clamp(34px,4.5vw,62px) !important;
}

@media (max-width:780px) and (orientation:portrait){
  .festival-title{
    font-size:clamp(25px,7.7vw,35px) !important;
  }
}

@media (max-width:950px) and (orientation:landscape){
  .festival-title{
    font-size:clamp(32px,5vw,47px) !important;
  }
}