/* ==========================================================
   ISK – Ingenieur- und Sachverständigenbüro Kronenberg
   Gemeinsames Stylesheet für alle Seiten
   Farben nach ISK-CI: Dunkelgrün #385623, Hellgrün #E2EFD9
   ========================================================== */

:root{
  --gruen:#385623;
  --gruen-dunkel:#2b431a;
  --hellgruen:#E2EFD9;
  --papier:#FBFAF7;
  --linie:#E3E0D8;
  --text:#1C2018;
  --grau:#6B7064;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gruen);}

.wrap{max-width:1060px;margin:0 auto;padding:0 max(28px,8%);}
.kopf .wrap{max-width:none;padding-left:max(20px,2.5%);padding-right:max(20px,2.5%);}

/* ---------- Label in Versalien ---------- */
.label{
  font-family:var(--sans);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gruen);font-weight:600;display:block;margin-bottom:0.7em;
}

/* ---------- Kopfzeile: Logo links, Navigation rechts ---------- */
.kopf{
  border-bottom:1px solid var(--linie);
  background:var(--papier);
  position:sticky;top:0;z-index:60;
}
.kopf .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5em;padding-top:1em;padding-bottom:1em;
}
.kopf-links{display:flex;align-items:center;gap:0.85em;flex-shrink:0;text-decoration:none;}
.kopf-links img{height:46px;width:auto;display:block;flex-shrink:0;}
.marke{
  font-family:var(--serif);font-size:1.05rem;color:var(--text);
  letter-spacing:0.05em;white-space:nowrap;
}
.marke b{font-weight:400;color:var(--gruen);}
.kopf-rechts{display:flex;align-items:center;gap:1.5em;min-width:0;}
.nav{display:flex;gap:1.4em;font-size:0.82rem;letter-spacing:0.04em;font-family:var(--sans);}
.nav a{
  text-decoration:none;color:var(--grau);padding:0.4em 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current]{color:var(--gruen);border-bottom-color:var(--gruen);}

/* Menü fürs Handy, ohne JavaScript */
.menu{display:none;}
.menu summary{
  list-style:none;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;padding:0.7em 0.2em;
}
.menu summary::-webkit-details-marker{display:none;}
.menu summary span{
  display:block;width:24px;height:1.5px;background:var(--gruen);
  transition:transform .2s ease,opacity .2s ease;
}
.menu[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu[open] summary span:nth-child(2){opacity:0;}
.menu[open] summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.menu-panel{
  position:absolute;left:0;right:0;top:100%;background:var(--papier);
  border-bottom:1px solid var(--linie);padding:0.5em max(28px,8%) 1.4em;
}
.menu-panel a{
  display:block;padding:0.85em 0;text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--linie);font-family:var(--serif);font-size:1.1rem;
}

/* ---------- Titelbereich ---------- */
.titel{padding-top:4.5em;padding-bottom:1em;text-align:center;}
.titel h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;
  letter-spacing:-0.02em;margin:0 0 0.25em;
}
.titel .unter{
  font-family:var(--serif);font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:var(--grau);font-style:italic;margin:0 0 1.8em;
}
.titel .lead{
  font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.55;
  max-width:32em;margin:0 auto 3em;text-align:left;
}

/* ---------- Vollbreites Bild ---------- */
.hero{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;background:var(--hellgruen);}
.wrap .hero-inline{border-radius:15px;}
.hero-cap{font-size:0.82rem;color:var(--grau);padding-top:0.9em;}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-top:4.5em;border-top:1px solid var(--linie);margin-top:4.5em;}
.abschnitt:first-of-type{border-top:0;margin-top:2.5em;padding-top:0;}
.a-kopf{display:grid;grid-template-columns:3.5em 1fr;align-items:start;}
.nr{font-family:var(--serif);font-size:0.95rem;color:var(--gruen);padding-top:0.45em;}
.abschnitt h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.1rem);margin:0 0 1em;line-height:1.2;
}
.a-inhalt{padding-left:3.5em;}
p{margin:0 0 1.2em;max-width:36em;}
h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:2.2em 0 0.6em;}

