@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.woff2") format("woff2")}

  :root{
    --blau:#1f3a5f;
    --gold:#b8892a;
    --text:#111;
    --weiss:#fff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Open Sans",Arial,sans-serif;color:var(--text);background:var(--weiss);line-height:1.4}
  a{color:inherit;text-decoration:none}
  a:hover{color:var(--gold)}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    margin:40px auto 0;
    max-width:1230px;
    min-height:588px;
    background:url("../img/hero-kueche.jpg") center/cover no-repeat;
    overflow:hidden;
  }
  .hero::before{ /* helle Milchglas-Überlagerung wie im Original */
    content:"";position:absolute;inset:0;
    background:rgba(255,255,255,.86);
  }
  .hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:1fr 2.2fr 1fr;
    grid-template-areas:
      ".      head   ."
      ".      claim  meister"
      "region kontakt .";
    column-gap:30px;
    padding:85px 40px 60px;
    letter-spacing:.08em;
  }
  .logo{grid-area:head;font-family:Montserrat,Arial,sans-serif;font-weight:700;color:var(--blau);
        font-size:44px;line-height:1;letter-spacing:0}
  .logo span{display:block}
  .logo span+span{padding-left:86px}
  .claim{grid-area:claim;text-align:center;font-size:16px;margin-top:30px;white-space:normal}
  .claim p+p{margin-top:22px}
  .meister{grid-area:meister;align-self:end;text-align:center;font-size:18px;letter-spacing:0;color:#333;line-height:2}
  .region{grid-area:region;justify-self:end;font-size:16px;margin-top:20px}
  .region h2{font-size:16px;font-weight:400;text-decoration:underline}
  .region ul{list-style:none}
  .region li::before{content:"- "}
  .kontakt{grid-area:kontakt;display:flex;flex-direction:column;gap:28px;margin-top:20px;padding-left:120px}
  .kontakt a{display:flex;align-items:center;gap:12px;font-size:16px;line-height:1.3}
  .kontakt img{width:54px;height:auto;flex-shrink:0}

  /* ---------- Leistungen ---------- */
  .leistungen{
    max-width:1000px;margin:90px auto 80px;padding:0 20px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  }
  .leistung{text-align:left}
  .icon{width:78px;height:78px;margin:0 auto 26px;border:2px solid var(--gold);border-radius:50%;
        display:flex;align-items:center;justify-content:center;background:#fff}
  .icon img{max-width:72%;max-height:72%}
  .leistung ul{padding-left:20px;font-size:16px;letter-spacing:.08em;max-width:240px;margin:0 auto}
  .leistung li+li{margin-top:16px}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid #ddd;padding:28px 20px;text-align:center;font-size:14px;color:#444}
  footer nav{margin-top:8px;display:flex;gap:20px;justify-content:center}

  /* ---------- Rechtstexte ---------- */
  .topbar{max-width:1230px;margin:0 auto;padding:24px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #ddd}
  .topbar .logo{font-size:26px}
  .topbar .logo span+span{padding-left:50px}
  .topbar .zurueck{font-size:15px;color:var(--blau)}
  .recht{max-width:820px;margin:40px auto 70px;padding:0 20px;font-size:16px;line-height:1.65}
  .recht h1{font-family:Montserrat,Arial,sans-serif;color:var(--blau);font-size:32px;margin-bottom:24px}
  .recht h2{font-size:20px;color:var(--blau);margin:34px 0 10px}
  .recht h3{font-size:17px;margin:22px 0 6px}
  .recht p,.recht ul{margin-bottom:12px}
  .recht ul{padding-left:22px}
  .recht a{color:var(--blau);text-decoration:underline}
  .stand{color:#555;font-size:14px;margin-top:30px}

  /* ---------- Mobil ---------- */
  @media (max-width:860px){
    .hero{margin-top:0;min-height:0}
    .hero-inner{
      grid-template-columns:1fr;
      grid-template-areas:"head" "claim" "meister" "kontakt" "region";
      padding:50px 16px 40px;row-gap:24px;
    }
    .logo{font-size:36px;justify-self:center}
    .logo span+span{padding-left:60px}
    .claim{margin-top:0;font-size:15px}
    .meister{line-height:1.5}
    .kontakt{padding-left:0;align-items:center}
    .region{justify-self:center;margin-top:0}
    .leistungen{grid-template-columns:1fr;margin:50px auto}
  }