/* ============================================================
   HSPT — Entwurf 4 "Klar"
   Mehrseitige Website nach Kundenvorgabe vom 09.09.2026:
   hell, weiss mit gruenen Akzenten, einfach, klar, strukturiert,
   Reiter-Navigation, keine Fotohintergruende.
   Bewusst KEINE Google Fonts: keine externen Requests, damit die
   Seite ohne Consent-Banner datenschutzkonform betrieben werden kann.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper-soft:#F7FAF9;
  --ink:#1A1E23;
  --ink-70:rgba(26,30,35,.70);
  --ink-52:rgba(26,30,35,.52);
  --mint:#5EBFAA;
  --green:#1E7B67;
  --green-deep:#15584A;
  --mint-soft:rgba(94,191,170,.12);
  --mint-line:rgba(94,191,170,.34);
  --rule:rgba(26,30,35,.13);
  --hair:rgba(26,30,35,.08);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
  --pad:clamp(20px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{letter-spacing:-.015em;line-height:1.2;margin:0}
h1{font-size:clamp(28px,4.2vw,42px);font-weight:600}
h2{font-size:clamp(22px,2.8vw,29px);font-weight:600}
h3{font-size:18px;font-weight:600}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

/* ---------- Kopfbereich mit Reiter-Navigation ---------- */
.topbar{
  background:var(--ink);
  color:rgba(255,255,255,.78);
  font-size:13.5px;
}
.topbar .wrap{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  align-items:center;justify-content:flex-end;
  padding-top:9px;padding-bottom:9px;
}
.topbar a{color:rgba(255,255,255,.86)}
.topbar a:hover{color:var(--mint);text-decoration:none}
.topbar .sep{color:rgba(255,255,255,.28)}

header.site{
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  position:sticky;top:0;z-index:40;
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:16px;padding-bottom:16px;
}
.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:42px;height:42px;display:block}
.brand .name{font-size:20px;font-weight:700;letter-spacing:.05em;line-height:1.1}
.brand .claim{font-size:12px;color:var(--ink-52);letter-spacing:.02em}

nav.reiter{display:flex;flex-wrap:wrap;gap:2px}
nav.reiter a{
  display:block;
  padding:9px 14px;
  font-size:14.5px;font-weight:500;
  color:var(--ink-70);
  border-bottom:2px solid transparent;
  border-radius:3px 3px 0 0;
}
nav.reiter a:hover{color:var(--green);background:var(--mint-soft);text-decoration:none}
nav.reiter a.aktiv{color:var(--green-deep);border-bottom-color:var(--mint);font-weight:600}

/* Der Knopf erscheint erst im Mobil-Block weiter unten. Ohne JavaScript
   bleibt er verborgen und die Navigation offen (Regel bei .ohne-js). */
.nav-toggle{
  display:none;
  align-items:center;gap:9px;
  padding:9px 13px;
  font:inherit;font-size:14.5px;font-weight:600;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--mint);color:var(--green)}
.nav-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Drei Striche aus einem Element: der mittlere ist der Rahmen selbst,
   die beiden aeusseren sind die Pseudo-Elemente. */
.nav-toggle__balken,
.nav-toggle__balken::before,
.nav-toggle__balken::after{
  display:block;width:18px;height:2px;
  background:currentColor;border-radius:2px;
}
.nav-toggle__balken{position:relative}
.nav-toggle__balken::before,
.nav-toggle__balken::after{content:"";position:absolute;left:0}
.nav-toggle__balken::before{top:-6px}
.nav-toggle__balken::after{top:6px}

[aria-expanded="true"] .nav-toggle__balken{background:transparent}
[aria-expanded="true"] .nav-toggle__balken::before{top:0;transform:rotate(45deg)}
[aria-expanded="true"] .nav-toggle__balken::after{top:0;transform:rotate(-45deg)}

