/* ============================================================
   MS-EB · Ingenieurbüro für Energieberatung
   Stylesheet der öffentlichen Website
   Struktur: 1 Tokens · 2 Reset · 3 Raster · 4 Kopf · 5 Typo
             6 Bausteine · 7 Formulare · 8 Fuß · 9 Responsive
   ============================================================ */

/* --- 1 Tokens ---------------------------------------------- */
:root{
  /* Marke (aus logo.svg) */
  --navy:#283655;
  --slate:#4d648d;
  --slate-mid:#7d8fb0;
  --slate-soft:#eef1f6;
  --paper:#ffffff;
  --tint:#f5f7f9;
  --tint-warm:#eceff3;
  --line:#dbe1ea;
  --line-strong:#b9c3d2;
  --muted:#77839a;
  --signal:#0f8a6a;      /* nur für Zustände: gespeichert, gültig */
  --warn:#b3541e;

  --font:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Typoskala, 1.25 modular, Basis 16px */
  --t-micro:.6875rem;    /* 11px  Marginalien, Spaltenlabels */
  --t-small:.8125rem;    /* 13px  Navigation, Meta */
  --t-body:1rem;
  --t-lead:1.1875rem;    /* 19px  Fließtext in Inhaltsspalten */
  --t-h3:1.375rem;
  --t-h2:clamp(1.5rem,2.6vw,2.125rem);
  --t-h1:clamp(1.875rem,4.1vw,3.375rem);
  --t-num:clamp(2rem,4.4vw,3.5rem);

  --gap:24px;
  --edge:clamp(16px,3.4vw,56px);
  --rule:1px solid var(--line);
}

/* --- 2 Reset ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--paper);color:var(--navy);
  font-family:var(--font);font-size:var(--t-body);line-height:1.5;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px}

/* Selbst gehostete Schrift – DSGVO-konform, keine externen Aufrufe.
   Dateien nach /assets/fonts/ legen (siehe ANLEITUNG, Abschnitt 6). */
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../fonts/SchibstedGrotesk-Variable.woff2') format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* --- 3 Raster ---------------------------------------------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--edge)}
.row{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  border-top:var(--rule);padding:clamp(28px,4vw,64px) 0;
}
.row--flush{border-top:0}
.row--tight{padding-top:20px;padding-bottom:20px}
/* Marginalspalte links, Inhalt rechts – Grundmuster der Seite */
.row__label{grid-column:1/4;font-size:var(--t-micro);color:var(--muted);letter-spacing:.02em}
.row__body{grid-column:5/11}
.row__body--wide{grid-column:5/13}
.row__aside{grid-column:11/13;font-size:var(--t-small);color:var(--muted)}

/* --- 4 Kopf ------------------------------------------------ */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:var(--rule);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap);height:56px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:var(--t-small);letter-spacing:.01em}
.brand img{height:20px;width:auto}
.brand b{font-weight:500}
.brand span{color:var(--muted);font-weight:400}
.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px)}
.nav a{font-size:var(--t-small);color:var(--slate);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--navy);color:var(--navy)}
.nav__office{color:var(--navy);font-weight:500}
.burger{display:none;background:none;border:var(--rule);padding:6px 10px;font-size:var(--t-small);cursor:pointer}

/* --- 5 Typografie ------------------------------------------ */
.h1{font-size:var(--t-h1);line-height:1.06;font-weight:400;letter-spacing:-.025em;max-width:24ch}
.h2{font-size:var(--t-h2);line-height:1.14;font-weight:400;letter-spacing:-.02em;max-width:30ch}
.h3{font-size:var(--t-h3);line-height:1.25;font-weight:500;letter-spacing:-.015em}
.lead{font-size:var(--t-lead);line-height:1.42;max-width:52ch;letter-spacing:-.01em}
.prose p{max-width:66ch;margin-bottom:1em}
.prose p:last-child{margin-bottom:0}
.prose h3{margin:2em 0 .5em;font-size:var(--t-h3);font-weight:500}
.prose ul{margin:0 0 1em;max-width:66ch}
.prose ul li{padding-left:18px;position:relative;margin-bottom:.35em}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--line-strong)}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-bottom-color:var(--navy)}
.small{font-size:var(--t-small);color:var(--muted);max-width:56ch}
.micro{font-size:var(--t-micro);color:var(--muted)}

/* --- 6 Bausteine ------------------------------------------- */

/* 6.1 Bildplatzhalter.
   Fehlt die Datei, entfernt sich das <img> selbst und der Rahmen
   mit dem erwarteten Dateinamen bleibt sichtbar. Datei per FTP in
   /assets/img/ ablegen – gleicher Name, fertig. */
