:root{
  --primary:#3E6F86;
  --secondary:#6FB1E1;
  --accent:#4A90E2;
  --dark:#1f2a30;
  --light:#f7f9fb;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:var(--dark);background:#fff}

header{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  padding:3rem 1.5rem;
  text-align:center;
}
header.sub{padding:2.2rem 1.5rem}
header h1{font-size:2rem;margin-bottom:.4rem}
header p{font-size:1.05rem;opacity:.95}

nav{
  background:var(--dark);
  padding:.85rem 1rem;
  text-align:center;
}
nav a{color:#fff;margin:0 .8rem;text-decoration:none;font-size:.95rem;opacity:.92}
nav a:hover{opacity:1;text-decoration:underline}

.container{max-width:1100px;margin:auto;padding:2.5rem 1.5rem}
section{margin-bottom:2rem}
h2{color:var(--primary);margin-bottom:.7rem;font-size:1.6rem}
h3{margin-bottom:.4rem}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
}
.card{
  background:var(--light);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  text-decoration:none;
  color:inherit;
}
.card:hover{transform:translateY(-2px);transition:.15s ease}
.card ul{padding-left:1.1rem;margin-top:.6rem}
.card li{margin:.25rem 0}

.mini{padding:.25rem}

.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:.8rem 1.2rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}

.cta{
  background:linear-gradient(135deg, rgba(62,111,134,.12), rgba(111,177,225,.18));
  border-radius:var(--radius);
  padding:1.4rem;
}
.cta p{margin:.5rem 0 1rem}

.badges{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.badge{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.9rem;
}

.split{display:grid;grid-template-columns:1.3fr .7fr;gap:1.25rem}
@media (max-width: 860px){ .split{grid-template-columns:1fr} }

footer{
  background:var(--dark);
  color:#fff;
  padding:2rem 1.5rem;
  text-align:center;
  font-size:.92rem;
}
footer a{color:#fff;text-decoration:underline}

hr{border:none;border-top:1px solid rgba(0,0,0,.08);margin:1.25rem 0}
.small{font-size:.95rem;opacity:.9}


.brand{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  text-decoration:none;
  color:#fff;
}
.brand img{
  height:240px;
  width:auto;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  padding:.6rem .9rem;
}
@media (max-width: 520px){
  .brand img{height:140px}
}
.footer-logo{
  display:inline-block;
  margin-bottom:.6rem;
}
.footer-logo img{
  height:34px;
  width:auto;
  opacity:.95;
}


/* Elegant header layout: logo + text side-by-side */
.header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:0 1.5rem;
  text-align:left;
}
.header-text{flex:1; min-width:0}
.brand{display:flex; align-items:center; gap:.85rem}



header h1, header p{margin-left:0; margin-right:0}
@media (max-width: 820px){
  .header-inner{flex-direction:column; text-align:center}
  .header-text{text-align:center}
  
}

/* Text & Claim kleiner – Logo dominiert */



header h1{
  font-size:1.6rem;
}
header p{
  font-size:0.95rem;
}


/* Hybrid-Variante: Startseite sehr großes Logo, Unterseiten moderat */
.home .brand img{
  height:240px;
}
@media (max-width: 520px){
  .home .brand img{height:140px}
}

/* Unterseiten */
.subpage .brand img{
  height:110px;
}
@media (max-width: 520px){
  .subpage .brand img{height:70px}
}

/* Header Feinschliff: Logo zentriert, Linie, flacher */
header{
  padding:2.2rem 1.5rem;
}
.header-inner{
  justify-content:center;
}
.brand{
  justify-content:center;
}
header::after{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.18), transparent);
  margin-top:1.6rem;
}


/* Hover-Effekt für Logo */
.brand img{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.brand:hover img{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  filter: saturate(1.05);
}





/* Hover & Click Effekte NUR auf Desktop */
@media (hover: hover) and (pointer: fine){
  .brand img{
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .brand:hover img{
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    filter: saturate(1.05);
  }
  .brand:active img{
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 14px rgba(0,0,0,.16);
    filter: saturate(0.98);
  }
}

/* Navigation: aktive Seite markieren */
nav a.active{
  opacity:1;
  text-decoration:none;
  position:relative;
}
nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:rgba(255,255,255,.85);
  border-radius:999px;
}

/* Mini-Fade beim Seitenwechsel (mit JS) */
html.js body{
  opacity:0;
  transition: opacity .18s ease;
}
html.js body.is-loaded{
  opacity:1;
}
html.js body.is-leaving{
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  html.js body, html.js body.is-loaded, html.js body.is-leaving{
    opacity:1;
    transition:none;
  }
}




.ref-thumb svg{
  width:100%;
  height:100%;
  display:block;
}
.ref-meta{
  padding:1.1rem 1.25rem 1.25rem;
}
.ref-meta h3{ margin-bottom:.35rem; }

.ref-thumb img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}