/* ---------- Seitenkopf ---------- */
.seitenkopf{
  background:var(--paper-soft);
  border-bottom:1px solid var(--hair);
  padding:clamp(34px,5vw,56px) 0;
  position:relative;overflow:hidden;
}
/* Dezente technische Zeichnungsstruktur statt Fotohintergrund */
.seitenkopf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(26,30,35,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,30,35,.030) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(105deg,transparent 42%,#000 100%);
  -webkit-mask-image:linear-gradient(105deg,transparent 42%,#000 100%);
}
.seitenkopf .wrap{position:relative}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);font-weight:600;margin-bottom:12px;
}
.seitenkopf p.lead{
  font-size:17.5px;color:var(--ink-70);max-width:660px;margin-top:14px;
}

/* ---------- Startseite: Hero ---------- */
.hero{padding:clamp(44px,6vw,72px) 0 clamp(36px,5vw,56px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(26,30,35,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,30,35,.028) 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse at 78% 22%,#000 0%,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse at 78% 22%,#000 0%,transparent 68%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 .akzent{color:var(--green)}
.hero p.lead{font-size:18px;color:var(--ink-70);max-width:560px;margin-bottom:26px}

.hero-karte{
  border:1px solid var(--rule);border-top:3px solid var(--mint);
  background:var(--paper);border-radius:4px;padding:24px 26px;
}
.hero-karte dl{margin:0;display:grid;gap:16px}
.hero-karte dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52);font-weight:600}
.hero-karte dd{margin:2px 0 0;font-size:15.5px;font-weight:500}

.btn-reihe{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-block;padding:12px 22px;border-radius:3px;
  font-size:15px;font-weight:600;letter-spacing:.01em;
}
.btn:hover{text-decoration:none}
.btn-primaer{background:var(--green);color:#fff}
.btn-primaer:hover{background:var(--green-deep)}
.btn-sekundaer{border:1px solid var(--rule);color:var(--ink)}
.btn-sekundaer:hover{border-color:var(--mint);color:var(--green)}

/* ---------- Abschnitte ---------- */
section.block{padding:clamp(38px,5vw,60px) 0;border-top:1px solid var(--hair)}
section.block.soft{background:var(--paper-soft)}
.block-kopf{max-width:680px;margin-bottom:30px}
.block-kopf p{color:var(--ink-70);margin-top:12px}

.raster{display:grid;gap:20px}
.raster.zwei{grid-template-columns:repeat(2,1fr)}
.raster.drei{grid-template-columns:repeat(3,1fr)}

.karte{
  background:var(--paper);
  border:1px solid var(--rule);border-radius:4px;
  padding:22px 24px;
}
.karte.mint{border-left:3px solid var(--mint)}
.karte h3{margin-bottom:8px}
.karte p{font-size:15.5px;color:var(--ink-70)}
.karte .kennung{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);font-weight:600;margin-bottom:10px;
}

/* Leistungsliste */
ul.leistungen{list-style:none;margin:0;padding:0;display:grid;gap:0}
ul.leistungen li{
  border-top:1px solid var(--hair);
  padding:20px 0;
  display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:start;
}
ul.leistungen li:last-child{border-bottom:1px solid var(--hair)}
ul.leistungen .nr{
  font-size:13px;font-weight:700;color:var(--mint);
  padding-top:2px;letter-spacing:.04em;
}
ul.leistungen h3{margin-bottom:6px}
ul.leistungen p{font-size:15.5px;color:var(--ink-70)}

/* Referenzen, rein textlich */
.referenz{
  border:1px solid var(--rule);border-radius:4px;
  padding:22px 24px;background:var(--paper);
  display:grid;grid-template-columns:1fr 170px;gap:18px;align-items:start;
}
.referenz .meta{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-52);font-weight:600;margin-bottom:8px;
}
.referenz h3{margin-bottom:4px}
.referenz .ort{font-size:14px;color:var(--ink-52);margin-bottom:10px}
.referenz p{font-size:15.5px;color:var(--ink-70);margin:0}
.dauer{
  white-space:nowrap;text-align:right;
  border-left:1px solid var(--hair);padding-left:18px;
}
.dauer .zahl{font-size:23px;font-weight:700;color:var(--green);line-height:1.1}
.dauer .label{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-52);font-weight:600;margin-top:4px}