.ph{
  position:relative;background:var(--tint);border:1px solid var(--line);
  overflow:hidden;
}
.ph::after{
  content:"Bild: " attr(data-file);
  position:absolute;inset:auto 0 0 0;padding:8px 10px;
  font-size:var(--t-micro);color:var(--slate);background:var(--slate-soft);
  border-top:1px solid var(--line);
}
.ph:has(img)::after{display:none}
.ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.ph--hero{aspect-ratio:16/7}
.ph--wide{aspect-ratio:4/3}
.ph--tall{aspect-ratio:3/4}
.ph--sq{aspect-ratio:1/1}

figure figcaption{
  display:flex;justify-content:space-between;gap:12px;
  padding-top:8px;font-size:var(--t-micro);color:var(--muted)
}
figure figcaption b{font-weight:500;color:var(--navy)}

/* 6.2 Kennzahlen */
.stats{grid-column:1/13;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.stat{border-left:var(--rule);padding-left:14px}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{display:block;font-size:var(--t-num);line-height:1;font-weight:400;letter-spacing:-.04em}
.stat__n sup{font-size:.34em;vertical-align:super;letter-spacing:0;color:var(--slate)}
.stat__t{display:block;margin-top:10px;font-size:var(--t-micro);color:var(--muted);max-width:20ch}

/* 6.3 Leistungs-Akkordeon */
.acc{grid-column:1/13;border-top:var(--rule)}
.acc__item{border-bottom:var(--rule)}
.acc__btn{
  width:100%;display:grid;grid-template-columns:56px 1fr 32px;align-items:center;
  gap:var(--gap);padding:18px 0;background:none;border:0;text-align:left;cursor:pointer;
}
.acc__btn:hover{background:var(--tint)}
.acc__i{font-size:var(--t-micro);color:var(--muted)}
.acc__h{font-size:1.0625rem;font-weight:400;letter-spacing:-.01em}
.acc__sign{justify-self:end;width:11px;height:11px;position:relative}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:var(--navy)}
.acc__sign::before{inset:5px 0 5px 0;height:1px}
.acc__sign::after{inset:0 5px 0 5px;width:1px;transition:opacity .18s ease}
.acc__btn[aria-expanded="true"] .acc__sign::after{opacity:0}
.acc__panel{display:none;padding:0 0 26px}
.acc__panel[data-open]{display:grid;grid-template-columns:56px 1fr;gap:var(--gap)}
.acc__panel>div{grid-column:2}
.acc__meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:var(--t-micro);color:var(--slate);border:1px solid var(--line);padding:3px 8px}

/* 6.4 Referenz-/Bildgitter (unregelmäßig, wie im Entwurf) */
.grid-proj{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) var(--gap);row-gap:34px}
.p-a{grid-column:1/5}.p-b{grid-column:5/8}.p-c{grid-column:8/13}
.p-d{grid-column:1/4}.p-e{grid-column:4/8}.p-f{grid-column:8/11}

/* 6.5 Blog-Liste */
.posts{grid-column:1/13;border-top:var(--rule)}
.post{
  display:grid;grid-template-columns:120px 1fr 200px;gap:var(--gap);
  align-items:baseline;padding:20px 0;border-bottom:var(--rule);
}
.post:hover{background:var(--tint)}
.post__date{font-size:var(--t-micro);color:var(--muted)}
.post__t{font-size:1.0625rem;letter-spacing:-.01em;max-width:46ch}
.post__c{font-size:var(--t-micro);color:var(--slate);justify-self:end;text-align:right}

/* 6.6 Karten / Kontaktblöcke */
.cols-3{grid-column:1/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.cols-2{grid-column:1/13;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.card{border-top:var(--rule);padding-top:14px}
.card h3{font-size:1rem;font-weight:500;margin-bottom:6px}
.card p{font-size:var(--t-small);color:var(--muted);max-width:40ch}

/* 6.7 Links & Buttons */
.link{font-size:var(--t-small);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.link:hover{border-bottom-color:var(--navy)}
.btn{
  display:inline-block;padding:11px 20px;background:var(--navy);color:#fff;
  border:1px solid var(--navy);font-size:var(--t-small);cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--slate)}
.btn--ghost{background:none;color:var(--navy);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--tint);color:var(--navy)}
.mailto-xl{
  font-size:clamp(1.25rem,3.4vw,2.5rem);letter-spacing:-.03em;font-weight:400;
  border-bottom:1px solid var(--line);padding-bottom:4px;
}
.mailto-xl:hover{border-bottom-color:var(--navy)}

/* --- 7 Formulare ------------------------------------------- */
.field{display:block;margin-bottom:18px}
.field>span{display:block;font-size:var(--t-micro);color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:11px 12px;background:var(--paper);
  border:1px solid var(--line-strong);border-radius:0;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--navy);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field--check{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-small);color:var(--muted)}
