/* ==========================================================================
   Tombstone Rock Festival - Sektionen und Seitenbausteine
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.tr-hero{
  position:relative;
  padding-block:clamp(50px,9vw,120px);
  text-align:center;
  overflow:hidden;
  background:var(--tr-bg);
}
.tr-hero__media{position:absolute;inset:0;z-index:0}
.tr-hero__media img,.tr-hero__media video{width:100%;height:100%;object-fit:cover}
.tr-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.25) 0%,rgba(37,42,51,.6) 100%);
}
.tr-hero > .tr-row{position:relative;z-index:2}
.tr-hero__kicker{
  font-family:var(--tr-display);
  color:var(--tr-white);
  font-size:clamp(24px,4vw,37px);
  line-height:1.15;
  margin:0 0 .3em;
}
.tr-hero h1{margin:0 0 .18em;text-shadow:0 4px 26px rgba(0,0,0,.55)}
.tr-hero__claim{
  font-family:var(--tr-display);
  color:var(--tr-white);
  font-size:clamp(20px,3.2vw,35px);
  line-height:1.1;margin:0 0 clamp(26px,4vw,44px);
}

/* Kleiner Bildkopf fuer Unterseiten */
.tr-pagehead{
  background:var(--tr-bg);
  padding-block:clamp(46px,7vw,92px);
  text-align:center;
  position:relative;overflow:hidden;
}
.tr-pagehead__media{position:absolute;inset:0;z-index:0}
.tr-pagehead__media img{width:100%;height:100%;object-fit:cover}
.tr-pagehead::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(0,0,0,.35) 0%,rgba(37,42,51,.78) 100%);
}
.tr-pagehead > .tr-row{position:relative;z-index:2}
.tr-pagehead h1{margin:0;text-shadow:0 4px 26px rgba(0,0,0,.55)}

/* --- Abschnitt mit Hintergrundbild --------------------------------------- */
.tr-bgsection{
  position:relative;
  background:var(--tr-bg) center/cover no-repeat;
  padding-block:clamp(60px,8vw,110px);
  overflow:hidden;
}
.tr-bgsection::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(37,42,51,.88) 0%,rgba(37,42,51,.55) 60%,rgba(37,42,51,.35) 100%);
}
.tr-bgsection > .tr-row{position:relative;z-index:1}
.tr-bgsection__text{max-width:66%}
@media (max-width:860px){.tr-bgsection__text{max-width:100%}}
.tr-bgsection strong{color:var(--tr-white)}

/* Welle als Uebergang in den Sandbereich */
.tr-wave{display:block;width:100%;height:clamp(50px,8vw,120px);margin-bottom:-1px}
.tr-wave path{fill:var(--tr-sand)}
.tr-wave--up path{fill:var(--tr-bg)}

/* --- Infospalten (Tickets / Camping / Anfahrt) --------------------------- */
.tr-info h3{
  font-family:var(--tr-display);
  color:#000;
  font-size:clamp(34px,5vw,58px);
  margin:0 0 .35em;
}
.tr-info p{margin:0 0 1.2em}
.tr-info--center{text-align:center}
.tr-ticketnote{font-weight:700;color:#1b1d23}

/* Plakat und Teaser-Video (hochkant 9:16) nebeneinander */
.tr-teaser{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;justify-content:center}
@media (min-width:860px){.tr-teaser{grid-template-columns:minmax(0,640px) auto}}
.tr-teaser__main{display:grid;gap:clamp(22px,3vw,32px);justify-items:start}
.tr-teaser__plakat{width:100%;height:auto;border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.tr-teaser__video{width:clamp(200px,62vw,280px);justify-self:center}
.tr-teaser__video video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  border:6px solid var(--tr-dark-text);border-radius:18px;
  box-shadow:0 18px 44px rgba(0,0,0,.32);background:var(--tr-dark-text);
}

/* --- News-Raster --------------------------------------------------------- */
.tr-newsgrid{display:grid;gap:clamp(22px,3vw,34px)}
@media (min-width:640px){.tr-newsgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tr-newsgrid{grid-template-columns:repeat(3,1fr)}}

.tr-card{
  display:flex;flex-direction:column;
  background:rgba(37,42,51,.055);
  border:1px solid rgba(0,0,0,.14);
  border-radius:3px;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.tr-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.25)}