/* Referenzen Gruppierung */
.ref-group{
  margin-bottom:3rem;
}
.ref-group h2{
  margin-bottom:1rem;
}

/* Referenzen Filter-Buttons (sichtbar auf hellem Background) */
.ref-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin: 1.25rem 0 2rem;
}
.filter-btn{
  border:1px solid rgba(62,111,134,.30);
  background: rgba(255,255,255,.92);
  color: var(--dark);
  padding:.45rem .85rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.filter-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,1);
  border-color: rgba(62,111,134,.45);
}
.filter-btn.is-active{
  background: var(--primary);
  color:#fff;
  border-color: rgba(62,111,134,.55);
}
@media (prefers-reduced-motion: reduce){
  .filter-btn{transition:none}
  .filter-btn:hover{transform:none}
}
.filter-btn{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding:.45rem .85rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.filter-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}
.filter-btn.is-active{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.35);
}
@media (prefers-reduced-motion: reduce){
  .filter-btn{transition:none}
  .filter-btn:hover{transform:none}
}


/* Sticky Filterleiste (Referenzen) */
.ref-filters{
  position: sticky;
  top: .75rem;
  z-index: 50;
  background: linear-gradient(135deg, rgba(62,111,134,.92), rgba(34,78,99,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .75rem .75rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Damit beim Sticky kein "Kleben" direkt an Überschrift passiert */
.ref-group:first-of-type{
  scroll-margin-top: 6rem;
}



/* Variante 2: Lightbox – Originalgröße (Fade) */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;

  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}
.lightbox img{
  max-width:95vw;
  max-height:95vh;
  object-fit:contain;
  transform: scale(.98);
  transition: transform .18s ease;
}
.lightbox.is-open img{
  transform: scale(1);
}
.lightbox:after{
  content:"✕";
  position:absolute;
  top:20px;
  right:28px;
  font-size:32px;
  color:#fff;
  cursor:pointer;
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox img{transition:none}
  .lightbox img{transform:none}
}

/* Einheitliche Referenzen-Kacheln – exakt wie Elektrotechnik */
.ref-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:1.25rem;
}

.ref-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  border:1px solid rgba(62,111,134,.14);
  display:flex;
  flex-direction:column;
}

.ref-thumb{
  aspect-ratio:16 / 9;
}

.ref-meta{
  padding:1.05rem 1.15rem 1.15rem;
}

.ref-meta h3{
  font-size:1.05rem;
  margin-bottom:.45rem;
}

.ref-meta p{
  margin:.25rem 0;
}

@media (hover:hover) and (pointer:fine){
  .ref-card{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .ref-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 36px rgba(0,0,0,.12);
    border-color:rgba(62,111,134,.28);
  }
}

.ref-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.07);
  border:1px solid rgba(62,111,134,.12);
  display:flex;
  flex-direction:column;
}

.ref-thumb{
  aspect-ratio:16 / 9;
}

.ref-meta{
  padding:1.25rem 1.35rem 1.4rem;
}

.ref-meta h3{
  font-size:1.1rem;
  margin-bottom:.55rem;
}

.ref-meta p{
  margin:.35rem 0;
}

@media (hover:hover) and (pointer:fine){
  .ref-card{
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .ref-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(0,0,0,.12);
  }
}


/* --- FORCE: Kacheln nebeneinander (Desktop) --- */
.ref-group .ref-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(300px, 1fr)) !important;
  gap:1.25rem !important;
  justify-content:center !important;
}

/* Tablet */
@media (max-width: 1024px){
  .ref-group .ref-grid{
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .ref-group .ref-grid{
    grid-template-columns: 1fr !important;
  }
}

/* === REFERENZEN: Layout wie Screenshot (Container + Grid) === */
.ref-group{
  max-width: 1400px;
  margin-left:auto;
  margin-right:auto;
}
.ref-group .ref-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1024px){
  .ref-group .ref-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ref-group .ref-grid{ grid-template-columns: 1fr; }
}

/* === REFERENZEN: Alle Bilder exakt gleiche Größe === */
.ref-thumb{
  aspect-ratio: 16 / 9;
  height: 220px;
  overflow: hidden;
}

.ref-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Referenzen Einleitung */
.ref-intro{
  max-width: 900px;
  margin: 0 auto 2.5rem;
}
.ref-intro p{
  margin-top: .75rem;
}

/* Kurzer Einleitungssatz Referenzen */
.ref-teaser{
  max-width: 900px;
  margin: 0 auto 1.25rem;
  font-weight: 500;
  opacity: .85;
}

