:root{
  --blue:#1A4FB3;
  --black:#1A1A1A;
  --white:#F7F7F7;
  --warm-grey:#B8B8B8;

  /* Vollflächig statt "schmale Mitte" */
  --maxw: 1680px;          /* früher 1120px -> war auf großen Screens zu schmal */
  --gutter-desktop: 64px;  /* Seitenrand Desktop */
  --gutter-mobile: 20x;   /* Seitenrand Mobile */
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
}

html{ overflow-y:scroll; }

body{
  font-family:"Segoe UI","Segoe UI Variable",Arial,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.35;
  color:var(--black);
  background:var(--white);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{ flex:1 0 auto; }
footer{ flex-shrink:0; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== Layout ===== */
.container{
  width: min(var(--maxw), 100%);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}

.section{ padding:56px 0; }
.section.tight{ padding:44px 0; }

.grid-2{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:28px;
  align-items:start;
}

@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
}

/* Optional: single-column image stack */
.gallery.vertical{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:320px;
}

.image-stack{
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:14px;
  height:100%;
}

.image-stack .img{ height:100%; }

/* ===== Type ===== */
h1{
  margin:0 0 14px 0;
  font-size: clamp(32px, 2.4vw, 44px);
  font-weight:400;
  letter-spacing:0.02em;
}

h2{
  margin:0 0 18px 0;
  font-size: clamp(20px, 1.4vw, 24px);
  font-weight:600;
}

h3{
  margin:18px 0 12px 0;
  font-size:18px;
  font-weight:600;
}

p{ margin:0 0 14px 0; }

.small{
  font-size:12px;
  color:rgba(26,26,26,0.78);
}

.kicker{
  font-size:13px;
  color:rgba(26,26,26,0.72);
  margin:0 0 10px 0;
}

/* Lists */
ul.clean{
  margin:0 0 14px 0;
  padding-left:18px;
}

ul.clean li{ margin:8px 0; }
.tight ul.clean li{ font-size:15px; }

/* ===== Header / Nav ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 247, 247, 0.96);
  border-bottom: 1px solid rgba(26, 26, 26, 0.14);
  padding-left: clamp(40px, 6vw, 120px);
  padding-right: clamp(40px, 6vw, 120px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 0;
}

/* Brand (link to home) */
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

a.brand,
a.brand:hover{
  color:inherit;
  text-decoration:none;
}

.brand .wordmark{
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--blue);
}

.brand .claim{
  font-size:14px;
  color:rgba(26,26,26,0.85);
}

.menu{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu a{
  font-size:14px;
  padding:6px 0;
  color:var(--black);
  border-bottom:2px solid transparent;
}

.menu a:hover{ text-decoration:none; }

.menu a.active,
.menu a[aria-current="page"]{
  border-bottom-color:var(--blue);
}

/* Dropdown */
.menu .dd{ position:relative; }
.menu .dd > a{ display:inline-block; }

.menu .dd .ddm{
  display:none;
  position:absolute;
  right:0;
  top:28px;
  min-width:200px;
  background:var(--white);
  border:1px solid rgba(26,26,26,0.12);
  padding:8px 10px;
  z-index:100;
}

.menu .dd:hover .ddm,
.menu .dd:focus-within .ddm{
  display:block;
}

.menu .dd .ddm a{
  display:block;
  padding:8px 6px;
  border-bottom:1px solid rgba(26,26,26,0.08);
}

.menu .dd .ddm a:last-child{ border-bottom:none; }

/* Mobile dropdown toggle button */
.menu .dd .ddt{
  border:0;
  background:none;
  padding:6px 0;
  font:inherit;
  cursor:pointer;
  border-bottom:2px solid transparent;
}

.menu .dd.open .ddm{ display:block; }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:38vh;
  display:grid;
  align-items:end;
  padding:56px 0 40px 0;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(0deg, rgba(247,247,247,0.86) 0%, rgba(247,247,247,0.60) 45%, rgba(247,247,247,0.30) 100%),
    url("../img/hero.png");
  background-size:cover;
  background-position:center;
  filter:saturate(0.85);
}

.hero .container{ position:relative; }

.hero h1{
  margin:0;
  font-size: clamp(32px, 2.6vw, 48px);
  font-weight:400;
  letter-spacing:0.02em;
}

.hero p{
  margin:12px 0 0 0;
  font-size:16px;
  max-width:62ch;
}