.tr-card__media{display:block;aspect-ratio:3/2;overflow:hidden;background:#1d2029}
.tr-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tr-card:hover .tr-card__media img{transform:scale(1.05)}
.tr-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.tr-card__title{
  font-family:var(--tr-display);font-size:clamp(23px,2.4vw,30px);
  line-height:1.05;margin:0;color:#000;
}
.tr-card__title a{color:inherit}
.tr-card__title a:hover{color:var(--tr-accent-solid)}
.tr-card__date{font-size:13px;color:#5d5a52;margin:0}
.tr-card__sep{border:0;border-top:1px solid rgba(0,0,0,.2);margin:0}
.tr-card__more{
  font-family:var(--tr-display);font-size:18px;color:var(--tr-accent-solid);
  margin-top:auto;align-self:flex-start;
}
.tr-card__more:hover{color:#000}

/* Dunkle Variante (News-Uebersicht, Archiv) */
.tr-section--dark .tr-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
.tr-section--dark .tr-card__title{color:var(--tr-white)}
.tr-section--dark .tr-card__title a:hover{color:var(--tr-accent-solid)}
.tr-section--dark .tr-card__date{color:var(--tr-text)}
.tr-section--dark .tr-card__sep{border-color:rgba(255,255,255,.14)}

/* --- Countdown ----------------------------------------------------------- */
.tr-countdown__sub{
  font-family:var(--tr-display);color:var(--tr-white);
  font-size:clamp(24px,3vw,34px);margin:0 0 .15em;
}
.tr-countdown__head{
  font-family:var(--tr-body);color:var(--tr-text);font-size:17px;margin:0 0 clamp(26px,4vw,40px);
}
.tr-dashes{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,34px);justify-content:center;margin:0;padding:0;list-style:none}
.tr-dash{text-align:center;min-width:78px}
.tr-dash__num{
  font-family:var(--tr-display);color:var(--tr-accent);
  font-size:clamp(42px,7vw,76px);line-height:1;display:block;
  font-variant-numeric:tabular-nums;
}
.tr-dash__label{
  font-family:var(--tr-body);color:var(--tr-text);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:8px;
}

/* --- Bandkarten ---------------------------------------------------------- */
.tr-bands{display:grid;gap:clamp(30px,4vw,54px)}
@media (min-width:700px){.tr-bands{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.tr-bands{grid-template-columns:repeat(3,1fr)}}

.tr-band{display:flex;flex-direction:column;gap:16px}
.tr-band__img{
  display:block;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#1d2029;
  border:1px solid rgba(255,255,255,.1);
}
.tr-band__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
.tr-band__img:hover img{transform:scale(1.05);filter:brightness(1.08)}
.tr-band__name{
  font-family:var(--tr-display);color:var(--tr-white);
  font-size:clamp(26px,3vw,36px);line-height:1;margin:0;
}
.tr-band__desc{font-size:14.5px;line-height:1.85;margin:0}
.tr-band__links{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.tr-band__links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:3px;
  background:rgba(255,255,255,.08);color:var(--tr-mint);
}
.tr-band__links a:hover{background:var(--tr-accent);color:#fff}
.tr-band__links svg{width:18px;height:18px;fill:currentColor}

.tr-dayhead{
  font-family:var(--tr-display);color:var(--tr-accent);
  font-size:clamp(34px,5vw,58px);margin:clamp(40px,6vw,80px) 0 clamp(22px,3vw,36px);
}
.tr-dayhead:first-child{margin-top:0}

/* --- Galerie ------------------------------------------------------------- */
.tr-gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));list-style:none;margin:0;padding:0}
.tr-gallery img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:3px}

