/* Tierbetreuung Siebengebirge – gemeinsames Stylesheet für alle Seiten */

/* Selbst gehostete Schriften (DSGVO-konform, keine Anfrage an Google-Server).
   Dateien bitte wie folgt im Ordner /fonts/ ablegen: */
@font-face{
  font-family:'Baloo 2';
  src:url('fonts/baloo2-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Baloo 2';
  src:url('fonts/baloo2-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/karla-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

  :root{
    --bg: #FBF8F2;
    --card: #FFFFFF;
    --ink: #2C2C2A;
    --ink-soft: #5F5E5A;
    --earth: #8B5A2B;
    --earth-dark: #5C3A1A;
    --coral: #D85A30;
    --blue: #2E5C8A;
    --border: #E4DED0;
    --radius: 22px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    font-size:17px;
    line-height:1.6;
  }
  h1,h2,h3{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    line-height:1.15;
    margin:0 0 0.4em 0;
    color:var(--ink);
  }
  h1{font-size:clamp(2.1rem, 4vw, 3.2rem);}
  h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem); color:var(--earth-dark);}
  p{margin:0 0 1em 0; max-width:62ch;}
  a{color:var(--earth-dark);}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
  .section{padding:88px 0;}
  .section--tight{padding:56px 0;}

  /* header */
  header{
    position:sticky; top:0; z-index:20;
    background:rgba(251,248,242,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:56px; width:auto; display:block;}
  nav ul{list-style:none; display:flex; gap:32px; margin:0; padding:0;}
  nav li{margin-right:32px;}
  nav li:last-child{margin-right:0;}
  nav a{text-decoration:none; color:var(--ink); font-weight:500; font-size:15px;}
  nav a:hover{color:var(--earth);}
  .nav-cta{
    background:var(--earth); color:#fff; padding:10px 20px; border-radius:999px;
    text-decoration:none; font-weight:600; font-size:14px; transition:background .15s ease;
  }
  .nav-cta:hover{background:var(--earth-dark);}
  @media (max-width:760px){
    nav ul{display:none;}
  }

  /* hero */
  .hero{padding:72px 0 40px;}
  .hero-grid{
    display:flex; flex-wrap:wrap; gap:56px; align-items:center;
  }
  .hero-grid > div:first-child{flex:1 1 360px;}
  .hero-media{flex:1 1 300px;}
  .hero p.lead{font-size:19px; color:var(--ink-soft); max-width:46ch;}
  .hero-actions{display:flex; gap:16px; align-items:center; margin-top:8px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--coral); color:#fff; border:none; padding:15px 30px; border-radius:999px;
    font-family:'Karla',sans-serif; font-weight:700; font-size:16px; text-decoration:none;
    display:inline-block; transition:transform .15s ease, background .15s ease;
  }
  .btn-primary:hover{background:#c14a22; transform:translateY(-1px);}
  .btn-ghost{
    color:var(--ink); text-decoration:none; font-weight:600; font-size:15px;
    border-bottom:2px solid var(--border); padding-bottom:2px;
  }
  .hero-media{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:28px; text-align:center;
  }
  .hero-media img{width:100%; max-width:380px; height:auto;}
  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-media{order:-1; max-width:320px; margin:0 auto;}
  }

  /* wave divider */
  .wave{display:block; width:100%; height:auto;}

  /* leistungen */
  .leistungen-grid{
    display:flex; flex-wrap:wrap; gap:28px; margin-top:36px;
  }
  .leistung{padding:0; flex:1 1 280px;}
  .leistung .mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; background:#EFEAE0; color:var(--earth-dark);
    font-family:'Baloo 2',sans-serif; font-weight:700; margin-bottom:14px;
  }
  .leistung h3{font-family:'Baloo 2',sans-serif; font-size:19px; margin-bottom:6px;}
  .leistung p{color:var(--ink-soft); font-size:15.5px;}
  .leistung .preis{
    color:var(--earth-dark); font-weight:700; font-size:14.5px;
    margin-top:8px; margin-bottom:0;
  }
  @media (max-width:560px){
    .leistung{flex-basis:100%;}
  }

  /* ueber uns */
  .ueber-grid{display:flex; flex-wrap:wrap; gap:48px; align-items:center;}
  .ueber-photo{
    flex:1 1 260px; max-width:320px;
    aspect-ratio:4/5; background:#EFEAE0; border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
    font-size:14px; border:1px solid var(--border);
  }
  .ueber-grid > div:last-child{flex:2 1 360px;}

  /* einzugsgebiet */
  .gebiet{background:#F1EEE5; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .orte{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
  .ort{
    background:var(--card); border:1px solid var(--border); border-radius:999px;
    padding:8px 18px; font-size:14.5px; font-weight:500;
  }

  /* kontakt */
  .kontakt-grid{display:flex; flex-wrap:wrap; gap:56px;}
  .kontakt-grid > div{flex:1 1 320px;}
  .kontakt-info h3{font-family:'Baloo 2',sans-serif; font-size:18px; margin-top:28px;}
  .kontakt-info p{color:var(--ink-soft);}
  form{display:grid; gap:14px;}
  label{font-size:14px; font-weight:600; margin-bottom:4px; display:block;}
  input, textarea, select{
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
    font-family:'Karla',sans-serif; font-size:15px; background:#fff; color:var(--ink);
  }
  input:focus, textarea:focus, select:focus{outline:2px solid var(--earth); outline-offset:1px;}
  textarea{min-height:110px; resize:vertical;}
  .row-2{display:flex; flex-wrap:wrap; gap:14px;}
  .row-2 > div{flex:1 1 200px;}

  footer{background:var(--ink); color:#E9E6DE; padding:48px 0 28px;}
  .footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
  footer a{color:#E9E6DE; text-decoration:none;}
  footer a:hover{color:#fff; text-decoration:underline;}
  .footer-links{display:flex; gap:20px; flex-wrap:wrap; list-style:none; padding:0; margin:0;}
  .footer-links li{margin-right:20px;}
  .footer-links li:last-child{margin-right:0;}
  .footer-bottom{
    margin-top:32px; padding-top:20px; border-top:1px solid #3f3e3a;
    font-size:13.5px; color:#B7B4AC; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
</style>

/* Rechtstexte (Impressum, Datenschutz) */
.legal{max-width:760px; margin:0 auto; padding:64px 28px 96px;}
.legal h1{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:0.6em;}
.legal h2{font-size:1.25rem; margin-top:1.8em; color:var(--earth-dark);}
.legal p, .legal li{color:var(--ink); max-width:70ch;}
.legal ul{padding-left:1.2em;}
.legal a{text-decoration:underline;}

/* Preisliste */
.preisliste{max-width:760px; margin:0 auto; padding:64px 28px 96px;}
.preisliste h1{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:0.3em;}
.preisliste-intro{color:var(--ink-soft); margin-bottom:2.5em;}
.preisliste-gruppe{margin-bottom:2.4em;}
.preisliste-gruppe h2{font-size:1.2rem; color:var(--ink); margin-bottom:0.2em;}
.preisliste-gruppe .beschreibung{color:var(--ink-soft); font-size:14.5px; margin-bottom:0.8em;}
.preis-zeile{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:11px 0; border-bottom:1px solid var(--border);
}
.preisliste-gruppe .preis-zeile:last-child{border-bottom:none;}
.preis-zeile .bezeichnung{color:var(--ink);}
.preis-zeile .betrag{font-weight:700; color:var(--earth-dark); white-space:nowrap;}
.preisliste-hinweis{
  margin-top:2em; padding:16px 20px; background:#F1EEE5; border-radius:14px;
  font-size:14.5px; color:var(--ink-soft);
}