/* ---------- Projektpraxis auf der Startseite ---------- */
.projekt-karte{
  background:var(--paper);
  border:1px solid var(--rule);border-radius:4px;
  padding:22px 24px;
  display:flex;flex-direction:column;
}
.projekt-karte .meta{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-52);font-weight:600;margin-bottom:8px;
}
.projekt-karte h3{margin-bottom:4px}
.projekt-karte .ort{font-size:14px;color:var(--ink-52);margin-bottom:10px}
.projekt-karte p{font-size:15.5px;color:var(--ink-70);margin:0 0 18px}
.projekt-karte .dauer-zeile{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.projekt-karte .dauer-zeile .zahl{font-size:20px;font-weight:700;color:var(--green);line-height:1.1}
.projekt-karte .dauer-zeile .label{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-52);font-weight:600;
}

/* Nachpruefbare Belege unter den Projekten */
ul.belege{
  list-style:none;margin:30px 0 0;padding:22px 26px;
  background:var(--mint-soft);border-left:3px solid var(--mint);border-radius:4px;
  display:grid;gap:11px;
}
ul.belege li{
  font-size:15.5px;color:var(--ink-70);
  padding-left:22px;position:relative;line-height:1.55;
}
ul.belege li::before{
  content:"";position:absolute;left:0;top:.58em;
  width:9px;height:9px;border-radius:50%;
  border:2px solid var(--mint);
}
ul.belege strong{color:var(--ink);font-weight:600}

/* ---------- Rueckmeldungen des Kontaktformulars ---------- */
.formular-hinweis{font-size:13.5px;color:var(--ink-52);margin:0}
.formular-fehler{
  margin-top:16px;padding:14px 16px;border-radius:4px;
  background:rgba(190,60,45,.07);border-left:3px solid #BE3C2D;
  color:#8E2C20;font-size:15px;
}
.formular-danke{
  padding:30px 32px;border-radius:4px;
  background:var(--mint-soft);border-left:3px solid var(--mint);
}
.formular-danke h3{margin-bottom:10px;font-size:20px}
.formular-danke p{color:var(--ink-70);margin:0}

/* Rechtstexte aus dem Redaktionssystem */
.rechtstext h2{font-size:20px;margin:34px 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{margin:22px 0 8px}
.rechtstext p,.rechtstext li{color:var(--ink-70);font-size:15.5px}
.rechtstext ul,.rechtstext ol{margin:0 0 16px;padding-left:22px}
.rechtstext li{margin-bottom:6px}

/* Projektbild mit Kennzeichnung. Der Hinweis sitzt auf dem Bild, damit er
   nicht zu uebersehen ist: ein Symbolbild darf nicht als eigenes Projekt
   gelesen werden. */
.projekt-bild{
  margin:-22px -24px 16px;position:relative;
  border-radius:4px 4px 0 0;overflow:hidden;
  background:var(--paper-soft);
}
.projekt-bild img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}
.projekt-bild figcaption{
  position:absolute;left:10px;bottom:10px;
  background:rgba(26,30,35,.74);color:#fff;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:3px;
  backdrop-filter:saturate(140%) blur(2px);
}

/* Referenzenseite: Bild links, Text mittig, Dauer rechts */
/* Feste Breite fuer die Dauer, sonst richtet sich die Spalte nach dem
   laengsten Text ("bis Montagefreigabe") und die Trennlinien fluchten nicht. */
