/*
Theme Name: IPTV German Hub
Theme URI: https://iptvgermanhub.com
Author: IPTV German Hub
Author URI: https://iptvgermanhub.com
Description: Modern German IPTV WordPress Theme for IPTV German, German IPTV and IPTV streaming content.
Version: 1.0
Text Domain: iptv-german-hub
*/

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  padding:0;
  background:#ffffff;
  color:#111111;
  font-family:'Inter','Segoe UI',Arial,Helvetica,sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}

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

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
textarea,
select{
  font-family:inherit;
}

button{
  cursor:pointer;
}


/* =========================================================
   GERMAN IPTV HUB VARIABLES
========================================================= */

:root{

  --black:#0b0b0d;
  --black-soft:#121214;
  --black-light:#1b1b1f;

  --german-red:#dd0000;
  --german-red-dark:#b40000;
  --german-red-light:#ff1a1a;

  --german-gold:#ffce00;
  --german-gold-dark:#d6a900;

  --white:#ffffff;
  --white-soft:#f8f8f8;

  --text:#151515;
  --text-dark:#080808;
  --muted:#667085;
  --muted-light:#98a2b3;

  --border:#e6e6e6;
  --border-dark:#29292d;

  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --bg-dark:#0b0b0d;

  --card:#ffffff;

  --shadow:0 15px 45px rgba(0,0,0,.08);
  --shadow-dark:0 20px 60px rgba(0,0,0,.25);

}


/* =========================================================
   WORDPRESS
========================================================= */

.wp-caption{
  max-width:100%;
}

.wp-caption-text{
  font-size:13px;
  color:var(--muted);
}

.screen-reader-text{
  border:0;
  clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);
  height:1px;
  width:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute!important;
  word-wrap:normal!important;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  z-index:999999;
}

.skip-link:focus{
  left:15px;
  top:15px;
  width:auto;
  height:auto;
  padding:12px 18px;
  background:var(--german-gold);
  color:#000;
  border-radius:7px;
  clip:auto;
  clip-path:none;
}


/* =========================================================
   CONTAINER
========================================================= */

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{

  position:relative;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  background:rgba(11,11,13,.97);

  border-bottom:1px solid rgba(255,255,255,.08);

  box-shadow:0 5px 25px rgba(0,0,0,.12);

}

.site-header.scrolled{

  background:rgba(11,11,13,.99);

  box-shadow:0 8px 30px rgba(0,0,0,.22);

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar{

  min-height:82px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:25px;

}


/* =========================================================
   LOGO
========================================================= */

.site-branding{
  flex-shrink:0;
}

.logo{

  display:inline-flex;

  align-items:center;

  white-space:nowrap;

  color:#ffffff;

  font-size:24px;

  line-height:1;

  font-weight:900;

  letter-spacing:-.8px;

}

.logo span{

  color:var(--german-red);

}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-links{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:22px;

  flex:1;

}

.nav-links a{

  position:relative;

  color:#d9d9dc;

  font-size:13px;

  font-weight:700;

  white-space:nowrap;

  transition:.25s ease;

}

.nav-links a::after{

  content:"";

  position:absolute;

  left:0;

  bottom:-8px;

  width:0;

  height:2px;

  background:var(--german-red);

  transition:.25s ease;

}

.nav-links a:hover{

  color:#ffffff;

}

.nav-links a:hover::after{

  width:100%;

}


/* =========================================================
   HEADER CTA
========================================================= */

.header-actions{

  display:flex;

  align-items:center;

  gap:12px;

  flex-shrink:0;

}

.header-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:44px;

  padding:11px 19px;

  border-radius:9px;

  background:var(--german-red);

  color:#ffffff;

  font-size:13px;

  font-weight:800;

  transition:.25s ease;

  box-shadow:0 8px 25px rgba(221,0,0,.20);

}

