/* ─── Farbpalette (angepasst ans Logo) ─── */
:root{
  --red:#c30000;
  --green:#1a8b5d;          /* kräftigeres Grün aus Logo */
  --bg:#f6f7fa;
  --white:#ffffff;
  --radius:12px;
  --shadow:0 4px 18px rgba(0,0,0,.1);
  --max:1160px;
  --tr:.25s;
  --drawerW:270px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;color:#333;background:var(--bg);line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:var(--max);margin:auto;padding:0 18px}
.flex{display:flex;align-items:center}
.col{flex-direction:column;text-align:center}

.brand-red{color:var(--red)}
.btn{display:inline-block;padding:14px 34px;background:var(--green);color:#fff;border-radius:var(--radius);font-weight:600;transition:background var(--tr)}
.btn:hover{background:#14744c}

/* ─── Navbar ─── */
.navbar{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:120}
.logo{height:48px;margin-right:20px}
.links a{margin:0 16px;color:#333;text-decoration:none;font-weight:500;position:relative}
.links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--green);transition:width .3s}
.links a:hover::after{width:100%}

/* Burger icon */
.burger{display:none;width:34px;height:26px;background:none;border:none;flex-direction:column;justify-content:space-between;cursor:pointer;margin-left:auto}
.burger span{display:block;width:100%;height:3px;background:var(--green);transition:transform .3s}

/* Off-canvas drawer */
.drawer{position:fixed;top:0;left:calc(-1 * var(--drawerW));width:var(--drawerW);height:100vh;background:var(--white);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:32px;padding:90px 26px;transition:transform var(--tr);z-index:110}
.drawer.show{transform:translateX(var(--drawerW))}

.drawer a{color:#333;text-decoration:none;font-size:1.1rem;font-weight:500}
.drawer a:hover{color:var(--green)}

/* ─── Hero ─── */
.hero{background:url('hero.jpeg') center/cover no-repeat;min-height:78vh;position:relative;display:flex;align-items:center}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-content{position:relative;z-index:2;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.hero h1{font-size:3.3rem;font-weight:700;margin-bottom:10px;letter-spacing:.8px}
.subtitle{font-size:1.6rem;font-weight:500}
.slogan{max-width:560px;margin:20px auto}

/* ─── Sections ─── */
.section{padding:80px 0}
.section.alt{background:var(--white)}
.title{text-align:center;font-size:2rem;margin-bottom:54px}

/* ─ Grid helper ─ */
.grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--white);padding:32px;border-radius:var(--radius);box-shadow:var(--shadow);transition:transform var(--tr)}
.card:hover{transform:translateY(-6px)}
.card h3{color:var(--green);margin-bottom:12px}

.grid-about{display:grid;gap:46px;align-items:center;
            grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.about-img{border-radius:var(--radius);box-shadow:var(--shadow)}
.highlight{color:var(--red);margin-top:18px;font-weight:600}

/* Reviews */
.review{background:var(--white);padding:28px;border-radius:var(--radius);box-shadow:var(--shadow);font-style:italic}
.review cite{display:block;margin-top:14px;font-style:normal;color:#666;font-weight:500}

/* Contact */
.contact-grid{display:grid;gap:30px 60px;margin-bottom:42px;
              grid-template-columns:repeat(auto-fit,minmax(220px,1fr));text-align:center}
.contact-grid h3{color:var(--green);margin-bottom:8px}
.contact-grid a{color:var(--red);text-decoration:none}
.contact-grid a:hover{text-decoration:underline}
.map-wrap iframe{width:100%;height:360px;border:0;border-radius:var(--radius);box-shadow:var(--shadow)}

/* Footer */
.footer{text-align:center;font-size:.9rem;padding:24px;color:#555}

/* ─── Responsive ─── */
@media(max-width:900px){
  .hero h1{font-size:2.7rem}
  .subtitle{font-size:1.4rem}
}

/* Show burger + hide desktop nav on narrow screens */
@media(max-width:768px){
  .links{display:none}
  .burger{display:flex}
}
