/*
Theme Name: seatel Magazin
Description: Individuelles Magazin-Theme fuer seatel GmbH - Telefonanlagen, Netzwerktechnik, WLAN und Smarthome. Kartenbasiertes Layout im Stil eines Nachrichtenmagazins, responsiv fuer Smartphone, Tablet und Desktop.
Author: seatel GmbH
Version: 1.0
Text Domain: seatel
*/

/* ---------- Marken-Variablen ---------- */
:root{
  --seatel-black:#0A0A0A;
  --seatel-blue:#1C6EA4;
  --seatel-blue-dark:#154C79;
  --seatel-white:#FFFFFF;
  --seatel-bg:#F7F7F5;
  --seatel-img-bg:#EDEDED;
  --seatel-text:#0A0A0A;
  --seatel-text-secondary:#666666;
  --seatel-text-muted:#8A8A8A;
  --seatel-border:#E2E2E2;
  --seatel-radius:8px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--seatel-text);
  background:var(--seatel-white);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:var(--seatel-blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- Kopfbereich ---------- */
.site-header{background:var(--seatel-black);position:sticky;top:0;z-index:50;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:14px 20px;}
.site-logo{display:flex;align-items:center;}
.site-logo-text{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:24px;color:var(--seatel-white);letter-spacing:.5px;text-decoration:none;}
.site-logo img{max-height:44px;width:auto;display:block;}
.site-logo .custom-logo-link{display:block;}
.main-nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0;flex-wrap:wrap;}
.main-nav a{color:#cfcfcf;font-size:14px;}
.main-nav a:hover,.main-nav .current-menu-item a{color:var(--seatel-white);text-decoration:none;}
.header-right{display:flex;align-items:center;gap:14px;}
.lang-switch a{color:#cfcfcf;font-size:12px;text-decoration:none;margin:0 3px;}
.lang-switch a.active-lang{color:var(--seatel-white);font-weight:bold;}
.btn-cta{background:var(--seatel-blue);color:var(--seatel-white)!important;font-size:13px;padding:9px 16px;border-radius:6px;text-decoration:none!important;display:inline-block;}
.btn-cta:hover{background:var(--seatel-blue-dark);}
.nav-toggle{display:none;background:none;border:none;color:var(--seatel-white);font-size:22px;cursor:pointer;}

@media (max-width:820px){
  .main-nav{display:none;width:100%;order:3;}
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column;gap:4px;padding:10px 0;}
  .nav-toggle{display:block;}
}

/* ---------- Hero / Intro ---------- */
.hero{position:relative;overflow:hidden;background:var(--seatel-black);min-height:340px;display:flex;align-items:flex-end;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.hero-overlay{position:relative;z-index:2;color:var(--seatel-white);padding:40px 20px;width:100%;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);}
.hero-tag{background:var(--seatel-blue);font-size:12px;padding:5px 12px;border-radius:20px;display:inline-block;margin-bottom:10px;}
.hero-title{font-size:clamp(22px,4vw,34px);font-weight:600;margin:0 0 10px;max-width:760px;}
.hero-excerpt{font-size:15px;color:#e5e5e5;max-width:600px;margin:0 0 12px;}
@media (prefers-reduced-motion: reduce){
  .hero video{display:none;}
}

/* ---------- Anzeigenflaeche ---------- */
.ad-slot{background:var(--seatel-bg);border:1px solid var(--seatel-border);border-radius:var(--seatel-radius);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0;}
.ad-slot .ad-label{font-size:10px;color:var(--seatel-text-muted);border:1px solid var(--seatel-border);padding:2px 9px;border-radius:20px;flex-shrink:0;}

/* ---------- Magazin-Kachel-Raster ---------- */
.magazine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:24px 0 40px;}
.card{background:var(--seatel-white);border:1px solid var(--seatel-border);border-radius:var(--seatel-radius);overflow:hidden;transition:box-shadow .15s;}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);}
.card a{text-decoration:none;color:inherit;display:block;}
.card-img{background:var(--seatel-img-bg);height:150px;display:flex;align-items:center;justify-content:center;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:14px;}
.tag{display:inline-block;font-size:10px;color:var(--seatel-white);padding:3px 10px;border-radius:20px;margin-bottom:8px;}
.tag.tag-priority{background:var(--seatel-blue);}
.tag.tag-default{background:var(--seatel-black);}
.card-title{font-size:15px;font-weight:600;margin:0 0 6px;color:var(--seatel-text);}
.card-excerpt{font-size:13px;color:var(--seatel-text-secondary);margin:0;}
.post-type-label{font-size:11px;color:var(--seatel-text-muted);margin-top:8px;display:flex;align-items:center;gap:4px;}

/* ---------- Gewusst wie ---------- */
.faq-search{display:flex;align-items:center;gap:8px;background:var(--seatel-bg);border-radius:var(--seatel-radius);padding:10px 14px;margin-bottom:16px;}
.faq-search input{border:none;background:transparent;outline:none;font-size:14px;width:100%;}
.faq-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.faq-filters button{border:1px solid var(--seatel-border);background:var(--seatel-white);color:#555;font-size:12px;padding:6px 14px;border-radius:20px;cursor:pointer;}
.faq-filters button.active{background:var(--seatel-blue);color:var(--seatel-white);border-color:var(--seatel-blue);}
.faq-item{border-bottom:1px solid var(--seatel-border);}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;cursor:pointer;gap:12px;}
.faq-question span.q-text{font-size:14px;color:var(--seatel-text);}
.faq-answer{display:none;padding:0 4px 16px;font-size:13px;color:var(--seatel-text-secondary);}
.faq-answer.is-open{display:block;}
.faq-answer .video-wrap{margin-top:12px;position:relative;}

/* ---------- Support-Seite ---------- */
.support-locked{max-width:420px;margin:60px auto;text-align:center;padding:30px;border:1px solid var(--seatel-border);border-radius:var(--seatel-radius);}

/* ---------- Fusszeile ---------- */
.site-footer{background:var(--seatel-black);color:#999;padding:20px;margin-top:40px;}
.site-footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;}
.site-footer a{color:#bbb;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}