.header-btn:hover{

  background:var(--german-red-light);

  color:#ffffff;

  transform:translateY(-2px);

  box-shadow:0 12px 30px rgba(221,0,0,.28);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle{

  display:none;

  width:44px;

  height:44px;

  padding:8px;

  border:0;

  border-radius:8px;

  background:transparent;

  cursor:pointer;

}

.menu-toggle span{

  display:block;

  width:25px;

  height:2px;

  margin:5px auto;

  background:#ffffff;

  transition:.25s ease;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu{

  position:fixed;

  inset:0;

  z-index:10000;

  background:#0b0b0d;

  opacity:0;

  visibility:hidden;

  transform:translateX(100%);

  transition:
    opacity .3s ease,
    visibility .3s ease,
    transform .3s ease;

  overflow-y:auto;

}

.mobile-menu.active{

  opacity:1;

  visibility:visible;

  transform:translateX(0);

}

.mobile-menu-inner{

  min-height:100%;

  padding:25px 22px 40px;

  display:flex;

  flex-direction:column;

}

.mobile-close{

  align-self:flex-end;

  width:45px;

  height:45px;

  border:0;

  background:transparent;

  color:#ffffff;

  font-size:36px;

  line-height:1;

}

.mobile-logo{

  margin:25px 0 45px;

  color:#ffffff;

  font-size:25px;

  font-weight:900;

}

.mobile-logo span{

  color:var(--german-red);

}

.mobile-nav{

  display:flex;

  flex-direction:column;

}

.mobile-nav a{

  padding:17px 0;

  color:#e5e5e7;

  font-size:18px;

  font-weight:700;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-nav a:hover{

  color:#ffffff;

}

.mobile-cta{

  margin-top:30px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:15px 20px;

  border-radius:10px;

  background:var(--german-red);

  color:#ffffff;

  font-size:16px;

  font-weight:800;

}


/* =========================================================
   MAIN CONTENT
========================================================= */

main{
  width:100%;
}

.site-main{
  width:100%;
}


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

.hero{

  position:relative;

  padding:120px 0 90px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(221,0,0,.08),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #0b0b0d 0%,
      #111114 100%
    );

  color:#ffffff;

  overflow:hidden;

}

.hero::before{

  content:"";

  position:absolute;

  width:500px;

  height:500px;

  top:-250px;

  left:50%;

  transform:translateX(-50%);

  background:rgba(221,0,0,.10);

  border-radius:50%;

  filter:blur(100px);

}

.hero-content{

  position:relative;

  z-index:2;

  max-width:900px;

  margin:0 auto;

  text-align:center;

}

.hero-label{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:8px 16px;

  margin-bottom:20px;

  border:1px solid rgba(221,0,0,.35);

  border-radius:30px;

  background:rgba(221,0,0,.10);

  color:#ff4b4b;

  font-size:13px;

  font-weight:800;

}

.hero h1{

  margin-bottom:22px;

  color:#ffffff;

  font-size:48px;

  line-height:1.15;

  font-weight:900;

  letter-spacing:-1.2px;

}

.hero h1 span{

  color:var(--german-red);

}

.hero p{

  max-width:820px;

  margin:0 auto 34px;

  color:#bfc1c7;

  font-size:18px;

  line-height:1.8;

}

.hero-buttons{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:15px;

  flex-wrap:wrap;

}


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

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:48px;

  padding:14px 27px;

  border-radius:10px;

  background:var(--german-red);

  color:#ffffff;

  font-weight:800;

  box-shadow:0 10px 30px rgba(221,0,0,.20);

  transition:.25s ease;

}

.btn:hover{

  background:var(--german-red-light);

  color:#ffffff;

  transform:translateY(-2px);

}

.btn-light{

  background:#ffffff;

  color:#111111;

  border:1px solid #dddddd;

  box-shadow:none;

}

.btn-light:hover{

  background:#f2f2f2;

  color:#000000;

}


/* =========================================================
   TRUST BAR
========================================================= */

.trust-bar{

  padding:25px 0;

  background:#f7f7f7;

  border-top:1px solid var(--border);

  border-bottom:1px solid var(--border);

}

.trust-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:20px;

  text-align:center;

}

.trust-item strong{

  display:block;

  margin-bottom:4px;

  color:var(--german-red);

  font-size:18px;

}

.trust-item span{

  color:var(--muted);

  font-size:13px;

}


/* =========================================================
   SECTIONS
========================================================= */

.section{

  padding:90px 0;

  background:#ffffff;

}

.section-blue{

  background:#f6f6f6;

}

.section h2{

  margin-bottom:15px;

  color:var(--text-dark);

  text-align:center;

  font-size:36px;

  line-height:1.2;

  font-weight:900;

}

.section h2 span{

  color:var(--german-red);

}

.section-subtitle{

  max-width:750px;

  margin:0 auto 50px;

  color:var(--muted);

  text-align:center;

  line-height:1.8;

}


/* =========================================================
   GRID / CARDS
========================================================= */

.grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:22px;

}