/* --- Partnerliste -------------------------------------------------------- */
/* --- Bildschirmhoher Bildkopf (Partner), Menue liegt darueber ----------- */
.tr-vollbild{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  background:var(--tr-bg) center/cover no-repeat;
  text-align:center;
  padding-block:130px 60px;
}
.tr-vollbild__titel{
  font-style:italic;
  font-size:clamp(50px,8.4vw,110px);
  line-height:1.2;
  margin:0;
}
.tr-vollbild__zitat{
  font-family:var(--tr-display);
  font-style:italic;
  color:var(--tr-white);
  font-size:clamp(17px,1.84vw,24px);
  line-height:1.58;
  margin:0;
}

/* --- Partnerseite 1:1 nach dem Original ---------------------------------- */
.tr-partnerseite{background:#323844;padding-bottom:62px}
.tr-partnerseite__balken{
  width:40%;height:16px;margin:0 auto 75px;
  background:#ec4858;
}
.tr-partnerseite__intro{max-width:815px;margin-inline:auto;text-align:center}
.tr-partnerseite__intro h2{font-size:clamp(42px,4.6vw,60px);line-height:1;margin:0 0 30px}
.tr-partnerseite__sep{
  width:100%;max-width:300px;margin:0 auto 40px;
  border:0;border-top:2px solid #444e63;
}
.tr-partnerseite__intro p{color:#f9f9f9;font-size:15px;line-height:32px;margin:0}
.tr-partnerseite a{color:#ec4858}
.tr-partnerseite a:hover{color:var(--tr-white)}

.tr-partnerseite__spalten{
  display:grid;gap:30px 50px;align-items:start;
  margin-top:40px;
}
@media (min-width:1024px){.tr-partnerseite__spalten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tr-partnerliste{list-style:none;margin:30px 0 0;padding:0}
.tr-partnerliste li{color:var(--tr-white);font-size:17px;line-height:32px;margin:0 0 20px}
.tr-partnerliste li:last-child{margin-bottom:0}
.tr-partnerliste--rechts{text-align:right}

/* Karussell: ein Bild, Hoehe passt sich dem Bild an */
.tr-karussell{position:relative;border:1px solid #e9eaee}
.tr-karussell__fenster{overflow:hidden;transition:height .5s ease}
.tr-karussell__band{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:flex-start;gap:34px;
  transition:transform .5s ease;
}
.tr-karussell__folie{flex:0 0 100%;min-width:0}
.tr-karussell__folie img{display:block;width:100%;height:auto}
/* Kleine Vorlage auf schwarzem Grund, hoechstens 1,3-fach vergroessert */
.tr-karussell__folie--klein{background:#000;padding:24px 0}
.tr-karussell__folie--klein img{width:auto;max-width:min(100%,260px);margin-inline:auto}
.tr-karussell__pfeil{
  position:absolute;top:0;bottom:0;width:30px;
  display:flex;align-items:center;justify-content:center;
  border:0;padding:0;cursor:pointer;
  background:rgba(36,41,50,.6);color:var(--tr-white);opacity:.8;
}
.tr-karussell__pfeil:hover,.tr-karussell__pfeil:focus-visible{opacity:1}
.tr-karussell__pfeil--zurueck{left:0}
.tr-karussell__pfeil--weiter{right:0}
.tr-karussell__pfeil svg{width:18px;height:18px;fill:currentColor}
@media (prefers-reduced-motion:reduce){
  .tr-karussell__fenster,.tr-karussell__band{transition:none}
}

/* --- Beitragstext (News-Detail, Rechtstexte) ----------------------------- */
.tr-prose{max-width:860px;margin-inline:auto;font-size:16px;line-height:1.95}
.tr-prose h2{font-size:clamp(30px,4vw,48px);margin-top:1.4em}
.tr-prose h3{font-size:clamp(24px,3vw,34px);margin-top:1.3em}
.tr-prose img{border-radius:3px;margin-block:1.6em}

/* Impressum: Vereinslogo rechts neben den Angaben, mobil darunter */
.tr-impressum{display:grid;gap:clamp(26px,4vw,48px);align-items:start}
@media (min-width:700px){.tr-impressum{grid-template-columns:minmax(0,1fr) minmax(0,300px)}}
.tr-prose .tr-impressum__logo{width:100%;max-width:300px;height:auto;margin:0;border-radius:2px}
.tr-prose ul,.tr-prose ol{padding-left:1.4em;margin:0 0 1.6em}
.tr-prose li{margin-bottom:.6em}
.tr-prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--tr-accent);
  font-style:italic;color:var(--tr-white);
}
.tr-prose a{text-decoration:underline;text-underline-offset:3px}
.tr-prose strong{color:var(--tr-white)}
.tr-prose table{width:100%;border-collapse:collapse;margin:0 0 1.8em}
.tr-prose th,.tr-prose td{border:1px solid var(--tr-line);padding:10px 14px;text-align:left}
.tr-prose th{color:var(--tr-white);font-family:var(--tr-display);font-weight:400;font-size:19px}

.tr-meta{font-size:13px;color:var(--tr-text);margin:0 0 1.6em;letter-spacing:.05em}
.tr-back{display:inline-block;margin-top:clamp(34px,5vw,60px)}

/* --- Externe Einbettung mit Einwilligung (2-Klick) ----------------------- */
.tr-embed{
  border:1px solid var(--tr-line);border-radius:3px;
  background:rgba(255,255,255,.04);padding:clamp(26px,4vw,46px);text-align:center;
}
.tr-embed h3{font-size:clamp(24px,3vw,34px);margin:0 0 .5em}
.tr-embed p{max-width:620px;margin-inline:auto}
.tr-embed__frame{width:100%;min-height:760px;border:0;display:block;border-radius:3px}

/* --- Formular ------------------------------------------------------------ */
.tr-form{max-width:760px;margin-inline:auto;display:grid;gap:22px}
.tr-field{display:grid;gap:8px}
.tr-field label{
  font-family:var(--tr-display);font-size:21px;color:var(--tr-white);line-height:1.2;
}
.tr-field .tr-hint{font-size:13px;color:var(--tr-text);margin:0}
.tr-field input,.tr-field textarea,.tr-field select{
  font-family:var(--tr-body);font-size:16px;color:var(--tr-white);
  background:rgba(255,255,255,.06);
  border:1px solid var(--tr-line);border-radius:3px;
  padding:14px 16px;width:100%;
}
.tr-field input::placeholder,.tr-field textarea::placeholder{color:rgba(255,255,255,.32)}
.tr-field textarea{min-height:190px;resize:vertical;line-height:1.8}
.tr-field input:focus,.tr-field textarea:focus{border-color:var(--tr-mint);background:rgba(255,255,255,.09)}
.tr-field [aria-invalid="true"]{border-color:#ff6b57;background:rgba(255,80,60,.1)}
.tr-fieldrow{display:grid;gap:22px}
@media (min-width:700px){.tr-fieldrow{grid-template-columns:repeat(2,1fr)}}

.tr-check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.7}
.tr-check input{width:20px;height:20px;flex:0 0 auto;margin-top:4px;accent-color:var(--tr-accent-solid)}
.tr-honey{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.tr-formnote{font-size:13px;color:var(--tr-text)}
.tr-status{margin:0;padding:16px 18px;border-radius:3px;font-size:15px;display:none}
.tr-status.is-visible{display:block}
.tr-status--ok{background:rgba(160,255,226,.12);border:1px solid var(--tr-mint);color:var(--tr-white)}
.tr-status--err{background:rgba(255,80,60,.12);border:1px solid #ff6b57;color:var(--tr-white)}
.tr-field__error{font-size:13px;color:#ff9b8c;margin:0}