.referenz.mit-bild{grid-template-columns:230px 1fr 170px;align-items:start}
.referenz.mit-bild .projekt-bild{margin:-22px 0 -22px -24px;border-radius:4px 0 0 4px}
.referenz.mit-bild .projekt-bild img{height:100%;aspect-ratio:auto;min-height:190px}

/* Werdegang */
ol.werdegang{list-style:none;margin:0;padding:0}
ol.werdegang li{
  display:grid;grid-template-columns:118px 1fr;gap:22px;
  padding:18px 0;border-top:1px solid var(--hair);
}
ol.werdegang li:last-child{border-bottom:1px solid var(--hair)}
ol.werdegang .jahr{font-size:13.5px;font-weight:700;color:var(--green);padding-top:2px}
ol.werdegang h3{margin-bottom:4px}
ol.werdegang p{font-size:15.5px;color:var(--ink-70)}

/* Versprechen-Block */
.versprechen{
  border:1px solid var(--mint-line);border-left:3px solid var(--mint);
  background:var(--mint-soft);border-radius:4px;
  padding:26px 28px;
}
.versprechen h3{margin-bottom:14px;color:var(--green-deep)}
.versprechen ul{margin:0;padding-left:20px}
.versprechen li{margin-bottom:10px;font-size:15.5px;color:var(--ink-70)}
.versprechen li:last-child{margin-bottom:0}
.versprechen strong{color:var(--ink)}

blockquote.zitat{
  margin:0;padding:22px 26px;
  border-left:3px solid var(--mint);background:var(--paper-soft);
  font-size:17px;line-height:1.6;
}
blockquote.zitat cite{
  display:block;margin-top:12px;font-style:normal;
  font-size:13.5px;color:var(--ink-52);letter-spacing:.02em;
}

/* Ablauf */
.ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.ablauf .schritt{padding:20px 18px 20px 0;border-top:2px solid var(--mint)}
.ablauf .schritt + .schritt{padding-left:18px;border-left:1px solid var(--hair)}
.ablauf .nr{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:8px}
.ablauf h3{font-size:16px;margin-bottom:6px}
.ablauf p{font-size:14.5px;color:var(--ink-70)}

/* ---------- Kontaktformular ---------- */
.kontakt-raster{display:grid;grid-template-columns:1fr .8fr;gap:clamp(26px,4vw,48px);align-items:start}
form.anfrage{display:grid;gap:16px}
.feld{display:grid;gap:6px}
.feld label{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.feld .hinweis{font-size:12.5px;color:var(--ink-52);font-weight:400}
.feld input,.feld textarea,.feld select{
  font-family:inherit;font-size:15.5px;color:var(--ink);
  padding:11px 13px;border:1px solid var(--rule);border-radius:3px;
  background:var(--paper);width:100%;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-soft);
}
.feld textarea{min-height:150px;resize:vertical}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.einwilligung{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:14px;color:var(--ink-70)}
.einwilligung input{width:18px;height:18px;margin-top:3px;accent-color:var(--green)}
.pflicht{color:var(--green)}
form.anfrage button{
  justify-self:start;border:none;cursor:pointer;
  background:var(--green);color:#fff;
  padding:13px 26px;border-radius:3px;
  font-family:inherit;font-size:15px;font-weight:600;
}
form.anfrage button:hover{background:var(--green-deep)}

