/*
Theme Name: Thüringer Feierwerk
Theme URI: https://thüringerfeierwerk.com/
Author: Thüringer Feierwerk
Description: Eigenes responsives WordPress-Theme für Thüringer Feierwerk.
Version: 1.2.1
Text Domain: thueringer-feierwerk
*/

/* =========================================
   THÜRINGER FEIERWERK – STARTSEITE
   Desktop + Tablet + Smartphone
========================================= */

.tf-page {
  --pink: #ff168f;
  --yellow: #ffe600;
  --green: #8cff00;
  --blue: #00c8ff;
  --dark: #050505;
  --card: #121212;
  --text: #ffffff;
  --muted: #c8c8c8;

  width: 100%;
  max-width: 100%;

  background: var(--dark);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow: hidden;
}

.tf-page,
.tf-page * {
  box-sizing: border-box;
}

.tf-container {
  width: 92%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
}

.tf-page h1,
.tf-page h2,
.tf-page h3,
.tf-page p {
  margin-top: 0;
}

.tf-page h2 {
  font-size: clamp(2.2rem, 4.5vw, 4.3rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* =========================================
   HERO / KOPFBEREICH
========================================= */

.tf-hero {
  min-height: 90vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 0;

  background:
    radial-gradient(circle at 15% 25%,
      rgba(255,22,143,.20),
      transparent 35%),
    radial-gradient(circle at 85% 35%,
      rgba(0,200,255,.16),
      transparent 35%),
    radial-gradient(circle at 50% 90%,
      rgba(140,255,0,.10),
      transparent 35%),
    #050505;
}

.tf-hero-inner {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  text-align: center;
}

.tf-brand {
  width: 100%;
  text-align: center;
  margin: 0 auto 35px;
}

.tf-brand-top {
  display: block;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .9;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -3px;
  color: #ffffff;
}

.tf-brand-bottom {
  display: block;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: .9;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -3px;
  color: var(--pink);
}

.tf-kicker {
  color: var(--yellow);
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
}

.tf-hero h1 {
  width: 100%;
  max-width: 1100px;
  margin: 25px auto 25px;
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.tf-hero p {
  max-width: 850px;
  margin: 0 auto 35px;
  color: var(--muted);
  font-size: 1.2rem;
  text-align: center;
}

/* =========================================
   BUTTONS
========================================= */

.tf-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.tf-btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 6px;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: 900;
  transition: transform .2s ease;
}

.tf-btn:hover {
  transform: translateY(-3px);
}

.tf-btn-primary {
  background: var(--pink);
  color: #ffffff !important;
}

.tf-btn-secondary {
  border: 2px solid #ffffff;
  color: #ffffff !important;
  background: transparent;
}

/* =========================================
   ALLGEMEINE ABSCHNITTE
========================================= */

.tf-section {
  width: 100%;
  padding: 100px 0;
}

.tf-center {
  text-align: center;
}

.tf-intro {
  max-width: 850px;
  margin: 0 auto 55px;
  color: var(--muted);
  font-size: 1.1rem;
}

/* =========================================
   WAS WIR MACHEN
========================================= */

.tf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.tf-card {
  background: var(--card);
  border: 1px solid #282828;
  padding: 38px;
  border-radius: 14px;
  min-height: 330px;
}

.tf-card:nth-child(1) {
  border-top: 5px solid var(--pink);
}

.tf-card:nth-child(2) {
  border-top: 5px solid var(--yellow);
}

.tf-card:nth-child(3) {
  border-top: 5px solid var(--blue);
}

.tf-number {
  font-size: 4rem;
  line-height: 1;
  font-weight: 900;
  opacity: .14;
  margin-bottom: 20px;
}

.tf-card h3 {
  font-size: 1.5rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.tf-card p {
  color: var(--muted);
}

.tf-tags {
  font-weight: 800;
  line-height: 2;
}

/* =========================================
   VERMIETUNG
========================================= */

.tf-rental {
  background:
    linear-gradient(
      135deg,
      rgba(255,22,143,.12),
      transparent 45%
    ),
    linear-gradient(
      315deg,
      rgba(0,200,255,.11),
      transparent 45%
    ),
    #0d0d0d;
}

.tf-rental-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.tf-rental-text p {
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 30px;
}

.tf-rental-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.tf-rental-item {
  background: #171717;
  border: 1px solid #303030;
  padding: 22px;
  border-radius: 9px;
  font-weight: 900;
  font-size: 1.05rem;
}

/* =========================================
   EVENTS
========================================= */

.tf-events {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.tf-event {
  min-height: 390px;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #252525 0%,
      #151515 45%,
      #090909 100%
    );
  border: 1px solid #303030;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition: transform .25s ease;
}

.tf-event:hover {
  transform: translateY(-5px);
}

.tf-event-content {
  width: 100%;
  padding: 32px;
}

.tf-event-label {
  color: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: 2px;
}

.tf-event h3 {
  font-size: 1.8rem;
  text-transform: uppercase;
  margin: 8px 0;
}

.tf-event p {
  color: var(--muted);
}

/* =========================================
   ALLES AUS EINER HAND
========================================= */

.tf-strip {
  width: 100%;
  padding: 65px 0;
  background: var(--pink);
  color: #ffffff;
  text-align: center;
}

.tf-strip h2 {
  margin-bottom: 12px;
}

.tf-strip-text {
  font-weight: 900;
  font-size: clamp(1rem, 2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================================
   KONTAKT
========================================= */

.tf-contact {
  width: 100%;
  padding: 110px 0;
  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(140,255,0,.10),
      transparent 40%
    ),
    #050505;
}

.tf-contact-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 55px;
  border: 1px solid #333333;
  border-radius: 15px;
  background: #101010;
}

.tf-contact-box p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.08rem;
}

.tf-contact-links {
  margin: 30px 0;
  font-size: 1.15rem;
  font-weight: 900;
}

.tf-contact-links a {
  color: #ffffff !important;
  text-decoration: none;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .tf-grid,
  .tf-events {
    grid-template-columns: repeat(2, 1fr);
  }

  .tf-rental-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 700px) {

  .tf-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tf-hero {
    min-height: auto;
    padding: 75px 0;
  }

  .tf-brand-top {
    font-size: clamp(2.6rem, 13vw, 4rem);
    letter-spacing: -1px;
  }

  .tf-brand-bottom {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
    letter-spacing: -1px;
  }

  .tf-kicker {
    font-size: .72rem;
    letter-spacing: 2px;
  }

  .tf-hero h1 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .tf-hero p {
    font-size: 1rem;
  }

  .tf-section {
    padding: 70px 0;
  }

  .tf-grid,
  .tf-events,
  .tf-rental-items {
    grid-template-columns: 1fr;
  }

  .tf-card {
    min-height: auto;
    padding: 28px;
  }

  .tf-event {
    min-height: 300px;
  }

  .tf-contact {
    padding: 70px 0;
  }

  .tf-contact-box {
    padding: 32px 20px;
  }

  .tf-buttons {
    flex-direction: column;
  }

  .tf-btn {
    width: 100%;
    max-width: 330px;
    text-align: center;
  }
}

:root{--pink:#ff168f;--yellow:#ffe600;--green:#8cff00;--blue:#00c8ff;--dark:#050505;--card:#121212;--text:#fff;--muted:#c8c8c8}
html{scroll-behavior:smooth} body{margin:0;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif} a{color:inherit}
.admin-bar .tf-site-header{top:32px}
.tf-site-header{position:sticky;top:0;z-index:9999;background:rgba(5,5,5,.94);backdrop-filter:blur(12px);border-bottom:1px solid #252525}
.tf-nav-wrap{width:92%;max-width:1400px;margin:auto;padding:14px 25px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.tf-logo{text-decoration:none!important;text-transform:uppercase;font-weight:900;line-height:.85;font-size:1.25rem;letter-spacing:-.5px;white-space:nowrap}.tf-logo span{display:block;color:#ff168f;font-size:1.45rem}
.tf-menu{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}.tf-menu a{display:block;text-decoration:none!important;color:#fff!important;font-weight:800;font-size:.9rem;text-transform:uppercase;padding:12px 11px;border-radius:7px;transition:.2s}.tf-menu a:hover,.tf-menu .current-menu-item>a{background:#ff168f;color:#fff!important}
.tf-menu-toggle{display:none;background:#ff168f;color:#fff;border:0;border-radius:7px;padding:10px 12px;font-size:1.25rem;font-weight:900;cursor:pointer}
.tf-main{min-height:60vh}.tf-content{width:92%;max-width:1100px;margin:0 auto;padding:80px 25px}.tf-content h1{font-size:clamp(2.4rem,5vw,4.8rem);text-transform:uppercase;line-height:1}.tf-content a{color:#ff168f}.tf-footer{border-top:1px solid #252525;background:#090909;padding:35px 0;color:#aaa}.tf-footer-inner{width:92%;max-width:1400px;margin:auto;padding:0 25px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.tf-footer a{text-decoration:none;color:#fff}
@media(max-width:980px){.tf-menu-toggle{display:block}.tf-menu-container{display:none;position:absolute;top:100%;left:0;width:100%;background:#080808;border-bottom:1px solid #292929;padding:15px 20px}.tf-menu-container.is-open{display:block}.tf-menu{flex-direction:column;align-items:stretch}.tf-menu a{padding:15px}.tf-nav-wrap{width:100%;padding:12px 20px}.admin-bar .tf-site-header{top:46px}}

/* WordPress-Menü-Fallback */
.tf-menu-fallback ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0;}
.tf-menu-fallback a{color:#fff;text-decoration:none;font-weight:800;text-transform:uppercase;}
@media(max-width:980px){.tf-menu-fallback ul{flex-direction:column;align-items:flex-start;}}