/*
Theme Name: Unfallgutachter NRW
Theme URI: https://unfall-gutachter.nrw
Author: Unfallgutachter NRW
Description: Individuelles One-Page-Theme fuer Unfallgutachter NRW - unabhaengiger KFZ-Sachverstaendiger in Moenchengladbach. Bilder liegen im Ordner /images und koennen dort einfach ersetzt werden (gleicher Dateiname beibehalten).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: unfallgutachter-nrw
*/

:root{
  --ink:#0F1A2B;         /* fast schwarzes Navy */
  --navy:#132846;        /* Haupt-Dunkelblau */
  --navy-2:#1C3B63;      /* helleres Blau fuer Verlaeufe */
  --steel:#5C7085;       /* gedaempftes Blaugrau fuer Text auf hell */
  --paper:#F3F5F7;       /* Seitenhintergrund hell */
  --line:#DCE2E8;        /* Trennlinien */
  --amber:#E8720C;       /* Warnorange - Signalfarbe */
  --amber-dark:#C4600A;
  --white:#FFFFFF;
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display-font{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.08;
}
.lead-text{color:var(--steel); font-size:1.08rem;}
a{text-decoration:none;}
.container-xl{max-width:1220px;}

/* ===== Topbar ===== */
.topbar{
  background:var(--ink);
  color:#C9D3DE;
  font-size:.86rem;
}
.topbar a{color:#C9D3DE;}
.topbar a:hover{color:var(--amber);}
.topbar .divider{border-left:1px solid #2A3B52; height:16px; margin:0 .9rem;}

/* ===== Navbar ===== */
.navbar-brand-text{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  font-size:1.55rem;
  color:var(--navy);
  line-height:1;
}
.navbar-brand-text small{
  display:block;
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:.66rem;
  color:var(--steel);
  letter-spacing:.5px;
}
.navbar{
  padding-top:.9rem; padding-bottom:.9rem;
  background:var(--white);
  box-shadow:0 1px 0 var(--line);
}
.nav-link{
  color:var(--ink) !important;
  font-weight:500;
  font-size:.95rem;
  margin:0 .35rem;
}
.nav-link:hover{color:var(--amber) !important;}
.btn-amber{
  background:var(--amber); border:1px solid var(--amber); color:#fff;
  font-weight:600; padding:.55rem 1.3rem; border-radius:2px;
}
.btn-amber:hover{background:var(--amber-dark); border-color:var(--amber-dark); color:#fff;}
.btn-outline-navy{
  border:1px solid var(--navy); color:var(--navy); font-weight:600; border-radius:2px; padding:.55rem 1.3rem;
}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}
.btn-outline-light-2{
  border:1px solid rgba(255,255,255,.55); color:#fff; font-weight:600; border-radius:2px; padding:.55rem 1.3rem;
}
.btn-outline-light-2:hover{background:rgba(255,255,255,.12); color:#fff; border-color:#fff;}

/* ===== Hero ===== */
.hero{
  position:relative;
  background:linear-gradient(115deg, var(--ink) 0%, var(--navy) 46%, var(--navy-2) 100%);
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(-35deg, rgba(255,255,255,.035) 0 2px, transparent 2px 42px);
  pointer-events:none;
}
.hero .kicker{
  font-size:.82rem; font-weight:600; color:var(--amber); letter-spacing:.3px;
}
.hero h1{
  font-size:clamp(2.3rem, 4.4vw, 3.5rem);
  color:#fff;
}
.hero .lead-text{color:#B9C6D6; max-width:34rem;}
.stat-inline{
  font-family:'Barlow Condensed', sans-serif; font-weight:800; color:var(--amber);
  font-size:2.2rem; line-height:1;
}

/* ===== Bild-Bloecke (ersetzbar ueber /images) ===== */
.img-block{
  position:relative;
  width:100%;
  overflow:hidden;
  /* =====border-radius:2px;
  border:1px solid var(--line);===== */
}
.img-block img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.img-block.hero-img{min-height:495px;}
.img-block.about-img{min-height:340px;}
.img-block.map-img{min-height:200px;}

/* ===== Trust badges ===== */
.trust-strip{background:var(--paper); border-bottom:1px solid var(--line);}
.trust-item i{font-size:1.5rem; color:var(--amber);}
.trust-item h4{font-size:1.02rem; font-weight:700; margin-bottom:.15rem;}
.trust-item p{color:var(--steel); font-size:.88rem; margin:0;}

/* ===== Section spacing ===== */
.section{padding:5.5rem 0;}
.section-tight{padding:3.5rem 0;}
.eyebrow{
  font-size:.82rem; font-weight:600; color:var(--amber);
}
.section-title{font-size:clamp(1.9rem, 3vw, 2.5rem); color:var(--navy);}

/* ===== Services ===== */
.service-card{
  border:1px solid var(--line); background:#fff; padding:2rem 1.7rem;
  height:100%; border-radius:2px; transition:border-color .15s ease, transform .15s ease;
}
.service-card:hover{border-color:var(--amber); transform:translateY(-3px);}
.service-card .num{
  font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:1rem;
  color:var(--amber); letter-spacing:1px; margin-bottom:.9rem;
}
.service-card h3{font-size:1.35rem; color:var(--navy);}
.service-card p{color:var(--steel); font-size:.94rem;}
.service-card .stretched-link{color:var(--navy); font-weight:600; font-size:.9rem;}

/* ===== Warum-Liste ===== */
.check-list li{
  display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.05rem; color:var(--ink);
}
.check-list i{color:var(--amber); font-size:1.15rem; margin-top:.15rem;}

/* ===== Statistik-Band ===== */
.stat-band{
  background:var(--ink); color:#fff;
}
.stat-band .stat-num{
  font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:3rem; color:var(--amber); line-height:1;
}
.stat-band .stat-label{color:#AEBAC8; font-size:.9rem;}
.stat-band hr{border-color:#2A3B52;}

/* ===== Prozess ===== */
.process-step{position:relative; padding-left:0;}
.process-step .step-num{
  font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:2.6rem;
  color:var(--line); line-height:1;
}
.process-step h4{color:var(--navy); font-size:1.1rem; margin-top:.4rem;}
.process-step p{color:var(--steel); font-size:.92rem;}

/* ===== CTA-Banner ===== */
.cta-banner{
  background:linear-gradient(120deg, var(--amber) 0%, var(--amber-dark) 100%);
  color:#fff;
}
.cta-banner h2{color:#fff; font-size:clamp(1.8rem,3vw,2.4rem);}

/* ===== Kontakt ===== */
.contact-card{
  background:var(--navy); color:#fff; padding:2.4rem; border-radius:2px;
}
.contact-card a{color:#fff;}
.contact-card .item{display:flex; gap:.9rem; margin-bottom:1.3rem;}
.contact-card .item i{color:var(--amber); font-size:1.2rem; margin-top:.15rem;}
.contact-card .item small{display:block; color:#9FB0C2; font-size:.75rem; letter-spacing:.3px; margin-bottom:.15rem;}

.form-control, .form-select{
  border-radius:2px; border-color:var(--line); padding:.65rem .8rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--amber); box-shadow:0 0 0 .2rem rgba(232,114,12,.15);
}
label.form-label{font-size:.86rem; font-weight:600; color:var(--navy);}

/* ===== Footer ===== */
footer{background:var(--ink); color:#9FB0C2;}
footer h5{color:#fff; font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:1.1rem;}
footer a{color:#9FB0C2;}
footer a:hover{color:var(--amber);}
footer .foot-line{border-color:#26374E;}
.social-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #2A3B52; border-radius:50%; color:#C9D3DE; margin-right:.5rem;
}
.social-btn:hover{border-color:var(--amber); color:var(--amber);}

/* ===== WhatsApp Floating Button ===== */
.wa-float{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:1050;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.wa-float:hover{color:#fff; filter:brightness(1.05);}

@media (max-width: 767.98px){
  .section{padding:3.5rem 0;}
}