/*
Theme Name: Baratta IT
Theme URI: https://baratta.ch
Author: Baratta GmbH
Author URI: https://baratta.ch
Description: Individuelles WordPress-Theme für Baratta GmbH – IT-Systemtechnik in Goldach. Alle Texte, Kontaktdaten und Leistungen sind über den Customizer und die Leistungen-Verwaltung im WordPress-Backend editierbar.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: baratta-it
*/

:root{
  --ink:#1C2430;
  --ink-soft:#2A3340;
  --paper:#F5F1E8;
  --paper-soft:#ECE6D8;
  --copper:#C1693A;
  --copper-soft:#E4B79B;
  --slate:#5B6472;
  --signal:#5C8A6A;
  --line: rgba(28,36,48,0.14);
  --line-dark: rgba(245,241,232,0.16);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,232,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.nav-brand{
  font-family:'Fraunces', serif;
  font-size:1.25rem;
  font-weight:600;
  text-decoration:none;
}
.nav-brand span{color:var(--copper);}
.nav-links{display:flex; gap:28px; font-size:0.92rem; list-style:none; margin:0; padding:0;}
.nav-links li{display:inline;}
.nav-links a{text-decoration:none; color:var(--slate);}
.nav-links a:hover{color:var(--ink);}
.nav-call{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  background:var(--ink);
  color:var(--paper);
  padding:9px 16px;
  border-radius:3px;
  text-decoration:none;
  white-space:nowrap;
}
@media (max-width:760px){ .nav-links{display:none;} }

/* ---------- HERO ---------- */
.hero{
  padding:76px 0 64px;
  border-bottom:1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:56px;
  align-items:center;
}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;} }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; color:var(--copper);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px; border-radius:50%;
  background:var(--copper);
  display:inline-block;
}
.hero h1{
  font-size:clamp(2.1rem, 4.2vw, 3.2rem);
  line-height:1.08;
  max-width:13ch;
}
.hero p.lead{
  margin:22px 0 30px;
  color:var(--slate);
  font-size:1.08rem;
  max-width:46ch;
}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px;
  border-radius:3px;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  border:1px solid transparent;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-secondary{border:1px solid var(--ink); color:var(--ink);}
.btn-secondary:hover{background:var(--paper-soft);}

/* status panel */
.panel{
  background:var(--ink);
  color:var(--paper);
  border-radius:6px;
  padding:26px 26px 22px;
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:0.5;
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.72rem; color:var(--copper-soft);
  margin-bottom:18px;
  position:relative; z-index:1;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(92,138,106,0.6);
  animation:pulse 2.4s infinite;
}
@media (prefers-reduced-motion: reduce){ .dot{animation:none;} }
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(92,138,106,0.55);}
  70%{box-shadow:0 0 0 8px rgba(92,138,106,0);}
  100%{box-shadow:0 0 0 0 rgba(92,138,106,0);}
}
.panel-row{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0;
  border-top:1px solid var(--line-dark);
  font-size:0.85rem;
  position:relative; z-index:1;
}
.panel-row:first-of-type{border-top:none;}
.panel-row .k{color:rgba(245,241,232,0.55); font-size:0.72rem;}
.panel-row .v{text-align:right; max-width:60%;}

/* ---------- SECTION HEAD ---------- */
.section{padding:72px 0;}
.section-head{max-width:560px; margin-bottom:44px;}
.section-head .mono{font-size:0.74rem; color:var(--copper); display:block; margin-bottom:12px;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem);}

/* ---------- SERVICES / PATCH PANEL ---------- */
.services{border-bottom:1px solid var(--line);}
.port-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:900px){ .port-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .port-grid{grid-template-columns:1fr;} }
.port{
  background:var(--paper);
  padding:30px 26px 28px;
  position:relative;
}
.port-tag{
  display:inline-block;
  font-size:0.7rem;
  color:var(--paper);
  background:var(--copper);
  padding:3px 9px;
  border-radius:2px;
  margin-bottom:16px;
}
.port-notch{
  position:absolute; top:0; left:26px;
  width:34px; height:5px;
  background:var(--paper-soft);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 4px 4px;
}
.port h3{font-size:1.12rem; margin-bottom:8px; font-weight:600;}
.port p{color:var(--slate); font-size:0.93rem; margin:0;}

/* ---------- TRUST ---------- */
.trust{background:var(--paper-soft); border-bottom:1px solid var(--line);}
.trust .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:760px){ .trust .wrap{grid-template-columns:1fr;} }
.quote{
  font-family:'Fraunces', serif;
  font-style:italic; font-weight:400;
  font-size:1.5rem; line-height:1.45;
  color:var(--ink);
  border-left:3px solid var(--copper);
  padding-left:22px;
  margin:0;
}
.quote-by{
  display:block; margin-top:16px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem; color:var(--slate); font-style:normal;
}
.trust-stats{display:flex; gap:36px; margin-top:8px; flex-wrap:wrap;}
.stat .n{font-family:'Fraunces', serif; font-size:2.4rem; color:var(--copper);}
.stat .l{font-size:0.78rem; color:var(--slate); max-width:14ch;}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink); color:var(--paper);}
.contact .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:760px){ .contact .wrap{grid-template-columns:1fr;} }
.contact h2{color:var(--paper); font-size:clamp(1.7rem,3.4vw,2.4rem); max-width:14ch;}
.contact .mono{color:var(--copper-soft); font-size:0.74rem;}
.big-phone{
  display:inline-block; margin-top:18px;
  font-family:'Fraunces', serif;
  font-size:clamp(1.6rem,3.4vw,2.1rem);
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid var(--copper);
  padding-bottom:4px;
}
.contact-meta{margin-top:24px; font-size:0.92rem; color:rgba(245,241,232,0.7); line-height:1.8;}
.contact-meta a{color:var(--paper); text-decoration:none;}

form{display:flex; flex-direction:column; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:0.74rem; color:rgba(245,241,232,0.55);}
.field input, .field textarea{
  background:transparent;
  border:1px solid var(--line-dark);
  border-radius:3px;
  padding:12px 14px;
  color:var(--paper);
  font-family:'Work Sans', sans-serif;
  font-size:0.95rem;
}
.field input:focus, .field textarea:focus{outline:2px solid var(--copper); outline-offset:1px;}
.field textarea{resize:vertical; min-height:90px;}
.field input::placeholder, .field textarea::placeholder{color:rgba(245,241,232,0.3);}
.send-btn{
  margin-top:4px; align-self:flex-start;
  background:var(--copper); color:var(--ink);
  border:none; padding:13px 24px; border-radius:3px;
  font-weight:600; font-size:0.95rem; cursor:pointer;
}
.send-btn:hover{background:var(--copper-soft);}

/* ---------- FOOTER ---------- */
footer.site-footer{
  background:var(--ink);
  border-top:1px solid var(--line-dark);
  padding:26px 0 30px;
}
footer.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px;
  font-size:0.78rem;
  color:rgba(245,241,232,0.5);
}
footer.site-footer a{text-decoration:none; color:rgba(245,241,232,0.6);}
footer.site-footer a:hover{color:var(--copper-soft);}
.elsewhere{font-family:'IBM Plex Mono', monospace; font-size:0.72rem;}

/* ---------- GENERIC PAGE (fallback for other pages) ---------- */
.generic-page{padding:72px 0; max-width:760px; margin:0 auto;}
.generic-page h1{font-size:2.2rem; margin-bottom:24px;}
.generic-page p{color:var(--slate);}