/* =========================================
   styles.css – Klaro! Service NRW (Light & Clean, großes Header-Logo)
   ========================================= */

:root{
  /* Farben */
  --bg:#f8f9fb;
  --alt-bg:#f2f5f7;
  --panel:#ffffff;
  --border:#e5e8eb;
  --shadow:0 4px 14px rgba(0,0,0,.08);

  --text:#333333;
  --muted:#777777;

  --brand:#00b7a1;
  --brand-dark:#009186;
  --ok:#2ecc71;
  --warn:#ffb020;

  --radius:12px;
  --radius-lg:18px;

  --fs-1:clamp(28px,4vw,44px);
  --fs-2:clamp(22px,3vw,32px);
  --fs-3:18px;
}

/* ========== Reset & Base ========== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
::selection{background:rgba(0,183,161,.25)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ========== Layout Utils ========== */
.container{width:min(1100px,92%);margin-inline:auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.section{padding:64px 0}
.section.alt{background:var(--alt-bg)}
.hidden{display:none !important}

/* ========== Typography ========== */
h1{font-size:var(--fs-1);line-height:1.1;margin:0 0 10px}
h2{font-size:var(--fs-2);margin:0 0 14px}
h3{font-size:var(--fs-3);margin:0 0 6px}
.lead{color:var(--muted);font-size:1.1rem;margin-top:6px}
.muted{color:var(--muted)}

/* ========== Header ========== */
.site-header{
  position:sticky;top:0;z-index:20;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.site-header .container{
  padding-top:10px;
  padding-bottom:10px;
  align-items:center;
}
.brand{
  display:flex;align-items:center;gap:14px;
  font-weight:700;letter-spacing:.2px;
  color:var(--brand-dark);
}
.brand-logo{
  height:120px;          /* deutlich größer */
  width:auto;
  display:block;
  transition:height .2s ease;
}
.brand-text{
  font-weight:700;
  color:var(--brand-dark);
  font-size:1.25rem;
}
.nav{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{color:var(--text);font-weight:500}
.nav a:hover{color:var(--brand-dark)}
.nav.tiny a{font-size:.9rem;color:var(--muted)}

@media (max-width:900px){
  .brand-logo{height:90px;}
}
@media (max-width:700px){
  .brand-logo{height:70px;}
  .nav{gap:14px;justify-content:center;margin-top:6px}
}

/* ========== Hero ========== */
.hero{
  padding:96px 0;text-align:center;color:#fff;
  background:linear-gradient(135deg, #00b7a1 0%, #00a2b1 100%);
  overflow:hidden;position:relative;
}
.hero:after{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:140%;
  background:radial-gradient(700px 300px at 15% 20%, rgba(255,255,255,.25), transparent 60%),
             radial-gradient(600px 260px at 85% 10%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;filter:blur(2px);opacity:.9;
}
.hero h1{color:#fff}
.hero .lead{color:#e7f9ff}
.hero-logo{display:none !important}
.cta{display:flex;gap:12px;justify-content:center;margin-top:18px}

/* ========== Cards, Services, Quotes ========== */
.card{
  background:var(--panel);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.1)}

.service{
  background:var(--panel);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);transition:.2s ease;
}
.service:hover{transform:translateY(-3px)}

.usps{padding:32px 0 8px}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.quotes figure{
  margin:0;padding:18px;border-radius:var(--radius);
  background:var(--panel);box-shadow:var(--shadow)
}
.quotes blockquote{margin:0 0 8px;font-weight:600;color:var(--brand-dark)}

/* ========== Buttons ========== */
.btn{
  display:inline-block;padding:11px 16px;border-radius:10px;
  border:1px solid var(--brand);transition:.2s ease;cursor:pointer;
  text-align:center;line-height:1;user-select:none;
}
.btn-primary{background:var(--brand);color:#fff;border:none}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{color:var(--brand-dark);background:#fff;border:1px solid var(--brand-dark)}
.btn-ghost:hover{background:var(--brand-dark);color:#fff}

/* ========== Formulare ========== */
.form{margin-top:10px}
.field{display:flex;flex-direction:column;gap:6px}
label{font-weight:600}
input,select,textarea{
  background:#fff;border:1px solid #ccd3da;color:var(--text);
  border-radius:10px;padding:12px 12px;outline:none;transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand-dark);
  box-shadow:0 0 0 2px rgba(0,183,161,.15)
}
.checkbox{flex-direction:row;align-items:flex-start;gap:10px}
.form-note{color:var(--muted);margin-top:8px}
.hp{position:absolute;left:-50000px}
.input-error{border-color:#e55353 !important}
.help-error{color:#e55353;font-size:.9rem}

/* ========== Footer ========== */
.site-footer{
  padding:24px 0;background:#fff;color:#555;
  border-top:1px solid var(--border);
}
.site-footer .nav a{color:#666}
.site-footer .nav a:hover{color:var(--brand-dark)}

/* ========== Animations ========== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fadeUp .5s ease both}

/* ========== Responsive Tweaks ========== */
@media (max-width:700px){
  .cta{flex-direction:column}
  .quotes{grid-template-columns:1fr}
}

/* ========== WhatsApp Floating Button ========== */
.whatsapp-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 100;
  background-color: #25D366;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.whatsapp-btn:hover {
  transform: scale(1.1);
  background-color: #128C7E;
  color: #fff;
}
.whatsapp-btn svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}