.card{

  padding:30px 22px;

  background:#ffffff;

  border:1px solid var(--border);

  border-radius:16px;

  box-shadow:var(--shadow);

  text-align:center;

  transition:.3s ease;

}

.card:hover{

  transform:translateY(-6px);

  border-color:rgba(221,0,0,.35);

  box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.card h3{

  margin-bottom:10px;

  color:var(--german-red);

  font-size:18px;

}

.card p{

  color:var(--muted);

  font-size:14px;

  line-height:1.7;

}


/* =========================================================
   PRICING
========================================================= */

.packages{

  padding:95px 20px;

  background:#ffffff;

  text-align:center;

}

.packages h2{

  margin-bottom:12px;

  color:var(--text-dark);

  font-size:40px;

  line-height:1.2;

  font-weight:900;

}

.packages h2 span{

  color:var(--german-red);

}

.packages-intro{

  margin-bottom:30px;

  color:var(--muted);

  font-size:17px;

}

.currency-switch{

  display:inline-flex;

  padding:5px;

  margin-bottom:55px;

  background:#f3f3f3;

  border:1px solid #e0e0e0;

  border-radius:12px;

}

.currency-btn{

  padding:10px 25px;

  border:0;

  border-radius:9px;

  background:transparent;

  color:#687078;

  font-size:14px;

  font-weight:800;

  transition:.25s ease;

}

.currency-btn.active{

  background:var(--german-red);

  color:#ffffff;

  box-shadow:0 6px 18px rgba(221,0,0,.20);

}

.pack-grid{

  width:100%;

  max-width:1250px;

  margin:0 auto;

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:25px;

}

.pack{

  position:relative;

  padding:35px 25px;

  background:#ffffff;

  border:1px solid var(--border);

  border-radius:20px;

  box-shadow:var(--shadow);

  text-align:left;

  transition:.3s ease;

}

.pack:hover{

  transform:translateY(-5px);

  box-shadow:0 25px 55px rgba(0,0,0,.13);

}

.pack h3{

  margin-bottom:12px;

  color:var(--text-dark);

  font-size:20px;

  text-align:center;

}

.pack .price{

  margin-bottom:6px;

  color:var(--german-red);

  font-size:35px;

  font-weight:900;

  text-align:center;

}

.pack .guarantee{

  margin-bottom:22px;

  color:#78818a;

  font-size:13px;

  text-align:center;

}

.pack ul{

  margin-bottom:26px;

  list-style:none;

}

.pack ul li{

  position:relative;

  margin-bottom:10px;

  padding-left:23px;

  color:#4f5963;

  font-size:14px;

  line-height:1.5;

}

.pack ul li::before{

  content:"✓";

  position:absolute;

  left:0;

  color:var(--german-red);

  font-weight:900;

}

.pack button{

  width:100%;

  padding:14px 0;

  border:0;

  border-radius:10px;

  background:var(--german-red);

  color:#ffffff;

  font-size:15px;

  font-weight:800;

  transition:.25s ease;

}

.pack button:hover{

  background:var(--german-red-light);

  transform:translateY(-2px);

}

.pack.popular{

  border:2px solid var(--german-red);

  transform:scale(1.03);

}

.pack.popular:hover{

  transform:scale(1.03) translateY(-5px);

}

.pack.popular::before{

  content:"BELIEBTESTE WAHL";

  position:absolute;

  top:-15px;

  left:50%;

  transform:translateX(-50%);

  padding:6px 17px;

  background:var(--german-red);

  color:#ffffff;

  border-radius:20px;

  font-size:10px;

  font-weight:900;

  white-space:nowrap;

}


/* =========================================================
   FEATURE SECTION
========================================================= */

.feature-section{

  padding:100px 20px;

  background:#f6f6f6;

}

.feature-container{

  max-width:1200px;

  margin:0 auto;

  display:grid;

  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:70px;

}

.feature-text h2{

  margin-bottom:20px;

  color:var(--text-dark);

  font-size:40px;

  line-height:1.25;

  font-weight:900;

}

.feature-text h2 span{

  color:var(--german-red);

}

.feature-text p{

  margin-bottom:28px;

  color:var(--muted);

  font-size:16px;

  line-height:1.8;

}

.feature-text ul{

  list-style:none;

}

.feature-text ul li{

  position:relative;

  margin-bottom:14px;

  padding-left:27px;

  color:#4d5660;

  font-size:15px;

}

.feature-text ul li::before{

  content:"✓";

  position:absolute;

  left:0;

  color:var(--german-red);

  font-weight:900;

}

.feature-image img{

  display:block;

  width:100%;

  max-width:540px;

  margin-left:auto;

  border:1px solid #dddddd;

  border-radius:20px;

  box-shadow:0 25px 60px rgba(0,0,0,.13);

}


/* =========================================================
   FEATURE BOXES
========================================================= */

.features-boxes{

  padding:90px 20px;

  background:#ffffff;

}

.features-container{

  max-width:1200px;

  margin:0 auto;

}

.features-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:24px;

}