/* WhatsApp Kontakt-Link */
.whatsapp-link{
  margin-left: .5rem;
  padding: .35rem .6rem;
  border-radius: 6px;
  background: #25D366;
  color: #f8fafc;
  font-size: .9rem;
  text-decoration: none;
}
.whatsapp-link:hover{
  opacity: .85;
}

/* Floating WhatsApp Button */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  z-index: 9999;
}
.whatsapp-float:hover{
  transform: scale(1.05);
}

/* WhatsApp Hover-Text */
.whatsapp-float{
  position: fixed;
}

.whatsapp-tooltip{
  position: absolute;
  right: 70px;
  white-space: nowrap;
  background: #1e3a5f;
  color: #f8fafc;
  padding: .4rem .6rem;
  border-radius: 6px;
  font-size: .85rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}

@media (hover:hover) and (pointer:fine){
  .whatsapp-float:hover .whatsapp-tooltip{
    opacity: 1;
    transform: translateY(0);
  }
}

.whatsapp-tooltip:after{
  content:"";
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-width:6px 0 6px 6px;
  border-style:solid;
  border-color:transparent transparent transparent #1e3a5f;
}

/* Mobile/Touch Anpassungen WhatsApp Button */
@media (pointer: coarse){
  .whatsapp-float{
    width: 46px;
    height: 46px;
    bottom: 16px;
    right: 16px;
  }
  .whatsapp-float svg{
    width: 22px;
    height: 22px;
  }
  .whatsapp-tooltip{
    right: 60px;
    font-size: .8rem;
    padding: .35rem .55rem;
  }
}

/* First-Visit Hint (auch mobil, kurz sichtbar) */
.whatsapp-float.show-hint .whatsapp-tooltip{
  opacity: 1;
  transform: translateY(0);
}

/* FIX: WhatsApp-Overlay blockiert keine Inhalte */
.whatsapp-tooltip{
  pointer-events: none;
}

/* FIX: Referenzbilder immer klickbar */
.ref-thumb img{
  position: relative;
  z-index: 2;
  cursor: zoom-in;
}

/* WhatsApp-Button ausblenden, wenn Lightbox offen */
body.lightbox-open .whatsapp-float{
  opacity: 0;
  pointer-events: none;
}

/* Kontaktformular */
.contact-form{
  max-width: 900px;
  margin: 2rem auto;
}
.form{
  margin-top: 1rem;
  display: grid;
  gap: 1rem;
}
.form-row label{
  display:block;
  font-weight:600;
  margin-bottom:.35rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  border:1px solid rgba(30,58,95,.20);
  border-radius: 12px;
  padding: .75rem .85rem;
  font: inherit;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: rgba(30,58,95,.55);
  box-shadow: 0 0 0 4px rgba(30,58,95,.10);
}
.form-row.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px){
  .form-row.grid-2{ grid-template-columns: 1fr; }
}
.consent .checkbox{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}
.consent input[type="checkbox"]{
  margin-top:.25rem;
}
.hp-field{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-actions{
  display:flex;
  flex-direction: column;
  gap:.6rem;
}


/* Impressum / Rechtliches */
.legal-hero{
  max-width: 900px;
  margin: 0 auto 2rem;
}
.eyebrow{
  display: inline-block;
  margin-bottom: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(30,58,95,.08);
  color: #1e3a5f;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.legal-intro{
  max-width: 760px;
  margin-top: .75rem;
  opacity: .9;
}
.legal-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.legal-card{
  background: #fff;
  border: 1px solid rgba(30,58,95,.12);
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 1.35rem 1.4rem;
}
.legal-card h2{
  margin-bottom: .8rem;
  font-size: 1.1rem;
}
.legal-card p{
  margin: 0;
  line-height: 1.7;
}
.legal-card-wide{
  grid-column: 1 / -1;
}
@media (max-width: 760px){
  .legal-grid{
    grid-template-columns: 1fr;
  }
  .legal-card-wide{
    grid-column: auto;
  }
}


/* IT-Recht Kanzlei Wrapper */
.legal-wrapper{
  margin-top: .5rem;
}

#itkanzlei_txt_copyright{
  margin-top: 1.2rem;
  text-align: right;
}

.legal-stand{
  font-size: .8rem;
  opacity: .6;
}

.legal-text{
  line-height:1.7;
}
.legal-text h2{
  margin-top:1.5rem;
}
.legal-text ul{
  padding-left:1.2rem;
}

.cookie-banner{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:900px;
  background:#1e3a5f;
  color:#fff;
  padding:1rem 1.2rem;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
  z-index:9999;
}
.cookie-content{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.cookie-actions{
  display:flex;
  gap:.6rem;
}
.cookie-banner a{
  color:#fff;
  text-decoration:underline;
}