.field--check input{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.hp{position:absolute;left:-9999px}       /* Honeypot gegen Bots */
.note{padding:12px 14px;border:1px solid var(--line);background:var(--tint);font-size:var(--t-small)}
.note--ok{border-color:var(--signal);color:var(--signal);background:#f2faf7}
.note--err{border-color:var(--warn);color:var(--warn);background:#fdf5f0}

/* --- 8 Fuß ------------------------------------------------- */
.foot{border-top:var(--rule);margin-top:clamp(40px,6vw,90px);background:var(--tint)}
.foot__top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding:clamp(28px,4vw,56px) 0}
.foot__addr{grid-column:1/4;font-size:var(--t-small);line-height:1.7;color:var(--muted)}
.foot__addr b{display:block;color:var(--navy);font-weight:500;margin-bottom:8px}
.foot__nav{grid-column:5/7;font-size:var(--t-small)}
.foot__nav2{grid-column:7/9;font-size:var(--t-small)}
.foot__nav li,.foot__nav2 li{margin-bottom:6px}
.foot__nav a:hover,.foot__nav2 a:hover{border-bottom:1px solid var(--navy)}
.foot__mail{grid-column:9/13;align-self:end;text-align:right}
.foot__bar{
  border-top:var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px;padding:14px 0;font-size:var(--t-micro);color:var(--muted)
}

/* --- 8.1 Cookie-Banner ------------------------------------- */
.cc{
  position:fixed;left:var(--edge);right:var(--edge);bottom:var(--edge);z-index:90;
  max-width:640px;background:var(--paper);border:1px solid var(--navy);
  padding:20px 22px;box-shadow:0 18px 40px rgba(40,54,85,.13);
}
.cc[hidden]{display:none}
.cc h2{font-size:1rem;font-weight:500;margin-bottom:8px}
.cc p{font-size:var(--t-small);color:var(--muted);max-width:62ch;margin-bottom:14px}
.cc__opts{border-top:var(--rule);margin-bottom:14px}
.cc__opt{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:var(--rule);font-size:var(--t-small)}
.cc__opt input{width:16px;height:16px;margin-top:3px;flex:0 0 auto}
.cc__opt span small{display:block;color:var(--muted);font-size:var(--t-micro);margin-top:2px}
.cc__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cc__row .link{margin-left:auto}

/* --- 9 Responsive ------------------------------------------ */
@media (max-width:1080px){
  .row__label{grid-column:1/13}
  .row__body,.row__body--wide{grid-column:1/13}
  .row__aside{grid-column:1/13}
  .p-a,.p-b,.p-c,.p-d,.p-e,.p-f{grid-column:span 6}
  .foot__addr{grid-column:1/7}.foot__nav{grid-column:7/10}.foot__nav2{grid-column:10/13}
  .foot__mail{grid-column:1/13;text-align:left;margin-top:26px}
}
@media (max-width:760px){
  .nav{
    display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--paper);border-bottom:var(--rule);
    padding:8px var(--edge) 18px;
  }
  .nav[data-open]{display:flex}
  .nav a{padding:10px 0;width:100%;border-bottom:var(--rule)}
  .burger{display:block}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .p-a,.p-b,.p-c,.p-d,.p-e,.p-f{grid-column:1/13}
  .post{grid-template-columns:1fr;gap:6px}
  .post__c{justify-self:start;text-align:left}
  .acc__btn{grid-template-columns:34px 1fr 22px}
  .acc__panel[data-open]{grid-template-columns:34px 1fr}
  .cc{left:0;right:0;bottom:0;max-width:none;border-left:0;border-right:0;border-bottom:0}
}

/* --- 10 Druck ---------------------------------------------- */
@media print{
  .topbar,.cc,.foot__mail{display:none}
  body{font-size:11pt}
  .row{page-break-inside:avoid}
}

/* ------------------------------------------------------------------ */
/* 11 Preisliste                                                       */
/* Haarlinien-Liste mit Fuehrungspunkten, damit Leistung und Betrag    */
/* auch bei langen Bezeichnungen zusammenfinden.                       */
/* ------------------------------------------------------------------ */
.preise { margin: 26px 0 0; max-width: 66ch; }
.preise > div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: var(--rule);
}
.preise > div:first-child { border-top: 1px solid var(--navy); }
.preise dt { flex: 0 1 auto; font-size: var(--t-small); }
.preise dd {
  order: 2; margin: 0; padding-left: 10px; font-size: var(--t-small);
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500;
}
.preise > div::after {
  content: ""; order: 1; flex: 1 1 auto; min-width: 18px;
  border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px);
}
@media (max-width: 560px) {
  .preise > div { flex-wrap: wrap; }
  .preise > div::after { display: none; }
  .preise dd { margin-left: auto; }
}