/* ---------- Listen ---------- */
ul.liste{list-style:none;padding:0;margin:0 0 1.4em;max-width:36em;}
ul.liste li{
  padding:0.75em 0 0.75em 1.6em;border-bottom:1px solid var(--linie);position:relative;
}
ul.liste li::before{content:'—';color:var(--gruen);position:absolute;left:0;top:0.75em;}

/* ---------- Leistungskarten ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);margin:2em 0;}
.karte{background:var(--papier);padding:1.6em;text-decoration:none;display:block;
  transition:background .18s ease;}
.karte:hover{background:#fff;}
.karte h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 0.4em;color:var(--text);}
.karte p{font-size:0.95rem;color:var(--grau);margin:0;max-width:none;}
.karte .mehr{display:inline-block;margin-top:0.8em;font-size:0.8rem;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gruen);}

/* ---------- Bilder im Fließtext ---------- */
figure.bild{margin:0 0 1.6em;}
figure.bild img{width:100%;border-radius:3px;display:block;}
figure.bild figcaption{font-size:0.85rem;color:var(--grau);margin-top:0.5em;}
figure.bild-rechts{float:right;max-width:45%;margin:0.4em 0 1.2em 1.8em;}
figure.bild-links{float:left;max-width:45%;margin:0.4em 1.8em 1.2em 0;}
figure.portrait{float:right;max-width:220px;margin:0.4em 0 1.2em 1.8em;}
figure.portrait img{width:100%;border-radius:3px;display:block;}

/* ---------- Preisblock ---------- */
.preisblock{background:var(--hellgruen);border-radius:4px;padding:1.6em 1.8em;margin:0 0 1.4em;}
.preis-haupt{display:flex;align-items:baseline;gap:0.6em;flex-wrap:wrap;
  padding:0 0 1.2em;border-bottom:1px solid var(--linie);margin-bottom:1.2em;}
.preis-zahl{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.4rem);color:var(--gruen);line-height:1;}
.preis-was{color:var(--grau);}
.klein{font-size:0.85rem;color:var(--grau);line-height:1.6;max-width:36em;}

/* ---------- Ablaufschritte ---------- */
.ablauf{display:grid;gap:0;max-width:36em;}
.ablauf .s{display:grid;grid-template-columns:2.6em 1fr;padding:1.1em 0;
  border-bottom:1px solid var(--linie);}
.ablauf .s-nr{font-family:var(--serif);color:var(--gruen);font-size:1.15rem;}
.ablauf .s-name{font-family:var(--serif);font-size:1.15rem;margin-bottom:0.15em;}
.ablauf .s-text{font-size:0.95rem;color:var(--grau);}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--linie);max-width:36em;}
details.faq summary{
  cursor:pointer;padding:1.1em 0;list-style:none;display:flex;
  justify-content:space-between;gap:1em;align-items:center;
  min-height:48px;font-family:var(--serif);font-size:1.15rem;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+';color:var(--gruen);font-size:1.3em;font-family:var(--sans);}
details.faq[open] summary::after{content:'–';}
details.faq p{color:var(--grau);font-size:0.98rem;}

/* ---------- Kontaktblock ---------- */
.kontakt{background:var(--hellgruen);margin-top:6em;padding:5em 0;text-align:center;}
.kontakt h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,4vw,2.4rem);margin:0 0 0.4em;}
.kontakt p{max-width:none;margin:0;}
.btns{display:flex;gap:2.4em;flex-wrap:wrap;margin-top:2.4em;
  justify-content:center;align-items:center;}
.btn-p{
  display:inline-flex;align-items:center;min-height:54px;padding:0 2.6em;
  background:var(--gruen);color:#fff;text-decoration:none;
  font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;
  transition:background .2s ease;
}
.btn-p:hover{background:var(--gruen-dunkel);}
.btn-t{
  display:inline-flex;align-items:center;min-height:54px;color:var(--gruen);
  text-decoration:none;font-family:var(--serif);font-size:1.35rem;
  border-bottom:1px solid rgba(56,86,35,0.35);padding-bottom:2px;
}
.btn-t:hover{border-bottom-color:var(--gruen);}

