/* ===== TCS Thomas Computer Service – Nachbau (reines HTML/CSS) ===== */

:root{
  --accent:#009cff;
  --accent2:#00d3f3;
  --txt:#333;
  --white:#fff;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  font-family:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--txt);
  line-height:1.6;
  background:#f7f7f7;
  font-size:16px;
}

.container{
  width:100%;
  max-width:1170px;
  margin:0 auto;
  padding:0 15px;
}

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

/* ---------- FONTS (FontAwesome) ---------- */
/* geladen per <link> in den HTML-Dateien:
   //cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css */

/* ---------- HEADER ---------- */
#header{
  background:#1a1a1a;
  padding:25px 0;
  color:#eee;
  position:relative;
  z-index:20;
}

#header .container{color:#eee;}

.header-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}

.header-logo img{max-height:90px;background:transparent;border:0;}

.header-right{display:flex;flex-direction:column;gap:12px;align-items:flex-end;}

.header-top{
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
}

.list-inline{list-style:none;display:flex;gap:25px;margin:0;padding:0;}
.list-inline li{display:flex;align-items:flex-start;gap:8px;}
.header-label{color:var(--accent);font-size:18px;line-height:1.3;}
.header-label .fa{font-size:18px;color:var(--accent);}
.header-hightlight{font-size:13px;color:#ccc;}
.header-hightlight strong{color:#fff;}

.header-button{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  padding:10px 18px;
  border-radius:20px;
  font-weight:600;
  font-size:14px;
}
.header-button:hover{background:var(--accent2);}

.header-bottom{width:100%;}

/* primary menu */
.primary-menu{list-style:none;display:flex;gap:25px;margin:0;padding:0;position:relative;}
.primary-menu > li{position:relative;}
.primary-menu a{
  color:#eee;text-decoration:none;font-weight:600;font-size:15px;
  display:inline-block;padding:6px 0;
}
.primary-menu a:hover,.primary-menu a.active{color:var(--accent);}
.sub-menu{list-style:none;margin:0;padding:8px 12px;position:absolute;top:100%;left:0;z-index:21;
  background:#1a1a1a;box-shadow:0 2px 8px rgba(0,0,0,.4);min-width:200px;display:none;}
.primary-menu > li:hover .sub-menu{display:block;}
.sub-menu a{display:block;padding:5px 0;font-weight:400;color:#eee;}
.sub-menu a:hover,.sub-menu a.active{color:var(--accent2);}

/* ---------- SLIDER ---------- */
.slider{
  position:relative;
  width:100%;
  max-width:100vw;
  margin:0;
  padding:0;
  height:672px;             /* +20 % gegenüber 560px */
  overflow:hidden;
  background:#0b1d2a;
  z-index:1;
}
.slide{
  position:absolute;inset:0;
  opacity:0;
  z-index:1;
  transition:opacity 2s ease-in-out;
}
.slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
#content-wrapper,.post-content,article.page-single{padding:0;margin:0;}
body{padding:0;margin:0;}
.slide img{display:block;line-height:0;}
.slide-text{line-height:1.6;}
.wpb-block{background:#0b1d2a;padding:18px;color:#fff;}
.wpb-block .card{margin-bottom:18px;}
.slide-text{
  position:relative;z-index:2;
  color:#fff;text-align:center;
  padding-top:90px;
}
.slide-text h1,.slide-text h2{
  margin:0;font-weight:600;letter-spacing:-1px;
}
.slide-text h1{font-size:64px;}
.slide-text h2{font-size:64px;color:rgba(255,255,255,.9);}
.slide-text p{font-size:26px;font-weight:300;margin:14px 0;}
.slide-text .italic{font-size:18px;font-style:italic;margin-top:8px;}
.btn-row{margin-top:24px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;}
.rev-btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;text-decoration:none;font-weight:600;
  padding:12px 15px;border-radius:20.5px;font-size:18px;letter-spacing:1px;
}
.rev-btn:hover{background:#fff;color:var(--accent);}

/* Crossfade über die 10 Slides – je 1,67 s, Gesamtdauer 16,7 s.
   Längere Blendphase = weicherer Wechsel. */
@keyframes fade{
  0%   {opacity:1;}
  9%   {opacity:1;}
  11%  {opacity:0;}
  100% {opacity:0;}
}
/* 50s / 10 Slides = 5s je Slide, symmetrisch: 2s Einblendung = 2s Ausblendung */
@keyframes fadeLong{
  0%   {opacity:0;z-index:2;}
  4%   {opacity:1;z-index:2;}
  6%   {opacity:1;z-index:2;}
  10%  {opacity:0;z-index:1;}
  100% {opacity:0;z-index:1;}
}
.slide:nth-child(1){animation:fadeLong 50s 0s  infinite;}
.slide:nth-child(2){animation:fadeLong 50s 5s  infinite;}
.slide:nth-child(3){animation:fadeLong 50s 10s infinite;}
.slide:nth-child(4){animation:fadeLong 50s 15s infinite;}
.slide:nth-child(5){animation:fadeLong 50s 20s infinite;}
.slide:nth-child(6){animation:fadeLong 50s 25s infinite;}
.slide:nth-child(7){animation:fadeLong 50s 30s infinite;}
.slide:nth-child(8){animation:fadeLong 50s 35s infinite;}
.slide:nth-child(9){animation:fadeLong 50s 40s infinite;}
.slide:nth-child(10){animation:fadeLong 50s 45s infinite;}

/* ---------- FOOTER ---------- */
#footer{background:#1a1a1a;color:#ccc;padding:40px 0 0;margin-top:0;font-size:14px;}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  align-items:start;
}
.footer-col .caption{font-size:12px;color:#999;margin-top:6px;}
.footer-col.qr img{background:#fff;padding:5px;border-radius:4px;}
.widget-title{color:#fff;font-size:16px;margin:0 0 10px;}
.widget-title span{font-weight:600;}
.contact-list{list-style:none;margin:0;padding:0;}
.contact-list li{margin-bottom:8px;}
#footer a{color:var(--accent2);text-decoration:none;}
#footer a:hover{color:#fff;text-decoration:underline;}

/* copyright */
.copyright{border-top:1px solid #333;margin-top:30px;padding:15px 0;}
.copyright-grid{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.footer-menu{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap;}
.footer-menu a{color:#ccc;}
.footer-menu a:hover{color:#fff;}

/* scrollTop */
.scrollTop{position:fixed;right:18px;bottom:18px;}
.scrollTop a{
  display:block;background:var(--accent);color:#fff;width:38px;height:38px;
  border-radius:50%;text-align:center;line-height:38px;text-decoration:none;font-size:18px;
}

/* ---------- LIGHTBOX (PrettyPhoto-Ersatz via :target) ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:none;z-index:1000;padding:20px;
}
.lightbox:target{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
}
.lightbox img{max-width:92%;max-height:82vh;display:block;background:#fff;padding:5px;border-radius:4px;}
.lightbox figcaption{color:#ddd;font-size:14px;text-align:center;max-width:92%;}
.lightbox .lb-close{
  position:absolute;top:14px;right:22px;color:#fff;text-decoration:none;
  font-size:28px;line-height:1;cursor:pointer;
}

/* ---------- ÜBERSICHT: horizontale Balken wie im Original ---------- */
.bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  background:var(--accent);
  border-radius:6px;
  padding:14px 22px;
  margin:0 0 14px;
}
.bar .bar-img img{max-height:140px;width:auto;background:#fff;padding:4px;border-radius:4px;display:block;line-height:0;}
.bar .bar-text{color:#fff;}
.bar .bar-text h2{font-size:26px;margin:0 0 10px;color:#fff;}
.bar .bar-text p,.bar .bar-text ul{margin:6px 0;color:#fff;}
.bar .bar-text ul{padding-left:20px;}
.bar .bar-title{color:#fff;font-family:Montserrat,"Poppins",Arial,sans-serif;font-weight:700;font-size:28px;text-align:center;line-height:1.4;}
.bar .vc_btn3{
  display:inline-block;background:#f7f7f7;color:#333;text-decoration:none;
  padding:12px 22px;border-radius:24px;font-weight:600;font-size:15px;white-space:nowrap;
}
.bar .vc_btn3:hover{background:#fff;color:var(--accent);}

/* ---------- CONTENT / CARDS ---------- */
.page-title{font-size:32px;margin:10px 0 18px;color:#222;font-weight:600;}
.box-title{font-size:20px;margin:0 0 14px;font-weight:600;color:#222;border-bottom:2px solid var(--accent);padding-bottom:6px;}

/* Text-/Info-Seiten (Impressum, Datenschutz) */
.text-page{max-width:840px;margin:0 auto;background:#fff;padding:30px 34px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.text-page h2{color:var(--accent);font-size:20px;margin:24px 0 8px;padding-bottom:4px;border-bottom:1px solid #eee;}
.text-page h1.page-title{border-bottom:2px solid var(--accent);padding-bottom:8px;}
.text-page p{margin:8px 0;color:#333;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1170px;margin:18px auto;}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:25px;}
.grid-kontakt{display:grid;grid-template-columns:2fr 1fr;gap:25px;max-width:1170px;margin:0 auto;}
#content > p, .page-title{max-width:1170px;margin-left:auto;margin-right:auto;}
.card{
  background:#fff;padding:20px;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  border-top:3px solid var(--accent);
}
.card h2{font-size:18px;margin:0 0 10px;color:#222;}
.card ul,.card ol{padding-left:18px;margin:8px 0;}
.img-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin:10px 0;}
.img-row img{max-height:140px;background:#fff;border:1px solid #eee;padding:4px;border-radius:4px;}
.card > img{background:#fff;border:1px solid #eee;padding:4px;border-radius:4px;margin:8px auto;display:block;}

/* Übersicht-/Leistungsseiten: einheitliche Karten */
.grid-3 .card{display:flex;flex-direction:column;text-align:center;}
.grid-3 .card h2{color:var(--accent);font-size:20px;border-bottom:2px solid var(--accent);padding-bottom:6px;margin:12px 8px;}
.grid-3 .card p,.grid-3 .card ul,.grid-3 .card ol{text-align:left;}
.grid-3 .card ul,.grid-3 .card ol{margin-left:auto;margin-right:auto;max-width:260px;}
.grid-3 .card .rev-btn{margin-top:auto;align-self:center;}

/* Leistungsseiten (Sicherheitskameras/Computeranlagen/Service): Bild + Text in Karte */
.wpb-block{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.wpb-block .num{color:var(--accent);font-weight:700;font-size:13px;}
.wpb-block .imgs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;}
.wpb-block .imgs img{max-height:120px;background:#fff;border:1px solid #eee;border-radius:4px;padding:3px;}
@media (max-width:768px){
  .bar{grid-template-columns:1fr;text-align:center;}
  .bar .bar-title{font-size:22px;}
  .wpb-block{grid-template-columns:1fr;}
}

/* CF7 Formular Nachbau – zentriert, mit Kontrast */
.cf7{display:block;max-width:760px;margin:0 auto;}
.cf7 label{display:block;color:#222;font-weight:600;margin-top:8px;}
.cf7 input[type=text],
.cf7 input[type=email],
.cf7 input[type=tel],
.cf7 textarea{
  width:100%;padding:10px 12px;margin:5px 0;
  border:1px solid #cfcfcf;border-radius:5px;font:inherit;background:#fff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
.cf7 input:focus,.cf7 textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,156,255,.2);}
.cf7 .frm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cf7 .text-center{text-align:center;}
.cf7 input[type=submit]{
  background:var(--accent);color:#fff;border:none;
  padding:11px 26px;border-radius:20px;cursor:pointer;font-weight:700;font-size:15px;
}
.cf7 input[type=submit]:hover{background:var(--accent2);}

.tcs-answer{display:none;}
.tcs-answer.show{
  display:grid;position:fixed;inset:0;z-index:3000;
  place-items:center;background:rgba(0,0,0,.45);padding:20px;
}
.tcs-answer .tcs-card{
  background:#fff;padding:24px 30px;border-radius:8px;max-width:480px;width:100%;
  text-align:center;color:#223;font-size:16px;line-height:1.6;
  border-top:4px solid var(--accent);box-shadow:0 6px 24px rgba(0,0,0,.25);
  cursor:pointer;
}

/* Kontakt-Infoblock */
.wdc-contact-info{list-style:none;padding:0;margin:14px 0;}
.wdc-contact-info li{margin-bottom:10px;padding-left:0;}
.contact-label{color:var(--accent);font-weight:600;font-size:13px;text-transform:uppercase;}

.wpb_gmaps_widget iframe{width:100%;max-width:960px;display:block;margin:0 auto;border:0;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:768px){
  .header-grid{flex-direction:column;align-items:flex-start;}
  .header-right{align-items:flex-start;}
  .primary-menu{flex-wrap:wrap;}
  .slider{height:auto;}
  .slide{position:relative;opacity:1;animation:none!important;min-height:500px;}
  .slide-text{padding:20px;}
  .slide-text h1,.slide-text h2{font-size:34px;}
  .slide-text p{font-size:18px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .grid-2,.grid-kontakt{grid-template-columns:1fr;}
  .cf7 .frm-row{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr;}
}