@media (max-width:900px){
  .hero{ padding-top:40px; }
}

/* Rule */
.rule{
  height:1px;
  background:rgba(26,26,26,0.12);
  margin:18px 0 0 0;
}

/* ===== Gallery ===== */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:520px){
  .gallery{ grid-template-columns:1fr; }
}

.img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:0;
  border-radius:0;
  background:transparent;
}

/* ===== Footer ===== */
.footer{
  border-top:1px solid rgba(26,26,26,0.12);
  background:transparent;
  padding:28px 0;
}

.footer .row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:start;
}

.footer .links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

footer .small strong{ color:var(--black); }

/* Contact */
.contact-block{ display:grid; gap:8px; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(26,26,26,0.18);
  color:var(--black);
  background:transparent;
  border-radius:0;
  font-size:14px;
  text-decoration:none;
}

.btn:hover{ border-color:rgba(26,26,26,0.40); }
.btn.primary{ border-color:var(--blue); }

/* ===== Clickshow ===== */
.clickshow{
  display:grid;
  gap:12px;
}

.clickshow .stage{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  background:#fff;
}

.clickshow .thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.clickshow .thumbs img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  cursor:pointer;
  opacity:0.85;
}

.clickshow .thumbs img:hover{ opacity:1; }

/* Clickshow – stabil, nichts abgeschnitten */
.clickshow-fixed .stage{
  width:100%;
  height:360px;
  object-fit:contain;
  background:#fff;
}

.clickshow-fixed .thumbs{ grid-template-columns:repeat(4,1fr); }

.clickshow-fixed .thumbs img{
  height:80px;
  object-fit:cover;
}

/* ===== Tiles (Materialien Downloads) ===== */
.tiles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

@media (max-width:520px){
  .tiles{ grid-template-columns:1fr; }
}

.tile{
  position:relative;
  display:block;
  text-decoration:none;
  overflow:hidden;
}

.tile:hover{ text-decoration:none; }

.tile img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

.tile .label{
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(247,247,247,0.92);
  padding:6px 8px;
  border:1px solid rgba(26,26,26,0.12);
  font-size:13px;
}

/* Tight sections */
.section.tight h1{ margin-bottom:10px; }
.section.tight h2{ margin-bottom:10px; }
.section.tight p,
.section.tight li{
  font-size:15px;
}

/* ===== Map ===== */
#map{
  width:100%;
  height:320px;
  border:1px solid rgba(26,26,26,0.12);
}

.leaflet-container{
  font-family:"Segoe UI","Segoe UI Variable",Arial,sans-serif;
}

/* Footer CTA – Projekt anfragen */
.footer-row{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:end;
  gap:24px;
}

.footer-cta-sticky{
  position:sticky;
  bottom:24px;
  justify-self:start;
  align-self:end;

  padding:10px 14px;
  font-size:14px;
  line-height:1;
  white-space:nowrap;

  background:var(--white);
  color:var(--black);
  border:1px solid var(--blue);
  text-decoration:none;
  box-shadow:none;
}

.footer-cta-sticky:hover{
  background:rgba(26,79,179,0.06);
  text-decoration:none;
}

/* ===== Mobile polish ===== */
@media (max-width:768px){

  :root{
    --gutter-desktop: var(--gutter-mobile);
  }

  .section{ padding:36px 0; }
  .section.tight{ padding:28px 0; }

  p,li{
    font-size:16px;
    line-height:1.45;
  }

  /* Header/Nav: untereinander */
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
  }

  .menu{
    width:100%;
    justify-content:flex-start;
    gap:12px;
  }

  .menu a{ padding:10px 0; }

  /* Dropdown: nicht hover-abhängig positionieren */
  .menu .dd .ddm{
    position:static;
    min-width:0;
    border:0;
    padding:6px 0 0 0;
  }

  /* Footer */
  .footer .row{ grid-template-columns:1fr; }
  .footer .links{ justify-content:flex-start; }

  .clickshow-fixed .stage{ height:240px; }
  .clickshow-fixed .thumbs img{ height:64px; }

  #map{ height:260px; }

  .footer-row{
    grid-template-columns:1fr;
    align-items:start;
  }

  .footer-cta-sticky{
    bottom:16px;
    justify-self:start;
  }
}

@media (max-width:520px){
  .hero{ padding:36px 0 28px 0; }
}