/* PAS Garten- und Landschaftsbau */
:root{
  --blau:#d80c18;
  --blau-dunkel:#a80812;
  --dunkel:#1c1c1c;
  --text:#2a2a2a;
  --grau:#6b6b6b;
  --hellgrau:#f7f7f7;
  --linie:#e4e4e4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Lato",-apple-system,Segoe UI,Arial,sans-serif;
  color:#4a4a4a;line-height:1.75;font-size:17px;background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4,.knopf,nav,.logo-text b,.marke-text b{font-family:"Poppins",-apple-system,Segoe UI,Arial,sans-serif}
.strich{width:84px;height:4px;background:var(--blau);margin:22px auto 26px}

/* ---------- Topbar ---------- */
.topbar{background:var(--blau);color:#fff;font-size:14.5px}
.topbar .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 34px;padding-top:9px;padding-bottom:9px}
.topbar span{display:inline-flex;align-items:center;gap:8px}
.topbar svg{width:16px;height:16px;stroke:#fff;flex:none}
.topbar a:hover{text-decoration:underline}

/* ---------- Kopf ---------- */
header{background:#fff;border-bottom:1px solid var(--linie);position:relative;z-index:40}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.logo img{height:74px;width:auto;display:block}
.logo-text b{font-size:28px;font-weight:800;color:var(--text);letter-spacing:.06em;display:block;line-height:1}
.logo-text em{font-style:normal;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8d8d8d}
nav ul{display:flex;gap:8px;list-style:none;font-size:15px;font-weight:600}
nav a{display:block;padding:10px 16px;color:var(--text);transition:background .15s,color .15s}
nav a:hover{color:var(--blau)}
nav a.aktiv{background:var(--blau);color:#fff}
.menu-knopf{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-knopf span{display:block;width:30px;height:3px;background:var(--blau);margin:5px 0;border-radius:2px}

/* Kopf über dem Hero (Startseite) */
body.start header{background:transparent;border-bottom:0;position:absolute;left:0;right:0;top:40px}
body.start nav a{color:#fff}
body.start nav a:hover{color:var(--blau)}
body.start .topbar{position:absolute;left:0;right:0;top:0;z-index:41;background:rgba(216,12,24,.92)}
body.start .logo img{height:82px}

/* ---------- Hero (Startseite) ---------- */
.hero{position:relative;min-height:58vh;display:flex;align-items:center;text-align:center;
  background:#333 url("bilder/hero.jpg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:rgba(22,28,32,.55)}
.hero .wrap{position:relative;z-index:2;color:#fff;padding:120px 22px 60px}
.hero .gruss{font-family:"Poppins";font-size:21px;font-weight:600;margin-bottom:14px}
.hero h1{font-size:48px;line-height:1.12;font-weight:800;margin-bottom:18px}
.hero .slogan{font-family:"Caveat",cursive;font-size:35px;line-height:1.25;font-weight:600}
.hero p{font-size:18px;max-width:40ch;margin:0 auto 34px;color:#eaeaea;font-weight:300}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{position:relative;min-height:230px;display:flex;align-items:center;justify-content:center;
  background:#333 center/cover no-repeat;text-align:center}
.seitenkopf::after{content:"";position:absolute;inset:0;background:rgba(22,28,32,.58)}
.seitenkopf h1{position:relative;z-index:2;color:#fff;font-size:40px;font-weight:800}

/* ---------- Knöpfe ---------- */
.knoepfe{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.knopf{display:inline-block;padding:17px 34px;font-size:16px;font-weight:600;transition:background .18s,color .18s}
.knopf-voll{background:var(--blau);color:#fff}
.knopf-voll:hover{background:var(--blau-dunkel)}
.knopf-klar{color:#fff}
.knopf-klar:hover{color:var(--blau)}

/* ---------- Abschnitte ---------- */
section{padding:88px 0;text-align:center}
.ueberschrift-klein{font-family:"Poppins";font-size:19px;color:var(--blau);font-weight:600;margin-bottom:6px}
h2{font-size:42px;line-height:1.18;font-weight:800;color:var(--text)}
h3{font-size:22px;font-weight:700;color:var(--text)}
.fliess{max-width:76ch;margin:0 auto;font-weight:400;line-height:1.72;color:#4a4a4a}
.fliess p + p{margin-top:17px}

/* Bild mit versetztem blauem Rahmen */
.bildrahmen{position:relative;max-width:760px;margin:52px auto 0}
.bildrahmen .inhalt{position:relative;z-index:2}
.bildrahmen img{width:100%;height:auto;display:block}
.bildrahmen::after{content:"";position:absolute;left:5%;right:-4%;top:9%;bottom:-9%;border:4px solid var(--blau);z-index:1}

/* Telefon */
.telefon{padding-top:70px}
.telefon .zeile{font-family:"Poppins";font-size:19px;font-weight:600;letter-spacing:.14em;color:var(--text);
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:14px}
.telefon .zeile svg{width:26px;height:26px;flex:none;stroke:var(--blau)}
.telefon .nummer{font-family:"Poppins";font-size:40px;font-weight:800;color:var(--text);margin-top:10px}
.telefon .nummer a:hover{color:var(--blau)}

/* Band mit Bild */
.band{position:relative;padding:110px 0;text-align:center;color:#fff;
  background:#2b2b2b url("bilder/band.jpg") center/cover no-repeat}
.band::after{content:"";position:absolute;inset:0;background:rgba(25,30,34,.72)}
.band .wrap{position:relative;z-index:2}
.band h2{color:#fff;font-size:38px}
.band .fliess{color:#e6e6e6;margin-bottom:38px}
.band .strich{margin-top:0}

/* Leistungskacheln (Startseite) */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px}
.kachel{position:relative;min-height:330px;display:flex;align-items:center;justify-content:center;
  background:#555 center/cover no-repeat;overflow:hidden}
.kachel::after{content:"";position:absolute;inset:0;background:rgba(25,30,34,.42);transition:background .25s}
.kachel:hover::after{background:rgba(25,30,34,.18)}
.kachel span{position:relative;z-index:2;font-family:"Poppins";font-size:26px;font-weight:700;color:#fff;
  padding:0 18px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.k1{background-image:url("bilder/leistung-erdarbeiten.jpg")}
.k2{background-image:url("bilder/leistung-terrassen.jpg")}
.k3{background-image:url("bilder/leistung-einfahrten.jpg")}
.k4{background-image:url("bilder/leistung-mauern.jpg")}
.k5{background-image:url("bilder/leistung-zaun.jpg")}
.k6{background-image:url("bilder/leistung-grossflaechen.jpg")}

/* Karten (Unterseite Leistungen) */
.karten{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px;text-align:center}
.karte{background:#fff;border:1px solid var(--linie);box-shadow:0 2px 14px rgba(0,0,0,.05);
  padding:0 0 32px;transition:box-shadow .2s,transform .2s}
.karte:hover{box-shadow:0 10px 30px rgba(0,0,0,.1);transform:translateY(-3px)}
.karte img{width:100%;aspect-ratio:3/2;object-fit:cover}
.karte h3{margin:26px 0 0;font-size:23px}
.karte .strich{margin:16px auto 18px;width:60px;height:3px}
.karte p{font-size:16px;padding:0 30px;font-weight:300}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:820px;margin:54px auto 0}
.zahl b{font-family:"Poppins";display:block;font-size:48px;font-weight:800;color:var(--text);line-height:1.1}
.zahl span{font-family:"Poppins";font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:50px}
.galerie figure{overflow:hidden;margin:0}
.galerie img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.galerie figure:hover img{transform:scale(1.05)}

/* Kontaktkacheln */
.kontaktgitter{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.kontaktkachel{border:1px solid var(--linie);padding:38px 26px;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.kontaktkachel svg{width:34px;height:34px;stroke:var(--blau);margin:0 auto 16px}
.kontaktkachel h3{font-size:19px;margin-bottom:8px}
.kontaktkachel p{font-size:16px;font-weight:300}
.kontaktkachel a:hover{color:var(--blau)}

/* Textseiten (Impressum, Datenschutz) */
.textseite{text-align:left;max-width:860px;margin:0 auto;font-weight:300}
.textseite h2{font-size:30px;margin:44px 0 14px;text-align:left}
.textseite h2:first-child{margin-top:0}
.textseite h3{font-size:20px;margin:28px 0 8px}
.textseite p + p{margin-top:14px}
.textseite ul{margin:12px 0 12px 22px}
.textseite li{margin-bottom:6px}

/* ---------- Fuß ---------- */
.abschluss{background:var(--dunkel);color:#b4b4b4;padding:70px 0 0}
.fussoben{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:52px;text-align:left}
.abschluss .marke img{max-width:250px;width:100%;height:auto;margin-bottom:22px}
.marke-text b{font-size:34px;font-weight:800;color:#fff;letter-spacing:.06em;display:block;line-height:1}
.marke-text em{font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8f8f8f;display:block;margin-top:6px}
.abschluss .marke p{font-size:15px;font-weight:300;margin-top:4px}
.abschluss h4{color:#fff;font-size:17px;margin-bottom:18px;font-weight:700}
.abschluss ul{list-style:none}
.abschluss li{margin-bottom:9px;font-size:15.5px}
.abschluss a:hover{color:var(--blau)}
.abschluss li.zeiten{margin-top:18px;line-height:1.55}
.abschluss li.zeiten b{color:#fff;font-weight:700}

.fuss-unten{border-top:1px solid #333;padding:20px 0;font-size:14px;color:#7d7d7d;text-align:center}

@media(max-width:980px){
  .kacheln,.galerie,.zahlen,.karten,.kontaktgitter{grid-template-columns:repeat(2,1fr)}
  .fussoben{grid-template-columns:1fr 1fr;gap:34px}
  .hero h1{font-size:40px}
  h2{font-size:31px}
  nav ul{gap:2px}
  nav a{padding:10px 11px;font-size:14px}
}
@media(max-width:700px){
  nav{display:none}
  .menu-knopf{display:block}
  .topbar .wrap{font-size:13px;gap:4px 18px}
  .kacheln,.galerie,.zahlen,.karten,.kontaktgitter,.fussoben{grid-template-columns:1fr}
  .fussoben{text-align:center}
  .abschluss .marke img{margin-left:auto;margin-right:auto}
  section{padding:58px 0}
  .hero{min-height:auto}
  .hero .wrap{padding:135px 22px 62px}
  .hero h1{font-size:32px}
  .hero .slogan{font-size:29px}
  .telefon .nummer{font-size:30px}
  .band{padding:72px 0}
  .seitenkopf{min-height:170px}
  .seitenkopf h1{font-size:28px}
  .logo img,body.start .logo img{height:60px}
  .bildrahmen::after{left:4%;right:-3%}
}

/* ---------- Kontaktseite: Kasten + Formular ---------- */
.kontaktzwei{display:grid;grid-template-columns:0.9fr 1.1fr;gap:30px;margin-top:52px;text-align:left}
.infokasten,.formkasten{background:#fff;border:1px solid var(--linie);box-shadow:0 2px 14px rgba(0,0,0,.05);padding:38px 34px}
.infokasten h3,.formkasten h3{font-size:22px;margin-bottom:6px}
.infokasten .strich,.formkasten .strich{margin:14px 0 26px;width:60px;height:3px}
.infozeile{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--linie)}
.infozeile:last-child{border-bottom:0;padding-bottom:0}
.infozeile svg{width:24px;height:24px;stroke:var(--blau);flex:none;margin-top:4px}
.infozeile b{display:block;font-family:"Poppins";font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-weight:600;margin-bottom:2px}
.infozeile p{font-size:16.5px;font-weight:300;line-height:1.6}
.infozeile a:hover{color:var(--blau)}

.feld{margin-bottom:18px}
.feld label{display:block;font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px;font-family:"Poppins"}
.feld input,.feld textarea{
  width:100%;padding:13px 15px;border:1px solid var(--linie);background:var(--hellgrau);
  font-family:inherit;font-size:16px;color:var(--text);transition:border-color .15s,background .15s;
}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blau);background:#fff}
.feld textarea{min-height:150px;resize:vertical}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;font-weight:300;margin:6px 0 22px}
.zustimmung input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--blau)}
.zustimmung a{color:var(--blau);text-decoration:underline}
.formkasten button{
  background:var(--blau);color:#fff;border:0;padding:16px 34px;font-size:16px;font-weight:600;
  font-family:"Poppins";cursor:pointer;transition:background .18s;
}
.formkasten button:hover{background:var(--blau-dunkel)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{padding:15px 18px;margin-bottom:24px;font-size:15.5px;border-left:4px solid var(--blau);background:var(--hellgrau)}
.hinweis.fehler{border-left-color:#c0392b}

@media(max-width:980px){ .kontaktzwei{grid-template-columns:1fr} }
@media(max-width:560px){ .feldpaar{grid-template-columns:1fr} .infokasten,.formkasten{padding:28px 22px} }

/* Einsatzgebiete im Fuß */
.einsatzgebiete{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:22px;text-align:center;font-size:14px;color:#9a9a9a}
.einsatzgebiete span{margin-right:6px}
.einsatzgebiete a{color:#b9b9b9;padding:0 9px;border-left:1px solid rgba(255,255,255,.14)}
.einsatzgebiete a:first-of-type{border-left:0}
.einsatzgebiete a:hover{color:var(--blau)}

/* Aufzählung auf den Leistungsseiten */
.merkmale{list-style:none;text-align:left;max-width:760px;margin:0 auto}
.merkmale li{position:relative;padding:0 0 15px 30px;line-height:1.75}
.merkmale li::before{content:"";position:absolute;left:3px;top:11px;width:9px;height:9px;background:var(--blau);transform:rotate(45deg)}
.merkmale b{color:var(--dunkel);font-weight:700}

.karte .mehr{display:inline-block;margin-top:14px;color:var(--blau);font-family:Poppins,sans-serif;font-weight:600;font-size:14.5px}
.karte .mehr:hover{color:var(--blau-dunkel)}

.galerie-zwei{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto}

/* Text neben Bild — verkürzt die Seite und lockert sie auf */
.textbild{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:stretch}
.textbild > div:not(.tb-bild){align-self:center}
.textbild.gedreht .tb-bild{order:-1}
.textbild .fliess{max-width:none;text-align:left;margin:0}
.textbild .fliess p{margin-bottom:16px}
.textbild h2{text-align:left}
.textbild .strich{margin-left:0;margin-right:0}
.tb-bild{position:relative;display:flex}
.tb-bild img{width:100%;height:100%;min-height:290px;object-fit:cover;display:block;position:relative;z-index:2}
.tb-bild::after{content:"";position:absolute;left:-4%;right:4%;top:7%;bottom:-7%;
  border:4px solid var(--blau);z-index:1}
.textbild.gedreht .tb-bild::after{left:4%;right:-4%}
@media (max-width:860px){
  .textbild{grid-template-columns:1fr;gap:30px}
  .textbild.gedreht .tb-bild{order:0}
  .textbild h2,.textbild .fliess{text-align:center}
  .textbild .strich{margin-left:auto;margin-right:auto}
  .tb-bild::after{display:none}
}

/* Häufige Fragen — aufklappbar */
.fragen{max-width:860px;margin:0 auto;text-align:left}
.frage{border-bottom:1px solid var(--linie)}
.frage:first-of-type{border-top:1px solid var(--linie)}
.frage summary{cursor:pointer;list-style:none;padding:20px 44px 20px 2px;position:relative;
  font-family:"Poppins",sans-serif;font-weight:600;font-size:17.5px;color:var(--text)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.frage[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.frage summary:hover{color:var(--blau)}
.frage .antwort{padding:0 44px 22px 2px}
.frage .antwort p{font-weight:400;line-height:1.72;color:#4a4a4a;margin:0}
@media (max-width:620px){
  .frage summary{font-size:16.5px;padding-right:36px}
}

.tb-bild-zwei{display:flex;flex-direction:column;gap:18px}
.tb-bild-zwei img{height:auto;min-height:0;aspect-ratio:4/3}
.tb-bild-zwei::after{display:none}

/* ---------------------------------------------------- Startseiten-Hero
   Text links auf dunkler Fläche, Bild rechts hinter einer Schräge.
   Das Bild nimmt nur die halbe Breite ein und wird dadurch deutlich
   schärfer dargestellt als ein Bild über die volle Breite. */
.hero.schraeg{min-height:0;display:grid;grid-template-columns:1fr 1fr;
  background:#1c242a;align-items:center;position:relative;overflow:hidden}
.hero.schraeg::after{display:none}
.schraeg-text{padding:98px 90px 98px 7vw;color:#fff;position:relative;z-index:3;text-align:left}
.schraeg-text .gruss,.schraeg-text h1,.schraeg-text .slogan,.schraeg-text p{text-align:left}
.schraeg-text .strich{margin-left:0;margin-right:0}
.schraeg-text .knoepfe{justify-content:flex-start}
.schraeg-text h1{font-size:44px;line-height:1.14}
.schraeg-text p{max-width:30em;margin-left:0}
.schraeg-balken{position:absolute;right:0;top:0;bottom:0;width:60%;background:var(--blau);
  clip-path:polygon(14% 0, 17.4% 0, 3.4% 100%, 0% 100%);z-index:2}
.schraeg-bild{position:absolute;right:0;top:0;bottom:0;width:58%;
  background:url("bilder/hero.jpg") center/cover no-repeat;
  clip-path:polygon(16% 0, 100% 0, 100% 100%, 0% 100%);z-index:1}

@media (max-width:900px){
  /* Auf dem Handy: Bild oben, Schräge waagerecht, Text darunter */
  .hero.schraeg{grid-template-columns:1fr;display:flex;flex-direction:column;overflow:hidden}
  .schraeg-bild{position:relative;order:1;width:100%;height:27vh;min-height:195px;right:auto;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 88%)}
  .schraeg-balken{position:relative;order:2;top:auto;bottom:auto;left:0;right:auto;width:100%;
    height:8px;background:var(--blau);clip-path:none;margin-top:-8px;
    transform:skewY(-1.9deg);transform-origin:left center;z-index:4}
  .schraeg-text{order:3;padding:24px 22px 36px;text-align:center;position:relative;z-index:3}
  .schraeg-text .gruss,.schraeg-text h1,.schraeg-text .slogan,.schraeg-text p{text-align:center}
  .schraeg-text .gruss{margin-bottom:6px;font-size:14px}
  .schraeg-text h1{font-size:30px;line-height:1.16;margin-bottom:10px}
  .schraeg-text .slogan{font-size:27px}
  .schraeg-text .strich{margin:14px auto 16px}
  .schraeg-text p{max-width:none;font-size:16px;margin-bottom:18px}
  .schraeg-text .knoepfe{justify-content:center;gap:12px;flex-wrap:wrap}
  .knopf{min-height:48px;display:inline-flex;align-items:center}
}
@media (max-width:620px){
  .topbar{font-size:13px;padding:6px 0}
  .topbar .wrap{gap:4px 14px}
  .logo img,body.start .logo img{height:46px}
  header .wrap{padding-top:10px;padding-bottom:10px}
}