:root{--bg:#080909;--panel:#111313;--ink:#f4f0e8;--muted:#b7b2a8;--gold:#d5ad58;--line:#2b2924;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{width:min(var(--max),92vw);margin:auto}
.top{position:sticky;top:0;z-index:50;background:#090a0aeF;border-bottom:1px solid #29261f;backdrop-filter:blur(12px)}
.nav{height:78px;display:flex;align-items:center;gap:28px}
.brand{margin-right:auto;font-weight:800;letter-spacing:.12em}
.brand b{color:var(--gold)}
.links{display:flex;gap:24px;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.ticket{border:1px solid var(--gold);padding:10px 16px;color:var(--gold)}
.menu{display:none;background:none;border:0;color:white;font-size:26px}
.hero2{min-height:78vh;display:grid;align-items:end;background:linear-gradient(90deg,#060707e8 10%,#06070770 55%,#06070740),linear-gradient(0deg,#080909 0%,transparent 35%), url(assets/img/hero) center/cover}
.hero .wrap{padding:110px 0 85px}
.hero{min-height:78vh;display:grid;align-items:end;background:linear-gradient(90deg,#060707e8 10%,#06070770 55%,#06070740),linear-gradient(0deg,#080909 0%,transparent 35%),url(assets/img/hero2.jpg) center/cover}
.hero2 .wrap{padding:110px 0 85px}
.hero3{min-height:78vh;display:grid;align-items:end;background:linear-gradient(90deg,#060707e8 10%,#06070770 55%,#06070740),linear-gradient(0deg,#080909 0%,transparent 35%),url(assets/img/hero1.jpg) center/cover}
.hero3 .wrap{padding:110px 0 85px}
.hero4{min-height:78vh;display:grid;align-items:end;background:linear-gradient(90deg,#060707e8 10%,#06070770 55%,#06070740),linear-gradient(0deg,#080909 0%,transparent 35%),url(assets/img/hero2.jpg) center/cover}
.hero4 .wrap{padding:110px 0 85px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.18em;font-weight:700}
.hero h1{font:700 clamp(46px,8vw,98px)/.92 Arial,sans-serif;max-width:900px;margin:.2em 0}
.hero p{font-size:20px;max-width:650px;color:#e5e0d7}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-block;background:var(--gold);color:#111;padding:13px 20px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.btn.alt{background:transparent;color:var(--ink);border:1px solid #777}
.section{padding:85px 0;border-top:1px solid #171818}
.section h2{font:700 clamp(34px,5vw,58px)/1.05 Arial,sans-serif;margin:0 0 22px}
.lead{font-size:20px;color:#d5d0c8;max-width:820px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.day{background:var(--panel);border:1px solid var(--line);padding:30px;position:relative;overflow:hidden}
.day:before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--gold)}
.day .date{color:var(--gold);font-weight:800;letter-spacing:.1em}
.day h3{font:700 34px Arial,sans-serif;margin:.25em 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#101212;border:1px solid #242522;overflow:hidden}
.card img{width:100%;height:230px;object-fit:cover;filter:saturate(.82)}
.card .pad{padding:20px}
.card h3{font:700 25px Arial,sans-serif;margin:0 0 8px}
.meta{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.split img {
    width: 100%;
    height: auto;
    border: 1px solid #302d25;
}
.prose{max-width:900px}
.prose p{color:#d5d0c8}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.video{background:#111;padding:16px;border:1px solid #292929}
.video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.posters{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.posters img{width:100%;border:1px solid #3b352a}
.legal{white-space:pre-line;color:#d0ccc5}
.footer{padding:45px 0;background:#050606;border-top:1px solid #27231c}
.foot{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;color:#aaa}
.foot a:hover{color:var(--gold)}
@media(max-width:850px){.menu{display:block}
.links{display:none;position:absolute;top:78px;left:0;right:0;background:#0b0c0c;padding:24px 4vw;flex-direction:column;border-bottom:1px solid #333}
.links.open{display:flex}
.nav>.ticket{display:none}
.grid2,
.split,
.video-grid,
.posters{grid-template-columns:1fr}
.cards{grid-template-columns:1fr 1fr}
.hero{min-height:70vh}
.section{padding:60px 0}}@media(max-width:560px){.cards{grid-template-columns:1fr}
.hero h1{font-size:96px}
.brand{font-size:13px}
.card img{height:260px}}


/* Festival-Tageskarten mit individuellen Hintergrundbildern */
.day-freitag,
.day-samstag {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.day-freitag {
  background-image:
    linear-gradient(180deg, rgba(8,10,14,.30) 0%, rgba(8,10,14,.60) 45%, rgba(8,10,14,.94) 100%),
url(assets/img/rockpommels-freitag.jpg);
  background-position: center 35%;
}

.day-samstag {
  background-image:
    linear-gradient(180deg, rgba(8,10,14,.32) 0%, rgba(8,10,14,.62) 45%, rgba(8,10,14,.95) 100%),
url(assets/img/jane-samstag.jpg);
  background-position: center 42%;
}

.day-freitag::before,
.day-samstag::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.32);
}

.day-freitag > *,
.day-samstag > * {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

@media (max-width: 700px) {
  .day-freitag, .day-samstag { min-height: 300px; }
  .day-freitag { background-position: center 30%; }
  .day-samstag { background-position: center 38%; }
}


/* =========================================================
   GKF 2027 – feste Designsprache
   Goldlinie + zweifarbige Überschriften
   ========================================================= */

/* Standard für große Seiten- und Abschnittsüberschriften */
.section-title {
  position: relative;
  margin: 0 0 28px;
  padding-top: 18px;
  color: var(--ink);
  font: 700 clamp(34px,5vw,98px)/1.05 Arial,sans-serif;
  letter-spacing: .035em;
}

.section-title span {
  color: var(--gold);
}

/* kurze Goldlinie als Signatur über Überschriften */
.section-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 3px;
  background: var(--gold);
}

/* Alternative: lange Goldlinie für besondere Boxen/Hinweise */
.gold-line {
	position: relative;
	overflow: hidden;
	background-color: gold;
}

.gold-line::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold);
}

/* zweifarbige Wortmarke auch außerhalb der Navigation */
.gkf-title {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .08em;
}

.gkf-title .gold {
  color: var(--gold);
}

@media (max-width: 560px) {
  .section-title {
    padding-top: 15px;
    margin-bottom: 22px;
    letter-spacing: .02em;
  }
  .section-title::before {
    width: 64px;
  }
}
/* Verhindert überstehenden Text auf Smartphones */
.prose,
.prose p,
.section,
.split {
    min-width: 0;
}

.prose {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Lange Links sicher umbrechen */
.prose a {
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (max-width: 560px) {

    .wrap {
        width: 92vw;
    }

    .prose {
        width: 100%;
        max-width: 100%;
    }

    .prose p {
        max-width: 100%;
    }
}
.section-title {
    margin: 0 0 28px;
    padding-top: 18px;
    position: relative;

    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-title span {
    color: var(--gold);
}

.section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 3px;
    background: var(--gold);
}
.section-title {
    margin: 0 0 28px;
    padding-top: 18px;
    position: relative;

    color: #ffffff;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-title span {
    color: var(--gold);
}

.section-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 3px;
    background: var(--gold);
}