.feature-box{

  padding:34px 25px;

  background:#fafafa;

  border:1px solid var(--border);

  border-radius:18px;

  text-align:center;

  transition:.3s ease;

}

.feature-box:hover{

  transform:translateY(-6px);

  background:#ffffff;

  border-color:rgba(221,0,0,.30);

  box-shadow:var(--shadow);

}

.feature-box h3{

  margin-bottom:12px;

  color:var(--text-dark);

  font-size:18px;

}

.feature-box p{

  color:var(--muted);

  font-size:14px;

  line-height:1.7;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section{

  padding:95px 20px;

  background:#f5f5f5;

}

.faq-container{

  max-width:900px;

  margin:0 auto;

}

.faq-title{

  margin-bottom:50px;

  color:var(--text-dark);

  font-size:38px;

  font-weight:900;

  text-align:center;

}

.faq-title span{

  color:var(--german-red);

}

.faq-item{

  margin-bottom:16px;

  background:#ffffff;

  border:1px solid var(--border);

  border-radius:14px;

  overflow:hidden;

  box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.faq-question{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:21px 25px;

  color:var(--text-dark);

  font-size:16px;

  font-weight:700;

  cursor:pointer;

}

.faq-question:hover{

  color:var(--german-red);

}

.faq-question span{

  color:var(--german-red);

  font-size:23px;

  transition:.3s;

}

.faq-answer{

  max-height:0;

  padding:0 25px;

  overflow:hidden;

  transition:.35s ease;

}

.faq-answer p{

  padding:18px 0 22px;

  color:var(--muted);

  font-size:15px;

  line-height:1.8;

}

.faq-item.active .faq-answer{

  max-height:400px;

}

.faq-item.active .faq-question span{

  transform:rotate(45deg);

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-wrapper{

  padding:80px 20px;

  background:#ffffff;

  overflow:hidden;

}

.testimonials-title{

  margin-bottom:45px;

  color:var(--text-dark);

  font-size:34px;

  font-weight:900;

  text-align:center;

}

.testimonials-title span{

  color:var(--german-red);

}

#testimonial-slider{

  display:flex;

  gap:24px;

  width:max-content;

}

.testimonial{

  width:330px;

  padding:24px;

  background:#fafafa;

  border:1px solid var(--border);

  border-radius:16px;

  box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.stars{

  margin-bottom:10px;

  color:var(--german-gold);

  font-size:14px;

}

.testimonial p{

  margin-bottom:18px;

  color:#53606b;

  font-size:14px;

  line-height:1.7;

}

.testimonial strong{

  color:var(--german-red);

  font-size:13px;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{

  background:#0b0b0d;

  color:#ffffff;

  border-top:1px solid rgba(255,255,255,.08);

}

.footer-container{

  max-width:1200px;

  margin:0 auto;

  padding:70px 20px 30px;

}

.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:50px;

}

.footer-brand{

  max-width:360px;

}

.footer-logo{

  display:inline-block;

  margin-bottom:18px;

  color:#ffffff;

  font-size:25px;

  font-weight:900;

}

.footer-logo span{

  color:var(--german-red);

}

.footer-brand p{

  color:#9da0a6;

  font-size:14px;

  line-height:1.8;

}

.footer-column h3{

  margin-bottom:18px;

  color:#ffffff;

  font-size:15px;

  font-weight:800;

}

.footer-column a{

  display:block;

  margin-bottom:10px;

  color:#9da0a6;

  font-size:14px;

  transition:.25s ease;

}

.footer-column a:hover{

  color:#ffffff;

}

.footer-bottom{

  margin-top:50px;

  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.08);

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  color:#777b82;

  font-size:12px;

}

.footer-bottom a:hover{

  color:#ffffff;

}


/* =========================================================
   SUBSCRIPTION TOAST
========================================================= */

.subscription-toast{

  position:fixed;

  left:20px;

  bottom:20px;

  z-index:99999;

  max-width:320px;

  display:flex;

  align-items:center;

  gap:12px;

  padding:14px 18px;

  background:#ffffff;

  color:#111111;

  border:1px solid #e3e3e3;

  border-radius:12px;

  box-shadow:0 12px 35px rgba(0,0,0,.18);

  opacity:0;

  transform:translateY(20px);

  transition:.4s ease;

}

.subscription-toast.show{

  opacity:1;

  transform:translateY(0);

}

.toast-icon{

  width:36px;

  height:36px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  border-radius:50%;

  background:var(--german-red);

  color:#ffffff;

}

.toast-content strong{

  color:var(--german-red);

}

.toast-time{

  margin-top:4px;

  color:#8a929a;

  font-size:11px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1200px){

  .pack-grid{

    grid-template-columns:repeat(2,1fr);

  }

  .grid{

    grid-template-columns:repeat(2,1fr);

  }

  .features-grid{

    grid-template-columns:repeat(2,1fr);

  }

}


@media(max-width:1100px){

  .nav-links{

    gap:13px;

  }

  .nav-links a{

    font-size:11px;

  }

  .logo{

    font-size:21px;

  }

}


@media(max-width:900px){

  .hero h1{

    font-size:38px;

  }

  .feature-container{

    grid-template-columns:1fr;

    gap:40px;

  }

  .feature-text{

    text-align:center;

  }

  .feature-text ul{

    max-width:500px;

    margin:0 auto;

    text-align:left;

  }

  .feature-image img{

    margin:0 auto;

  }

  .trust-grid{

    grid-template-columns:repeat(2,1fr);

  }

  .footer-grid{

    grid-template-columns:1fr 1fr;

  }

}


@media(max-width:850px){

  .navbar{

    min-height:74px;

  }

  .nav-links{

    display:none;

  }

  .header-btn{

    display:none;

  }

  .menu-toggle{

    display:block;

  }

}


@media(max-width:768px){

  .hero{

    padding:105px 0 65px;

  }

  .hero h1{

    font-size:32px;

  }

  .hero p{

    font-size:16px;

  }

  .section{

    padding:70px 0;

  }

  .section h2{

    font-size:29px;

  }

  .grid{

    grid-template-columns:1fr;

  }

  .packages{

    padding:75px 16px;

  }

  .packages h2{

    font-size:31px;

  }

  .pack-grid{

    grid-template-columns:1fr;

  }

  .pack.popular{

    transform:none;

  }

  .pack.popular:hover{

    transform:translateY(-5px);

  }

  .features-grid{

    grid-template-columns:1fr;

  }

  .faq-title{

    font-size:30px;

  }

  .testimonial{

    width:270px;

  }

  .testimonials-title{

    font-size:27px;

  }

}


@media(max-width:600px){

  .container{

    padding-left:16px;

    padding-right:16px;

  }

  .hero h1{

    font-size:29px;

  }

  .hero-buttons{

    flex-direction:column;

  }

  .hero-buttons .btn{

    width:100%;

  }

  .trust-grid{

    grid-template-columns:1fr 1fr;

    gap:18px 10px;

  }

  .trust-item strong{

    font-size:16px;

  }

  .trust-item span{

    font-size:11px;

  }

  .feature-section{

    padding:70px 16px;

  }

  .feature-text h2{

    font-size:29px;

  }

  .subscription-toast{

    left:50%;

    bottom:12px;

    max-width:92%;

    padding:12px 14px;

    font-size:12px;

    transform:translate(-50%,20px);

  }

  .subscription-toast.show{

    transform:translate(-50%,0);

  }

  .footer-grid{

    grid-template-columns:1fr;

    gap:35px;

  }

  .footer-bottom{

    flex-direction:column;

    text-align:center;

  }

}


@media(max-width:480px){

  .logo{

    font-size:19px;

  }

  .mobile-menu-inner{

    padding-left:18px;

    padding-right:18px;

  }

}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  html{

    scroll-behavior:auto;

  }

  *,
  *::before,
  *::after{

    animation-duration:.01ms!important;

    animation-iteration-count:1!important;

    transition-duration:.01ms!important;

  }

}


/* =========================================================
   PRINT
========================================================= */

@media print{

  .site-header,
  .mobile-menu,
  .subscription-toast{

    display:none!important;

  }

  body{

    background:#ffffff;

    color:#000000;

  }

}