:root{
  --bg:            #faf8f3;
  --surface:       #ffffff;
  --ink:           #1e2a2e;
  --muted:         #5b6b70;
  --primary:       #0f4761;
  --primary-dark:  #0a3347;
  --accent:        #b5762c;
  --line:          #ddd6c6;
  --scale-green:   #4e8b58;
  --scale-yellow:  #d9b23c;
  --scale-red:     #b5502c;
  --radius:        2px;
  --max:           780px;
  --max-wide:      1080px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  color:var(--primary-dark);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em 0;
}

a{ color:var(--primary); text-decoration-color:var(--line); text-underline-offset:3px; }
a:hover{ color:var(--accent); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

img{ max-width:100%; height:auto; display:block; border-radius:var(--radius); }

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

/* --- signature element: the Energieausweis colour scale, used as a divider --- */
.scale-bar{
  height:5px;
  width:64px;
  margin:14px 0 0 0;
  background:linear-gradient(90deg, var(--scale-green), var(--scale-yellow), var(--scale-red));
  border-radius:3px;
}
h2 + .scale-bar{ margin-top:-4px; margin-bottom:28px; }

/* --- header / nav --- */
header.site{
  position:sticky; top:0; z-index:10;
  background:rgba(250,248,243,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max-wide); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.brand{
  font-family:"Fraunces", serif; font-weight:600; font-size:1.05rem;
  color:var(--primary-dark); text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.brand img{
  height:36px; width:36px; border-radius:0; display:block;
}
nav.primary ul{
  list-style:none; display:flex; gap:22px; margin:0; padding:0;
  flex-wrap:wrap; font-size:0.92rem;
}
nav.primary a{ color:var(--muted); text-decoration:none; }
nav.primary a:hover, nav.primary a[aria-current="page"]{ color:var(--accent); }

/* --- hero --- */
.hero{ padding:64px 0 40px 0; }
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:0.78rem;
  color:var(--accent); font-weight:600; margin-bottom:10px;
}
.hero h1{ font-size:clamp(2.1rem, 5vw, 2.9rem); max-width:16ch; }
.hero .tagline{ color:var(--muted); font-size:1.08rem; max-width:52ch; margin-top:6px; }

/* --- services cards --- */
.services{ padding:16px 0 48px 0; }
.card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:720px){ .card-grid{ grid-template-columns:1fr; } }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
}
.card h3{ font-size:1.15rem; margin-bottom:12px; }
.card ul{ margin:0; padding-left:1.1em; color:var(--muted); }
.card li{ margin-bottom:6px; }

/* --- sections --- */
section.block{ padding:48px 0; border-top:1px solid var(--line); }
section.block h2{ font-size:1.65rem; }
section.block h3{
  font-family:"Fraunces", serif; font-size:1.15rem; color:var(--primary);
  margin-top:2em; margin-bottom:0.5em;
}
p{ margin:0 0 1em 0; }
figure{ margin:1.5em 0; }
figcaption{ font-size:0.9rem; color:var(--muted); margin-top:8px; }

ul.plain, ol.plain{ padding-left:1.3em; margin:0 0 1em 0; }
ul.plain li, ol.plain li{ margin-bottom:6px; }

/* --- award / highlight box --- */
.highlight{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  padding:22px 24px; border-radius:var(--radius); margin-top:20px;
}

/* --- funding tables --- */
table.funding{
  width:100%; border-collapse:collapse; margin:1.2em 0; font-size:0.95rem;
  background:var(--surface); border:1px solid var(--line);
}
table.funding caption{
  text-align:left; font-weight:600; color:var(--primary); margin-bottom:6px; font-size:0.95rem;
}
table.funding th, table.funding td{
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
}
table.funding th{ color:var(--muted); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:.03em; }
table.funding tr:last-child td{ border-bottom:none; }

/* --- technical data (heating system) --- */
.tech-block{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:18px;
}
.tech-block h4{ margin:0 0 10px 0; font-family:"Inter"; font-weight:700; color:var(--primary-dark); }
.tech-block ol{ margin:0; padding-left:1.2em; }
.tech-block li{ margin-bottom:4px; }
.live-note{
  font-size:0.9rem; color:var(--muted); background:#f2ede0; border-radius:var(--radius);
  padding:10px 14px; display:inline-block; margin-bottom:18px;
}

/* --- contact --- */
.contact-grid{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start;
}
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-grid img{ width:142px; }
address{ font-style:normal; line-height:1.8; }
address .name{ font-weight:600; color:var(--primary-dark); font-size:1.05rem; }

footer.site{
  border-top:1px solid var(--line); padding:26px 0 40px 0;
  color:var(--muted); font-size:0.85rem;
}

/* ============================================================
   PROJEKTE PAGE
   ============================================================ */
.project-index{
  display:flex; flex-wrap:wrap; gap:8px 10px; padding:20px 0 8px 0; margin-bottom:8px;
}
.project-index a{
  font-size:0.85rem; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:5px 13px;
  background:var(--surface);
}
.project-index a:hover{ color:var(--accent); border-color:var(--accent); }

article.project{
  padding:48px 0; border-top:1px solid var(--line);
}
article.project:first-of-type{ border-top:none; }
.project-head h3{ font-size:1.4rem; margin-bottom:6px; }
.project-desc{ color:var(--muted); font-size:1.02rem; max-width:60ch; }

ul.meta-row{
  list-style:none; margin:16px 0 22px 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 28px;
}
ul.meta-row li{
  font-size:0.92rem; color:var(--ink);
}
ul.meta-row li span{
  display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:2px;
}

ul.measures{
  list-style:none; margin:0 0 26px 0; padding:0; max-width:68ch;
}
ul.measures li{
  position:relative; padding-left:18px; margin-bottom:8px; color:var(--ink);
}
ul.measures li::before{
  content:""; position:absolute; left:0; top:0.6em; width:6px; height:6px;
  background:var(--accent); border-radius:50%;
}
ul.measures li strong{ color:var(--primary-dark); }

.gallery{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px;
}
.gallery-item{
  display:block; overflow:hidden; border-radius:var(--radius); background:var(--line);
  aspect-ratio:4/3;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; border-radius:0;
  transition:transform .35s ease;
}
.gallery-item:hover img{ transform:scale(1.05); }

/* lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(15,20,22,0.92); z-index:100;
  display:none; align-items:center; justify-content:center; padding:5vh 5vw;
  cursor:zoom-out;
}
#lightbox.open{ display:flex; }
#lightbox img{
  max-width:100%; max-height:90vh; width:auto; height:auto; border-radius:2px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
#lightbox .lb-close{
  position:absolute; top:22px; right:28px; color:#fff; font-size:2rem; line-height:1;
  background:none; border:none; cursor:pointer; opacity:.8;
}
#lightbox .lb-close:hover{ opacity:1; }

/* ============================================================
   IMPRESSUM PAGE
   ============================================================ */
.legal dl{
  display:grid; grid-template-columns:auto 1fr; gap:6px 20px; margin:0 0 32px 0;
}
.legal dt{ color:var(--muted); font-size:0.9rem; }
.legal dd{ margin:0; }
.legal h3{
  font-family:"Fraunces", serif; font-size:1.1rem; color:var(--primary);
  margin-top:2em; margin-bottom:0.6em;
}
.legal h4{
  font-size:1rem; color:var(--primary-dark); margin:1.4em 0 0.4em 0;
}
.legal p{ color:var(--ink); }

@media print{
  header.site{ position:static; }
  section.block, article.project{ break-inside:avoid; }
}