/* ================= RESET ================= */ * { margin:0; padding:0; box-sizing:border-box; } /* ================= THEME ================= */ :root{ --bg:#f6fbf8; --white:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb; --brand:#16a34a; --brand2:#0ea5e9; --radius:18px; --shadow:0 14px 40px rgba(0,0,0,.10); --max:1100px; } html{ scroll-behavior:smooth; } body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:linear-gradient(180deg, #f7fcfa 0%, var(--bg) 100%); color:var(--text); line-height:1.6; } a{ color:inherit; text-decoration:none; } a:hover{ text-decoration:none; } .container{ max-width:var(--max); margin:auto; padding:0 16px; } .section{ padding:84px 0; } .section-alt{ background:rgba(255,255,255,.65); } h2{ text-align:center; margin-bottom:26px; font-size:32px; letter-spacing:-.02em; } .center{ text-align:center; } .muted{ color:var(--muted); } .small{ font-size:.92rem; } .eyebrow{ text-align:center; font-weight:800; color:rgba(22,163,74,.9); letter-spacing:.03em; margin-bottom:10px; } /* ================= NAV ================= */ .site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .nav-container{ max-width:var(--max); margin:auto; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
flex-wrap: wrap;

 .logo{
  display:flex;
  align-items:center;
} 
.logo img{
  height: 65px;      /* Desktop */
  width: auto;
  max-width: 220px;  /* verhindert, dass es zu breit wird */
  display: block;
}
/* optional: wenn du KB-Mark/Word im HTML nutzt */ .logo-mark{ width:34px; height:34px; border:1px solid var(--line); border-radius:999px; display:grid; place-items:center; font-weight:900; font-size:14px; background:rgba(255,255,255,.9); } .logo-word{ font-weight:900; } .nav-menu{ display:flex; gap:8px; list-style:none; flex-wrap:wrap; justify-content:center; } .nav-menu a{ padding:8px 12px; border-radius:12px; color:var(--muted); font-weight:650; transition:.2s ease; } .nav-menu a:hover{ background:#e8f5f0; color:var(--text); } /* ================= BUTTONS ================= */ .btn{ padding:10px 18px; border-radius:999px; border:none; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; } .btn-primary{ background:linear-gradient(135deg,var(--brand2),var(--brand)); color:white; } .btn-primary:hover{ opacity:.92; } .btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text); } .btn-ghost:hover{ background:#ffffff; } .btn:focus-visible, .nav-menu a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .service-head:focus-visible{ outline:3px solid rgba(14,165,233,.35); outline-offset:3px; } /* ================= HERO ================= */ .hero-background{ position:relative; } .hero-background img{ width:100%; height:72vh; min-height:520px; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.02); } .hero-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient( 180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.50) 100% ); padding:18px; } .hero-card{ text-align:center; background:rgba(255,255,255,.90); border:1px solid rgba(229,231,235,.9); border-radius:24px; padding:26px 26px 22px; box-shadow:0 18px 60px rgba(0,0,0,.14); max-width:620px; width:min(92vw, 620px); display:flex; flex-direction:column; gap:10px; } .hero-badge{ display:inline-block; font-weight:900; font-size:.85rem; padding:6px 12px; border-radius:999px; background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.22); margin-bottom:10px; } .hero-card h1{ font-size:44px; letter-spacing:-.03em; line-height:1.05; margin-bottom:8px; } .hero-text{ font-weight:650; color:rgba(17,24,39,.85); margin-bottom:14px; } .hero-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; } .hero-trust{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:14px; color:var(--muted); font-weight:650; font-size:.92rem; } /* ================= CARDS ================= */ .card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; } .card:hover{ transform:translateY(-2px); box-shadow:0 18px 60px rgba(0,0,0,.12); } .card h3{ margin-bottom:6px; } /* ================= VALUES (VORTEILE) ================= */ .feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px; } .feature .icon{ font-size:28px; margin-bottom:8px; } /* ================= SERVICES GRID ================= */ .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:18px; } /* ================= SERVICE ACCORDION CARDS ================= */ .service-card{ padding:0; overflow:hidden; } .service-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:22px; background:transparent; border:0; cursor:pointer; text-align:left; } .service-head h3{ margin-bottom:6px; } .chev{ font-size:18px; color:var(--muted); transition:transform .2s ease; line-height:1; } .service-card.is-open .chev{ transform:rotate(180deg); } .service-body{ padding:0 22px 22px; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); } /* ================= MEDIA GRID (BILDER) ================= */ .media-grid{ display:grid; gap:14px; } .media-grid.two{ grid-template-columns:repeat(2, 1fr); } .shot{ margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; } .shot img{ width:100%; height:200px; object-fit:cover; display:block; } .shot figcaption{ padding:10px 12px; font-weight:800; color:var(--muted); border-top:1px solid var(--line); font-size:.9rem; } /* ================= PRICE LIST ================= */ .price-list{ list-style:none; border:1px solid var(--line); border-radius:14px; overflow:hidden; } .price-list li{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:#fff; } .price-list li:last-child{ border-bottom:none; } .price-list b{ white-space:nowrap; } .price-list .highlight{ background:rgba(14,165,233,.08); } /* ================= FORMS / CONTACT ================= */ .form{ max-width:520px; margin:auto; display:flex; flex-direction:column; gap:12px; } input,select,textarea{ padding:12px; border-radius:12px; border:1px solid var(--line); background:#fff; } input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--brand); } textarea{ resize:vertical; } .contact-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; } .contact-info-grid{ display:flex; flex-direction:column; gap:12px; } .info-card h3{ margin-bottom:6px; } /* ================= FOOTER ================= */ .site-footer{ border-top:1px solid var(--line); padding:20px 0; color:var(--muted); margin-top:30px; } .footer-inner{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; } .footer-nav{ display:flex; gap:12px; } /* ================= TOAST ================= */ .toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:white; padding:12px 18px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transition:.3s; } .toast.show{opacity:1;} .toast.error{ border:1px solid rgba(239,68,68,.35); } /* ================= RESPONSIVE ================= */ @media (max-width: 980px){ .services-grid{ grid-template-columns: 1fr 1fr; } .feature-grid{ grid-template-columns: 1fr 1fr; } .contact-wrapper{ grid-template-columns:1fr; } .hero-card h1{ font-size:34px; } .hero-background img{ min-height:460px; } } @media (max-width: 560px){ .services-grid{ grid-template-columns: 1fr; } .media-grid.two{ grid-template-columns:1fr; } .shot img{ height:200px; } .hero-background img{ height:64vh; min-height:420px; } .hero-card{ padding:20px; border-radius:20px; } /* ===== NEU – Logo Mobile ===== */
  .logo img{
    height: 40px;
    max-width: 170px;
  }

  /* ===== NEU – Navbar Mobile ===== */
  .nav-container{
    padding: 10px 12px;
    gap: 10px;
  }

  .nav-menu{
    width: 100%;
    justify-content: center;
  }
} /* ================= LEGACY (optional) ================= */ .flip-card, .flip-inner, .flip-front, .flip-back, .service-back-content, .close-btn{ }
/* ===== Footer Social Icons ===== */
.footer-socials{
  display:flex;
  gap:14px;
  align-items:center;
}

.footer-socials a{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.9);
  transition:.2s ease;
}

.footer-socials a:hover{
  background:#e8f5f0;
  transform:translateY(-1px);
}

.footer-socials svg{
  width:18px;
  height:18px;
  fill:var(--text);
}