: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('../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('../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('../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('../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(24px,7.5vw,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 {
  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
}
.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('../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('../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
   ========================================================= */

/* Gemeinsame Überschriften: eine zentrale Definition. */
.section-title {
  position: relative;
  margin: 0 0 28px;
  padding-top: 18px;
  color: #ffffff;
  font: 800 clamp(2rem, 4vw, 3.5rem)/1.05 Arial, sans-serif;
  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);
}
/* Die längste Titelzeile FESTIVAL 2027 passt auch auf kleine Displays.
   Desktopgröße und bisherige Zeilenhöhe bleiben erhalten. */
.hero h1.section-title {
  font-size: clamp(24px, 7.5vw, 98px);
  font-weight: 700;
  line-height: .92;
}

/* 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%;
    }
}