@font-face{font-family:"Montserrat";src:url(fonts/montserrat.woff2) format("woff2");font-weight:300 600;font-display:swap}
:root{--red:#c1272d;--orange:#faa70b;--teal:#298b87;--gray:#7a7a7a;--dark:#310a0b;--muted:#f4f4f4;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:300 16px/1.714 "Montserrat","Segoe UI",Helvetica,Arial,sans-serif;color:#524f4f;-webkit-font-smoothing:antialiased;background:#fff}
a{color:var(--red)}
h1,h2,h3,h4{color:#626262;font-weight:400;letter-spacing:2px;line-height:1.3;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,4.5vw,3rem)}
h1 strong{border-bottom:4px solid var(--red);padding-bottom:2px}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 24px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.logo img{display:block;height:auto;width:min(300px,55vw)}
.nav a{display:inline-block;padding:10px 14px;color:#524f4f;text-decoration:none;text-transform:uppercase;font-size:.85rem;font-weight:500;letter-spacing:1px}
.nav a:hover{color:var(--red)}
.nav-toggle,.nav-burger{display:none}

.banner{display:flex;background:var(--dark);color:#fff;min-height:98px}
.banner-img{flex:0 0 287px;background:url(images/tiere.jpg) center right/cover}
.banner-text{padding:18px 28px;background:var(--orange);flex:1;color:#000}
.banner-text h3{color:#000;font-weight:500;margin:0 0 4px}
.banner-text p{margin:0;font-size:.95rem}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:70px;padding-bottom:70px}
.hero .fr{font-weight:400;font-style:italic;color:var(--gray)}
.lead{font-size:1.1rem}
.parallax{height:clamp(220px,40vh,420px);background:url(images/vertraege.jpg) center/cover fixed}

.about{padding-top:80px;padding-bottom:80px;max-width:820px}
.about h3{color:var(--gray);font-weight:400}

.areas{background:var(--muted);padding:70px 0}
.areas h2{text-align:center;margin-bottom:1.2em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.card{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.card h4{hyphens:auto;overflow-wrap:anywhere;font-size:.9rem;font-size:1rem;margin:0;padding:14px;border-top:3px solid var(--red)}

.costs{padding-top:70px;padding-bottom:70px;max-width:820px}

.contact{background:var(--dark);padding:70px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:0}
.tile{padding:40px}
.tile h3{margin-top:1.4em;text-transform:uppercase;font-size:1rem;letter-spacing:.08em}
.tile h3:first-child{margin-top:0}
.tile-red{background:var(--red);color:#fff}
.tile-red h3,.tile-red a{color:#fff}
.hours td{padding:2px 20px 2px 0}
.tile-form{background:#fff}
.tile-form label{display:block;margin-bottom:16px;font-size:.9rem;color:var(--dark)}
.tile-form input[type=text],.tile-form input[type=email],.tile-form input[type=tel],.tile-form textarea{display:block;width:100%;margin-top:4px;padding:11px 12px;font:inherit;border:1px solid #ccc;border-radius:0;background:#fafafa}
.tile-form input:focus,.tile-form textarea:focus{outline:2px solid var(--orange);border-color:var(--orange)}
.tile-form .check{display:flex;gap:10px;font-size:.8rem;color:#666}
.tile-form .check input{margin-top:4px;flex:none}
button{padding:13px 32px;font:inherit;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--red);border:0;cursor:pointer}
button:hover{background:var(--orange);color:#000}

.footer-bar{height:98px;background:var(--orange) url(images/tiere.jpg) left/auto 100% no-repeat}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:20px;padding-bottom:20px;font-size:.85rem}

@media(max-width:800px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 6px 8px rgba(0,0,0,.1)}
  .nav a{display:block;padding:14px 24px}
  .nav-burger{display:block;cursor:pointer;text-transform:uppercase;font-size:.85rem}
  .nav-toggle:checked ~ .nav{display:block}
  .banner{flex-direction:column}.banner-img{flex-basis:80px}
  .hero,.contact-grid{grid-template-columns:1fr;gap:30px}
  .parallax{background-attachment:scroll}
  .tile{padding:28px 22px}
}

.legal{padding-top:60px;padding-bottom:70px}
.legal h2{font-size:1.2rem;margin-top:1.4em}
.legal .cols{column-count:2;column-gap:60px}
.legal .cols h2:first-child{margin-top:0}
@media(max-width:800px){.legal .cols{column-count:1}}

.areas h2,.costs h2{color:var(--teal)}
.tile h3{color:inherit}
.tile-form h2{color:var(--teal)}
.card h4{hyphens:auto;overflow-wrap:anywhere;font-size:.9rem;border-top-color:var(--teal);font-weight:500;letter-spacing:.5px}