:root { --blue:#07599a; --ink:#202020; --border:#edf0f3; --container:1180px; }
* { box-sizing:border-box; }
html,body,button,input,textarea,select { font-family:"Montserrat",Arial,sans-serif; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Montserrat",Arial,sans-serif; font-size:15px; line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; box-shadow:0 3px 14px rgba(0,0,0,.08); }
.topbar { background:#0b5792; color:#fff; font-size:14px; }
.topbar-inner { display:flex; justify-content:flex-end; gap:28px; min-height:38px; align-items:center; }
.nav-wrap { background:#fff; }
.nav-inner { display:flex; min-height:118px; align-items:center; gap:34px; }
.brand { flex:0 0 225px; }
.brand img { width:190px; height:auto; }
.main-nav { display:flex; align-items:center; gap:34px; margin-left:auto; font-size:13px; font-weight:600; text-transform:uppercase; white-space:nowrap; }
.main-nav a:hover { color:var(--blue); }
.main-nav span { margin-left:4px; font-size:15px; }
.social-links,.footer-social { display:flex; align-items:center; gap:17px; color:var(--blue); font-weight:700; }
.social-links { margin-left:17px; }
.social-links a,.footer-social a { font-size:17px; }
.menu-toggle { display:none; border:0; background:transparent; padding:7px; }
.menu-toggle span { display:block; width:26px; height:2px; margin:5px 0; background:var(--blue); }
.hero { position:relative; min-height:575px; color:#fff; display:flex; align-items:center; overflow:hidden; background:#07599a; }
.hero::before { position:absolute; inset:0; z-index:0; background:url("assets/brandwache-bochum-hero.png?v=match6") center/cover no-repeat; content:""; }
.hero::after { position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(5,104,172,.94) 0%,rgba(0,119,192,.81) 45%,rgba(0,103,170,.64) 100%); content:""; }
.hero-content { position:relative; z-index:2; padding-block:76px; }
.eyebrow,.section-kicker { margin:0 0 17px; color:var(--blue); font-size:17px; font-weight:700; text-transform:uppercase; }
.hero .eyebrow { color:#fff; font-size:17px; font-weight:500; }
.hero h1 { max-width:550px; margin:0 0 20px; color:#fff; font-family:"Titillium Web",Arial,sans-serif; font-size:36px; line-height:48px; font-weight:700; letter-spacing:0; text-transform:uppercase; }
.hero-copy { max-width:560px; margin:0 0 27px; font-size:17px; line-height:1.55; }
.button { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:11px 19px; border:1px solid transparent; font-size:12px; font-weight:600; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-light { color:var(--blue); background:#fff; }
.button-blue { color:#fff; background:var(--blue); }
.button-blue:hover { background:#064b82; }
.section { padding-block:91px; }
.intro { text-align:center; }
.intro h2 { margin:0 auto 47px; font-size:clamp(28px,3vw,39px); line-height:1.33; font-weight:400; text-transform:uppercase; }
.intro h2::after { display:block; width:62px; height:4px; margin:25px auto 0; background:var(--blue); content:""; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:76px; max-width:1010px; margin-inline:auto; text-align:left; }
.intro-grid p { margin:0; color:#3b3b3b; }
.gallery { overflow:hidden; }
.carousel { position:relative; padding-bottom:42px; }
.carousel-viewport { overflow:hidden; }
.carousel-track { display:flex; gap:18px; transition:transform .45s ease; will-change:transform; }
.carousel-slide { flex:0 0 calc((100% - 54px) / 4); min-width:0; margin:0; }
.carousel-slide img { width:100%; aspect-ratio:343/303; object-fit:cover; }
.carousel-arrow { position:absolute; z-index:2; top:calc(50% - 30px); display:grid; width:40px; height:60px; place-items:center; border:0; color:#fff; background:rgba(7,89,154,.86); cursor:pointer; font:400 42px/1 Arial,sans-serif; opacity:0; transition:opacity .2s ease,background .2s ease; }
.carousel:hover .carousel-arrow,.carousel:focus-within .carousel-arrow { opacity:1; }
.carousel-arrow:hover { background:var(--blue); }
.carousel-prev { left:12px; }
.carousel-next { right:12px; }
.carousel-dots { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.carousel-dot { width:9px; height:9px; padding:0; border:1px solid var(--blue); border-radius:50%; background:#fff; cursor:pointer; }
.carousel-dot.is-active { background:var(--blue); }
.service { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,500px); gap:80px; align-items:center; }
.service-first { padding-top:126px; padding-bottom:86px; }
.service-second { grid-template-columns:minmax(360px,500px) minmax(0,1fr); padding-top:73px; padding-bottom:98px; }
.service-second .service-copy { grid-column:2; }
.service-image { grid-column:2; }
.service-image img { width:100%; height:600px; object-fit:cover; }
.service-copy .section-kicker { max-width:520px; margin-bottom:18px; font-size:27px; line-height:1.13; }
.service-lead { max-width:580px; margin:0 0 28px; font-size:16px; line-height:1.55; text-transform:uppercase; }
.check-list { padding:0; margin:0 0 24px; list-style:none; }
.check-list li { position:relative; max-width:660px; padding-left:43px; margin-bottom:17px; font-size:15px; line-height:1.5; }
.check-list li::before { position:absolute; left:0; top:1px; width:25px; height:25px; border-radius:50%; background:var(--blue); color:#fff; content:"✓"; font-size:16px; font-weight:700; line-height:25px; text-align:center; }
.faq { padding-top:39px; padding-bottom:97px; }
.faq > .section-kicker { margin-bottom:40px; text-align:center; font-size:28px; }
.accordion { max-width:1080px; margin-inline:auto; }
.faq-item { border-bottom:1px solid #fafafa; background:#fafafa; }
.faq-item + .faq-item { margin-top:12px; }
.faq-question { width:100%; display:flex; justify-content:space-between; gap:28px; padding:27px 31px; border:0; color:#111; background:transparent; cursor:pointer; font:inherit; font-size:16px; font-weight:700; text-align:left; }
.faq-icon { flex:0 0 auto; width:27px; height:27px; border-radius:50%; color:#fff; background:#090909; font-size:25px; font-weight:400; line-height:24px; text-align:center; }
.faq-item.is-open { color:#fff; background:var(--blue); }
.faq-item.is-open .faq-question { color:#fff; }
.faq-item.is-open .faq-icon { color:var(--blue); background:#fff; }
.faq-answer { display:none; padding:0 39px 27px; }
.faq-item.is-open .faq-answer { display:block; }
.faq-answer p { margin:0; line-height:1.55; }
.city-strip { padding:39px 0 43px; color:#fff; background:var(--blue); }
.city-strip p { margin:0 0 21px; font-size:16px; font-weight:700; text-transform:uppercase; }
.city-links { max-width:1040px; margin-bottom:23px; font-size:14px; line-height:1.8; }
.city-links span { margin-inline:6px; opacity:.75; }
.city-cta { font-size:15px; }
.certificates { padding:73px 0 84px; }
.certificate-row { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.certificate-row img { width:auto; max-width:135px; max-height:114px; object-fit:contain; }
.certificate-row img:nth-child(2),.certificate-row img:nth-child(3) { max-height:145px; }
.certificate-row img:nth-child(5) { max-width:155px; max-height:84px; }
.site-footer { color:#4c4c4c; background:#fff; }
.footer-grid { display:grid; grid-template-columns:1.15fr 1.15fr .95fr 1fr; gap:55px; padding-top:26px; padding-bottom:64px; }
.footer-brand { display:flex; align-items:flex-start; justify-content:center; padding-top:21px; }
.footer-brand img { width:190px; }
.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-size:14px; line-height:1.55; }
.footer-grid strong { color:#123f73; font-size:15px; text-transform:uppercase; }
.footer-grid p { margin:12px 0 0; }
.footer-grid a:hover { color:var(--blue); }
.footer-subtitle { margin-top:25px; }
.footer-social { margin:13px 0 20px; }
.rating { display:flex; flex-direction:column; gap:4px; }
.rating span { color:#333; font-size:11px; letter-spacing:.24em; }
.rating b { color:#d6b64e; font-size:17px; letter-spacing:.09em; }
.rating small { font-size:12px; }
.rating em { color:#4285f4; font-size:16px; font-style:normal; font-weight:600; }
.copyright { padding:10px 16px; color:#fff; background:var(--blue); font-size:14px; text-align:center; }
.whatsapp,.accessibility { position:fixed; z-index:5; display:grid; place-items:center; border-radius:50%; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.16); }
.whatsapp { right:18px; bottom:24px; width:56px; height:56px; background:#21d366; font-size:31px; }
.accessibility { left:18px; bottom:24px; width:48px; height:48px; border:3px solid #fff; background:#1d73a9; font-size:22px; }
.simple-main { min-height:60vh; padding:90px 0 110px; }
.simple-card { width:min(calc(100% - 48px),var(--container)); max-width:var(--container); margin:0 auto; padding:54px 60px; background:#f7f9fb; border-top:5px solid var(--blue); }
.simple-card h1 { margin:0 0 26px; color:var(--blue); font-family:"Titillium Web",Arial,sans-serif; font-size:42px; line-height:1.15; font-weight:700; text-transform:uppercase; }
.simple-card h2 { margin:35px 0 8px; color:var(--blue); font-size:21px; }
.simple-card p { margin:0 0 15px; }
.simple-card a { color:var(--blue); text-decoration:underline; }
.simple-note { padding:13px 16px; border-left:4px solid var(--blue); background:#eaf3fb; font-size:14px; }
.legal-page h1 { margin-bottom:34px; }
.legal-page h2 { margin-top:32px; font-size:24px; }
.legal-page h3 { margin:26px 0 8px; color:var(--blue); font-size:19px; }
.legal-page h4 { margin:22px 0 8px; color:var(--blue); font-size:17px; }
.legal-page p,.legal-page li { font-size:14px; line-height:1.7; }
.legal-page ul,.legal-page ol { padding-left:22px; margin:10px 0 18px; }
.contact-form { display:grid; gap:9px; margin-top:28px; }
.contact-form label { margin-top:8px; color:#123f73; font-size:13px; font-weight:600; }
.contact-form input,.contact-form textarea { width:100%; padding:12px 13px; border:1px solid #d8e0e7; border-radius:0; color:var(--ink); background:#fff; font:inherit; font-size:14px; }
.contact-form textarea { resize:vertical; }
.contact-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-form .checkbox-label { display:flex; gap:9px; align-items:flex-start; color:#444; font-size:12px; font-weight:400; }
.contact-form .checkbox-label input { width:auto; margin-top:4px; }
.contact-form .form-note { margin:4px 0 8px; font-size:12px; }
@media (max-width:1020px) {
  .nav-inner { min-height:94px; }
  .brand { flex-basis:170px; }
  .brand img { width:160px; }
  .main-nav { gap:17px; }
  .social-links { margin-left:2px; gap:10px; }
  .service { gap:45px; }
}
@media (max-width:760px) {
  .container { width:min(calc(100% - 34px),var(--container)); }
  .topbar-inner { justify-content:space-between; gap:10px; font-size:11px; }
  .nav-inner { position:relative; min-height:82px; justify-content:space-between; }
  .brand { flex-basis:auto; }
  .brand img { width:145px; }
  .menu-toggle { display:block; }
  .main-nav { position:absolute; z-index:4; left:0; right:0; top:82px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px 17px; background:#fff; box-shadow:0 10px 20px rgba(0,0,0,.08); }
  .main-nav.is-open { display:flex; }
  .main-nav a { padding:10px 0; border-bottom:1px solid var(--border); }
  .social-links { display:none; }
  .hero { min-height:640px; }
  .hero::before { background-position:center top; }
  .hero::after { background:linear-gradient(180deg,rgba(5,104,172,.42),rgba(0,83,142,.3)); }
  .hero-content { padding-block:70px; }
  .hero h1 { font-size:36px; }
  .hero-copy { font-size:15px; }
  .section { padding-block:65px; }
  .intro h2 { font-size:27px; }
  .intro-grid,.service,.service-second { grid-template-columns:1fr; gap:34px; }
  .intro-grid { gap:20px; }
  .carousel-track { gap:8px; }
  .carousel-slide { flex-basis:calc((100% - 8px) / 2); }
  .service-first { padding-top:70px; padding-bottom:50px; }
  .service-second { padding-top:20px; padding-bottom:70px; }
  .service-second .service-copy { grid-column:auto; }
  .service-image { grid-column:auto; grid-row:1; }
  .service-image img { height:460px; }
  .service-copy .section-kicker,.faq > .section-kicker { font-size:23px; }
  .faq-question { padding:20px; font-size:14px; }
  .faq-answer { padding:0 20px 22px; font-size:14px; }
  .city-strip { padding-block:34px; }
  .city-strip p { font-size:14px; }
  .city-links { font-size:12px; }
  .certificate-row { flex-wrap:wrap; justify-content:center; gap:26px; }
  .certificate-row img { max-width:105px; max-height:83px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:35px 22px; padding-bottom:42px; }
  .footer-brand { justify-content:flex-start; }
}
@media (max-width:480px) {
  .topbar-inner { align-items:flex-start; flex-direction:column; padding-block:8px; }
  .hero h1 { font-size:31px; }
  .hero { min-height:600px; }
  .carousel-slide { flex-basis:100%; }
  .service-copy .section-kicker { font-size:21px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { padding-top:0; }
  .simple-card { padding:35px 24px; }
  .contact-form .form-row { grid-template-columns:1fr; gap:9px; }
}