/* ==========================================================================
   Tombstone Rock Festival - Basis-Stylesheet
   Design-Tokens 1:1 von tombstone-rock.de uebernommen
   ========================================================================== */

/* --- Schriften, lokal eingebunden (kein Google-CDN) ---------------------- */
@font-face{font-family:'Metal Mania';src:url('../fonts/metal-mania-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('../fonts/merriweather-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('../fonts/merriweather-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('../fonts/merriweather-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Merriweather';src:url('../fonts/merriweather-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Merriweather';src:url('../fonts/merriweather-700italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

:root{
  /* Farben */
  --tr-bg:#252a33;
  --tr-bg-header:#262833;
  --tr-sand:#d4be95;
  --tr-accent:rgba(255,63,0,.97);
  --tr-accent-solid:#ff3f00;
  --tr-mint:#a0ffe2;
  --tr-text:#7d7b8d;
  --tr-white:#fff;
  --tr-cream:#ffe9dd;
  --tr-dark-text:#1b1d23;
  --tr-line:rgba(255,255,255,.14);

  /* Schrift */
  --tr-display:'Metal Mania',cursive,Impact,sans-serif;
  --tr-body:'Merriweather',Georgia,serif;

  /* Maße */
  --tr-maxw:1300px;
  --tr-gutter:clamp(18px,4vw,40px);
  --tr-section-y:clamp(56px,8vw,110px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--tr-bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:transparent;
  color:var(--tr-text);
  font-family:var(--tr-body);
  font-size:15px;
  line-height:1.95;
  font-weight:400;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
video{max-width:100%}

a{color:var(--tr-accent);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--tr-mint)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--tr-mint);outline-offset:3px;border-radius:2px;
}

/* --- Ueberschriften ------------------------------------------------------ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--tr-display);
  font-weight:400;
  color:var(--tr-white);
  line-height:1;
  margin:0 0 .4em;
  letter-spacing:.01em;
}
h1{font-size:clamp(44px,9vw,105px)}
h2{font-size:clamp(36px,7vw,76px)}
h3{font-size:clamp(26px,4vw,42px)}
h4{font-size:clamp(21px,3vw,30px)}
h5{font-size:clamp(19px,2.4vw,24px)}
h6{font-size:18px}

p{margin:0 0 1.6em}
p:last-child{margin-bottom:0}

/* --- Layout -------------------------------------------------------------- */
.tr-row{
  width:100%;
  max-width:var(--tr-maxw);
  margin-inline:auto;
  padding-inline:var(--tr-gutter);
}
.tr-section{padding-block:var(--tr-section-y)}
.tr-section--dark{background:var(--tr-bg)}
.tr-section--sand{background:var(--tr-sand);color:var(--tr-dark-text)}
.tr-section--sand h1,.tr-section--sand h2,.tr-section--sand h3,
.tr-section--sand h4,.tr-section--sand h5,.tr-section--sand h6{color:#000}
.tr-section--sand a{color:#8c2a00}
.tr-section--sand a:hover{color:#000}

.tr-center{text-align:center}
.tr-narrow{max-width:900px;margin-inline:auto}

/* Spaltenraster */
.tr-grid{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:860px){
  .tr-grid--2{grid-template-columns:repeat(2,1fr)}
  .tr-grid--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:620px){
  .tr-grid--auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* --- Trennlinie unter Titeln (Avada "title-sep") ------------------------- */
.tr-sep{
  border:0;height:0;border-top:2px solid var(--tr-accent);
  width:min(300px,60%);margin:0 0 clamp(26px,4vw,46px);
}
.tr-sep--center{margin-inline:auto}
.tr-section--sand .tr-sep{border-color:#000}

/* --- Buttons ------------------------------------------------------------- */
.tr-btn{
  display:inline-block;
  font-family:var(--tr-display);
  font-size:18px;
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tr-white);
  background:var(--tr-accent);
  border:0;border-radius:2px;
  padding:17px 40px;
  cursor:pointer;
  transition:background-color .25s ease,transform .25s ease,color .25s ease;
}
.tr-btn:hover{background:#d13400;color:var(--tr-white);transform:translateY(-2px)}
.tr-btn--ghost{background:transparent;border:2px solid var(--tr-accent);color:var(--tr-accent)}
.tr-btn--ghost:hover{background:var(--tr-accent);color:var(--tr-white)}
.tr-btn--xl{font-size:22px;padding:20px 48px}

/* --- Kopfbereich --------------------------------------------------------- */
.tr-header{
  background:var(--tr-bg-header);
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 18px rgba(0,0,0,.45);
}
/* Menue transparent ueber einem bildschirmhohen Bildkopf, beim Scrollen deckend */
.tr-header--overlay{
  position:fixed;left:0;right:0;
  background:transparent;box-shadow:none;
  transition:background-color .3s ease,box-shadow .3s ease;
}
.tr-header--overlay.is-scrolled{background:var(--tr-bg-header);box-shadow:0 2px 18px rgba(0,0,0,.45)}
.tr-header__inner{
  display:flex;align-items:center;justify-content:center;gap:18px;
  min-height:120px;position:relative;
}
.tr-nav__list{
  list-style:none;display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,38px);
  margin:0;padding:0;justify-content:center;
}
.tr-nav__link{
  font-family:var(--tr-display);
  font-size:clamp(22px,2.4vw,30px);
  line-height:1;
  color:var(--tr-mint);
  display:block;padding:6px 2px;
}
.tr-nav__link:hover{color:var(--tr-accent)}
.tr-nav__link[aria-current="page"]{color:var(--tr-accent)}

/* Menuebutton fuer Mobil */
.tr-nav__toggle{
  display:none;
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:transparent;border:2px solid var(--tr-mint);border-radius:3px;
  color:var(--tr-mint);font-family:var(--tr-display);font-size:20px;
  padding:8px 16px;cursor:pointer;
}
@media (max-width:880px){
  .tr-header__inner{min-height:84px;justify-content:flex-start}
  .tr-nav__toggle{display:block}
  .tr-nav__list{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:var(--tr-bg-header);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 0 18px;border-top:1px solid var(--tr-line);
    box-shadow:0 18px 30px rgba(0,0,0,.5);
  }
  .tr-nav__list.is-open{display:flex}
  .tr-nav__list li{width:100%}
  .tr-nav__link{padding:12px var(--tr-gutter);width:100%;font-size:26px}
}

/* --- Fussbereich --------------------------------------------------------- */
.tr-footer{background:var(--tr-bg);padding-block:clamp(40px,6vw,70px) 0}
.tr-footer__top{display:grid;gap:34px;align-items:center}
@media (min-width:860px){.tr-footer__top{grid-template-columns:1fr 2fr}}
.tr-footer__sep{border:0;border-top:1px solid var(--tr-line);margin:0 0 26px}
.tr-footer__menu{list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:0;padding:0}
.tr-footer__menu a{color:rgba(255,255,255,.33);font-family:var(--tr-body);font-size:13px}
.tr-footer__menu a:hover{color:var(--tr-mint)}
.tr-footer__bottom{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding-block:clamp(26px,4vw,46px);
}
.tr-footer__copy{font-size:14px;color:var(--tr-text);margin:0}

/* --- Social-Icons -------------------------------------------------------- */
.tr-social{display:flex;gap:12px;align-items:center;list-style:none;margin:0;padding:0}
.tr-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:3px;
  background:var(--tr-accent);color:var(--tr-white);
}
.tr-social a:hover{background:var(--tr-mint);color:var(--tr-bg)}
.tr-social svg{width:22px;height:22px;fill:currentColor}

/* --- Nach-oben-Link ------------------------------------------------------ */
.tr-totop{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:46px;height:46px;border-radius:3px;
  display:none;align-items:center;justify-content:center;
  background:var(--tr-accent);color:#fff;
}
.tr-totop.is-visible{display:flex}
/* Icons im Fuss weichen dem festen Knopf aus (Knopf belegt 18 bis 64 px vom Rand) */
.tr-footer__bottom .tr-social{margin-right:calc(72px - var(--tr-gutter))}
.tr-totop svg{width:20px;height:20px;fill:currentColor}

/* --- Hilfsklassen -------------------------------------------------------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--tr-accent);color:#fff;padding:12px 20px;font-family:var(--tr-display);
}
.skip-link:focus{left:0}