:root{
  --sand:#ECE2CC;
  --paper:#FBF7EE;
  --pine:#25311F;
  --moss:#5C6E45;
  --ochre:#C1832B;
  --line: rgba(37,49,31,0.14);
  --radius-lg: 34px;
  --radius-md: 20px;
  --maxw: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--pine);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque', sans-serif;
  margin:0 0 .4em 0;
  letter-spacing:-0.01em;
  font-weight:700;
}
p{margin:0 0 1em 0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:'Work Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--moss);
  display:flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:16px;height:16px;
  background-color:var(--ochre);
  -webkit-mask: url("../img/paw.svg") center/contain no-repeat;
  mask: url("../img/paw.svg") center/contain no-repeat;
}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(236,226,204,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--pine);}
.brand span{color:var(--ochre);}
nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0;font-size:.92rem;font-weight:500;}
nav ul a{text-decoration:none;position:relative;padding:4px 0;}
nav ul a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ochre);transition:width .25s ease;}
nav ul a:hover::after, nav ul a.active::after{width:100%;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--pine);color:var(--paper);
  padding:12px 22px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.9rem;
  border:1px solid var(--pine);
  transition:transform .2s ease, background .2s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);background:#1a2417;}
.btn.ghost{background:transparent;color:var(--pine);}
.btn.ochre{background:var(--ochre);border-color:var(--ochre);color:var(--pine);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--pine);margin:5px 0;transition:.25s;}

/* Hero */
.hero{
  padding:70px 0 40px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.9rem);
  line-height:1.03;
  margin-top:.3em;
}
.hero h1 em{font-style:normal;color:var(--ochre);}
.hero p.lead{font-size:1.12rem;max-width:46ch;color:#3c4a34;}
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.hero-art{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/4.3;
  box-shadow:0 30px 60px -20px rgba(37,49,31,.35);
}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.hero-badge{
  position:absolute; bottom:18px; left:18px;
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:14px 18px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.25);
  max-width:260px;
}
.hero-badge strong{display:block;font-family:'Bricolage Grotesque';font-size:.95rem;}
.hero-badge small{color:var(--moss);font-size:.78rem;}

/* Sections generic */
section{padding:86px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(1.8rem,3vw,2.6rem);}

/* Page header (subpages) */
.page-hero{
  padding:60px 0 30px;
  text-align:center;
}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);}
.page-hero p{max-width:56ch;margin:0 auto;color:#3c4a34;}

/* Value cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.card{
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:32px 28px;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(37,49,31,.25);}
.card .icon{
  width:46px;height:46px;border-radius:14px;
  background:var(--sand);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  font-size:1.3rem;
}
.card h3{font-size:1.15rem;margin-bottom:.4em;}
.card p{font-size:.94rem;color:#3c4a34;margin:0;}

/* Dark band */
.band-dark{
  background:var(--pine);
  color:var(--paper);
  border-radius:48px;
  margin:0 20px;
}
.band-dark .wrap{padding-top:0;padding-bottom:0;}
.band-dark .eyebrow{color:#B9C79F;}
.band-dark p{color:#D9DFCB;}

.gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:110px;
  gap:12px;
  margin-top:36px;
}
.gallery figure{margin:0;overflow:hidden;border-radius:18px;position:relative;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery figure:hover img{transform:scale(1.08);}
.g1{grid-column:span 3;grid-row:span 2;}
.g2{grid-column:span 3;grid-row:span 1;}
.g3{grid-column:span 3;grid-row:span 1;}
.g4{grid-column:span 2;grid-row:span 2;}
.g5{grid-column:span 2;grid-row:span 2;}
.g6{grid-column:span 2;grid-row:span 2;}

/* Schedule / Tagesablauf */
.schedule{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
  margin-top:20px;
}
.schedule::before{
  content:"";
  position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--ochre) 0 10px, transparent 10px 20px);
}
.slot{position:relative;padding:0 18px;text-align:center;}
.slot .dot{width:14px;height:14px;border-radius:50%;background:var(--ochre);margin:20px auto 22px;position:relative;}
.slot h4{font-family:'Bricolage Grotesque';font-size:1.3rem;margin-bottom:.2em;}
.slot span{color:var(--moss);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}
.slot p{font-size:.9rem;color:#3c4a34;margin-top:.5em;}

/* Führerschein pricing */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:34px;}
.price-card h3{font-size:1.2rem;}
.price-card .amount{font-family:'Bricolage Grotesque';font-size:2.4rem;font-weight:700;color:var(--ochre);margin:.2em 0 .3em;}
.price-card ul{padding-left:1.1em;margin:.8em 0 0;font-size:.92rem;color:#3c4a34;}
.price-card li{margin-bottom:.4em;}

.law-note{
  margin-top:40px;background:var(--sand);
  border:1px dashed var(--moss);
  border-radius:var(--radius-md);
  padding:26px 30px;font-size:.92rem;
}
.law-note h4{font-size:1rem;margin-bottom:.5em;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start;}
.info-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:30px;}
.info-block .row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.info-block .row:last-child{border-bottom:none;}
.info-block .row b{display:block;font-size:.85rem;color:var(--moss);text-transform:uppercase;letter-spacing:.05em;}
form{display:grid;gap:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
input,textarea{
  width:100%;border:1px solid var(--line);background:var(--paper);
  border-radius:14px;padding:14px 16px;font-family:inherit;font-size:.95rem;color:var(--pine);
}
input:focus,textarea:focus{outline:2px solid var(--ochre);outline-offset:1px;}
textarea{min-height:120px;resize:vertical;}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:#3c4a34;}
.consent input{width:16px;height:16px;margin-top:3px;}

/* Team page */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:20px;
}
.team-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.team-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(37,49,31,.25);}
.team-photo{aspect-ratio:1/1;overflow:hidden;}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-info{padding:22px 22px 26px;}
.team-info h3{font-size:1.1rem;margin-bottom:.1em;}
.team-role{color:var(--ochre);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.7em;}
.team-info p{font-size:.92rem;color:#3c4a34;margin:0;}

footer{padding:50px 0 34px;border-top:1px solid var(--line);margin-top:40px;}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;font-size:.88rem;}
.foot-grid a{text-decoration:none;}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;color:var(--moss);}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* Mobile */
@media (max-width: 880px){
  .hero{grid-template-columns:1fr;padding-top:36px;}
  .cards{grid-template-columns:1fr;}
  .schedule{grid-template-columns:1fr;gap:26px;}
  .schedule::before{display:none;}
  .price-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  nav ul{
    position:fixed;inset:64px 0 0 0;
    flex-direction:column;
    background:var(--sand);
    padding:30px 28px;
    gap:8px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  nav ul.open{transform:translateX(0);}
  nav ul a{display:block;padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--line);}
  .menu-toggle{display:block;}
  .nav .btn.ghost{display:none;}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;}
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1;grid-row:span 1;}
  .g1{grid-column:span 2;grid-row:span 2;}
  .band-dark{margin:0 12px;border-radius:32px;}
  section{padding:60px 0;}
}
@media (max-width: 560px){
  .team-grid{grid-template-columns:1fr;}
}