.kontaktdaten{
  border:1px solid var(--rule);border-top:3px solid var(--mint);
  border-radius:4px;padding:24px 26px;background:var(--paper);
}
.kontaktdaten dl{margin:0;display:grid;gap:18px}
.kontaktdaten dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-52);font-weight:600;margin-bottom:3px}
.kontaktdaten dd{margin:0;font-size:16px;font-weight:500}
.kontaktdaten dd.klein{font-size:15px;font-weight:400;color:var(--ink-70);line-height:1.55}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:760px}
.rechtstext h2{margin:36px 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{margin:24px 0 8px}
.rechtstext p,.rechtstext li{font-size:15.5px;color:var(--ink-70)}
.rechtstext ul{padding-left:20px;margin:0 0 16px}
.rechtstext li{margin-bottom:7px}
.rechtstext address{font-style:normal;margin-bottom:16px}
.platzhalter{
  background:rgba(94,191,170,.16);
  border-bottom:1px solid var(--mint);
  padding:1px 4px;border-radius:2px;color:var(--ink);
}

/* ---------- Fussbereich ---------- */
footer.site{
  background:var(--ink);color:rgba(255,255,255,.72);
  padding:clamp(34px,4vw,48px) 0 26px;margin-top:0;
  font-size:15px;
}
footer.site a{color:rgba(255,255,255,.86)}
footer.site a:hover{color:var(--mint)}
.fuss-raster{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;padding-bottom:28px}
footer.site h3{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:14px;font-weight:600}
footer.site .marke{font-size:19px;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:8px}
footer.site p{font-size:14.5px;line-height:1.6;margin-bottom:0}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px;font-size:14.5px}
.fuss-zeile{
  border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  font-size:13.5px;color:rgba(255,255,255,.56);
}
.fuss-zeile nav{display:flex;flex-wrap:wrap;gap:18px}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .kontakt-raster{grid-template-columns:1fr}
  .raster.drei{grid-template-columns:repeat(2,1fr)}
  .ablauf{grid-template-columns:1fr 1fr}
  .ablauf .schritt + .schritt{padding-left:0;border-left:none}
  .ablauf .schritt:nth-child(even){padding-left:18px;border-left:1px solid var(--hair)}
  .fuss-raster{grid-template-columns:1fr 1fr}
}
/* Die Kopfzeile ist sticky, und die Reiter brechen schon ab etwa 795px in
   eine zweite Zeile um. Darunter klappt die Navigation deshalb zu, statt ein
   Drittel des Bildschirms dauerhaft zu belegen. Der Wert liegt bewusst hoeher
   als die uebrigen Mobil-Regeln: er haengt an der Breite der Reiter, nicht am
   Layout der Inhalte. */
@media (max-width:800px){
  header.site .wrap{flex-wrap:wrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .brand img{width:36px;height:36px}
  .brand .name{font-size:18px}

  .mit-js .nav-toggle{display:inline-flex}
  .mit-js nav.reiter{display:none}
  .mit-js nav.reiter[data-offen]{display:block}

  nav.reiter{
    width:100%;gap:0;
    border-top:1px solid var(--hair);
    padding-top:6px;padding-bottom:4px;
  }
  nav.reiter a{padding:11px 12px;font-size:15px;border-bottom:none;border-radius:3px}
  nav.reiter a.aktiv{background:var(--mint-soft)}

  /* Die Topbar traegt hier nur noch die Kontaktwege, der Bueroname steht
     ohnehin direkt darunter im Kopf. */
  .topbar{font-size:12.5px}
  .topbar .wrap{gap:6px 16px;justify-content:center}
  .topbar .wrap > span:first-child,
  .topbar .sep{display:none}
}
@media (max-width:660px){
  .raster.zwei,.raster.drei{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr}
  .ablauf .schritt:nth-child(even){padding-left:0;border-left:none}
  .referenz{grid-template-columns:1fr}
  .referenz.mit-bild{grid-template-columns:1fr}
  .referenz.mit-bild .projekt-bild{margin:-22px -24px 16px;border-radius:4px 4px 0 0}
  .referenz.mit-bild .projekt-bild img{aspect-ratio:3/2;min-height:0}
  ul.belege{padding:18px 20px}
  .dauer{border-left:none;border-top:1px solid var(--hair);padding-left:0;padding-top:14px;text-align:left}
  .feld-paar{grid-template-columns:1fr}
  .fuss-raster{grid-template-columns:1fr}
  .topbar .wrap{justify-content:flex-start}
  ol.werdegang li{grid-template-columns:1fr;gap:4px}
}