/* ---------- Rechner / Formular ---------- */
.rechner{background:var(--hellgruen);border-radius:4px;padding:1.8em;max-width:36em;margin:1.6em 0;}
.rechner label{display:block;font-size:0.9rem;color:var(--grau);margin-bottom:0.3em;}
.rechner input{
  width:100%;padding:0.7em 0.9em;font-size:1.05rem;font-family:var(--sans);
  border:1px solid rgba(56,86,35,0.25);border-radius:3px;background:#fff;
  margin-bottom:1.1em;min-height:48px;
}
.rechner input:focus{outline:2px solid var(--gruen);outline-offset:-1px;}
.rechner button{
  min-height:50px;padding:0 2.2em;background:var(--gruen);color:#fff;border:0;
  font-family:var(--sans);font-size:0.75rem;letter-spacing:0.16em;
  text-transform:uppercase;cursor:pointer;border-radius:2px;
}
.rechner button:hover{background:var(--gruen-dunkel);}
.rechner .zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2em;}
@media(max-width:600px){.rechner .zwei{grid-template-columns:1fr;}}
.rechner .hinweis{font-size:0.9rem;color:var(--grau);margin:0.6em 0 0;line-height:1.55;}
.rechner .ergebnis{
  font-family:var(--serif);font-size:1.35rem;color:var(--gruen);
  margin:1.2em 0 0;min-height:1.6em;
}

/* ---------- Fußbereich ---------- */
.fuss{padding:3.5em 0;font-size:0.88rem;color:var(--grau);}
.fuss-grid{display:grid;grid-template-columns:1fr 1fr;gap:3em;max-width:52em;}
.fuss ul{list-style:none;padding:0;margin:0;}
.fuss li{padding:0.25em 0;}
.fuss a{text-decoration:none;}

/* ---------- Seitenspalte (Unterseiten) ---------- */
.seite{display:grid;grid-template-columns:minmax(0,680px) 250px;
  justify-content:center;gap:4em;max-width:1060px;margin:0 auto;
  padding:0 max(28px,8%) 4em;}
.lauftext{min-width:0;}
.rechte-spalte{font-size:0.9rem;color:var(--grau);line-height:1.55;}
.rechte-spalte h3{font-family:var(--serif);font-weight:400;font-size:1rem;
  color:var(--text);margin:0 0 0.6em;}
.rechte-spalte ul{list-style:none;padding:0;margin:0 0 1.6em;}
.rechte-spalte li{padding:0.25em 0;}
.rechte-spalte a{text-decoration:none;}

/* ---------- Feste Kontaktleiste (Handy) ---------- */
.fixleiste{display:none;}

/* ==========================================================
   Handy und Tablet
   ========================================================== */
@media(max-width:1120px){
  .nav{display:none;}
  .menu{display:block;}
  .kopf .wrap{position:relative;}
}

@media(max-width:820px){
  .titel{padding-top:3em;}
  .a-kopf{grid-template-columns:1fr;}
  .nr{padding-top:0;margin-bottom:0.4em;}
  .a-inhalt{padding-left:0;}
  .abschnitt{padding-top:3em;margin-top:3em;}
  .hero{aspect-ratio:4/3;}
  .fuss-grid{grid-template-columns:1fr;gap:2em;}
  .seite{grid-template-columns:1fr;gap:0;}
  .rechte-spalte{margin-top:3em;}

  /* Kopfzeile */
  .kopf .wrap{position:relative;}
  .kopf-links img{height:40px;}
  .marke{font-size:0.95rem;}
  .nav{display:none;}
  .menu{display:block;}
  .kopf-rechts{gap:1em;}

  /* umflossene Bilder werden zu vollen Breiten */
  figure.bild-rechts,figure.bild-links{float:none;max-width:100%;margin:1.2em 0;}
  figure.portrait{float:none;max-width:180px;margin:1.2em 0;}

  /* Kontaktleiste unten */
  .fixleiste{
    display:grid;grid-template-columns:1fr 1px 1fr;position:fixed;
    left:0;right:0;bottom:0;z-index:50;background:var(--papier);
    border-top:1px solid var(--gruen);
  }
  .fixleiste a{
    display:flex;align-items:center;justify-content:center;
    min-height:58px;text-decoration:none;color:var(--gruen);
    font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
  }
  .fixleiste .trenner{background:var(--linie);}
  body{padding-bottom:58px;}
}