:root{
  /* Titanzink, Schlagschnur-Blau, Kreide auf der Dachlatte */
  --tinte:#101314;
  --zink:#7D858A;
  --zink-tief:#333A3E;
  --schnur:#2C55A0;
  --raster:#E4E6E6;
  --papier:#FFFFFF;
  --kreide:#F7F7F6;

  --s--2:clamp(.71rem,.69rem + .1vw,.78rem);
  --s--1:clamp(.84rem,.81rem + .13vw,.93rem);
  --s-0:clamp(1rem,.97rem + .16vw,1.1rem);
  --s-1:clamp(1.15rem,1.06rem + .38vw,1.4rem);
  --s-2:clamp(1.4rem,1.12rem + 1.28vw,2.25rem);
  --s-3:clamp(2rem,1.4rem + 2.7vw,3.75rem);
  --s-tag:clamp(2.5rem,1.7rem + 3.6vw,4.75rem);
  --space:clamp(1.5rem,1.15rem + 1.75vw,2.75rem);
  --edge:clamp(1.25rem,.75rem + 2.6vw,3.5rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd{margin:0;padding:0;}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.62;font-weight:400;
  color:var(--tinte);background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--schnur);outline-offset:3px;}
[id]{scroll-margin-top:3.5rem;}

.k-serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:.92;letter-spacing:-.01em;}
.k-wrap{width:min(66rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.k-mark{display:block;font-size:var(--s--2);letter-spacing:.2em;text-transform:uppercase;color:var(--zink);font-weight:500;}

/* ── Präsenzo-Leiste ── */
.pz{background:var(--tinte);color:var(--papier);font-size:var(--s--1);}
.pz__in{width:min(66rem,100%);margin-inline:auto;padding:.6rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center;justify-content:center;text-align:center;}
.pz__cta{color:#9FBBE8;font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ── Kopf ── */
.kopf{border-bottom:1px solid var(--raster);}
.kopf__in{width:min(66rem,100%);margin-inline:auto;padding:1.05rem var(--edge);
  display:flex;align-items:baseline;gap:var(--space);flex-wrap:wrap;}
.haus{font-weight:600;font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;}
.nav{margin-inline-start:auto;display:flex;gap:1.4rem;flex-wrap:wrap;font-size:var(--s--1);}
.nav a{text-decoration:none;color:var(--zink);padding-bottom:.1rem;border-bottom:1px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--tinte);}

/* ── Hero ── */
.auf{padding-block:clamp(2.75rem,2rem + 4vw,5.5rem) clamp(2rem,1.5rem + 2.5vw,3.5rem);}
.auf h1{font-size:var(--s-3);max-width:17ch;margin-top:1.1rem;font-weight:600;letter-spacing:-.028em;line-height:1.06;}
.auf__lede{margin-top:1.35rem;max-width:45ch;font-size:var(--s-1);line-height:1.5;color:var(--zink-tief);}
.auf__reihe{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;}

.t-voll{display:inline-block;background:var(--tinte);color:var(--papier);text-decoration:none;
  font-size:var(--s--1);font-weight:500;padding:.85rem 1.6rem;border:1px solid var(--tinte);}
.t-voll:hover{background:var(--schnur);border-color:var(--schnur);}
.t-linie{display:inline-block;text-decoration:none;border:1px solid var(--raster);
  font-size:var(--s--1);font-weight:500;padding:.85rem 1.6rem;color:var(--zink-tief);}
.t-linie:hover{border-color:var(--tinte);color:var(--tinte);}

/* ── Signatur: der Bauzeitenplan ── */
.plan{border-top:1px solid var(--tinte);padding-top:1.1rem;}
.plan__kopf{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;justify-content:space-between;}
.plan__kopf h2{font-size:var(--s--1);font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.plan__kopf span{font-size:var(--s--2);color:var(--zink);}

.skala{display:none;margin-top:1.4rem;grid-template-columns:minmax(9rem,15rem) 1fr;
  gap:0 var(--space);align-items:end;padding-bottom:.5rem;border-bottom:1px solid var(--raster);}
.skala__label{font-size:var(--s--2);color:var(--zink);letter-spacing:.16em;text-transform:uppercase;}
.skala__tage{display:grid;grid-template-columns:repeat(8,1fr);gap:0 .3rem;}
.skala__tage span{font-size:var(--s--2);color:var(--zink);text-align:center;}

.zeile{padding-block:1rem;border-bottom:1px solid var(--raster);}
.zeile__name{display:block;font-weight:600;font-size:var(--s-0);}
.zeile__tage{display:block;font-size:var(--s--1);color:var(--schnur);font-weight:500;margin-top:.1rem;}
.zeile__was{display:block;font-size:var(--s--1);color:var(--zink);margin-top:.1rem;}
.zeile__gitter{display:none;}

@media (min-width:56rem){
  .skala{display:grid;}
  .zeile{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr;gap:0 var(--space);align-items:center;}
  .zeile__tage{display:none;}
  .zeile__gitter{display:grid;grid-template-columns:repeat(8,1fr);gap:0 .3rem;align-items:center;}
  .zeile__gitter::before{content:"";grid-column:1 / -1;grid-row:1;height:.4rem;background:var(--kreide);}
  .zeile__balken{grid-row:1;height:.4rem;background:var(--tinte);}
  .zeile:nth-of-type(even) .zeile__balken{background:var(--schnur);}
}

.plan__fuss{margin-top:1.4rem;font-size:var(--s--1);color:var(--zink);max-width:56ch;}

/* ── Abschnitte ── */
.feld{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);border-top:1px solid var(--raster);}
.feld--kreide{background:var(--kreide);}
.feld--tinte{background:var(--tinte);color:var(--papier);border-top-color:var(--tinte);}
.feld--tinte .k-mark{color:var(--zink);}
.feld__kopf{max-width:48ch;}
.feld__kopf h2{font-size:var(--s-2);margin-top:.75rem;font-weight:600;letter-spacing:-.024em;line-height:1.12;}
.feld__kopf p{margin-top:.9rem;color:var(--zink-tief);}
.feld--tinte .feld__kopf p{color:rgba(255,255,255,.72);}

/* ── Tagesnotizen mit großer Serifenzahl ── */
.tage{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:40rem){.tage{grid-template-columns:1fr 1fr;}}
@media (min-width:62rem){.tage{grid-template-columns:repeat(4,1fr);}}
.tag{border-top:1px solid var(--tinte);padding-top:.85rem;}
.feld--tinte .tag{border-top-color:rgba(255,255,255,.5);}
.tag b{display:block;font-family:'Instrument Serif',serif;font-weight:400;font-size:var(--s-tag);line-height:.9;}
.tag h3{margin-top:.5rem;font-size:var(--s-0);font-weight:600;}
.tag p{margin-top:.4rem;font-size:var(--s--1);color:var(--zink-tief);}
.feld--tinte .tag p{color:rgba(255,255,255,.72);}

/* ── Listen ── */
.liste{margin-top:clamp(2rem,1.5rem + 2vw,3rem);border-top:1px solid var(--tinte);}
.feld--tinte .liste{border-top-color:rgba(255,255,255,.5);}
.punkt{display:grid;gap:.3rem 1.5rem;grid-template-columns:1fr;
  padding-block:1.15rem;border-bottom:1px solid var(--raster);}
.feld--tinte .punkt{border-bottom-color:rgba(255,255,255,.18);}
@media (min-width:50rem){.punkt{grid-template-columns:minmax(11rem,.8fr) minmax(0,1.7fr) auto;align-items:baseline;}}
.punkt__name{font-weight:600;}
.punkt__text{font-size:var(--s--1);color:var(--zink-tief);}
.feld--tinte .punkt__text{color:rgba(255,255,255,.72);}
.punkt__wert{font-size:var(--s--1);color:var(--schnur);font-weight:500;white-space:nowrap;}
.feld--tinte .punkt__wert{color:#9FBBE8;}

/* ── Bild ── */
.bild{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.bild figcaption{margin-top:.65rem;font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;color:var(--zink);}

/* ── Kontakt ── */
.paare{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.paare{grid-template-columns:1fr 1fr;}}
.paar h3{font-size:var(--s--2);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--zink);margin-bottom:.85rem;}
.paar__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;
  border-bottom:1px solid var(--raster);font-size:var(--s--1);}
.feld--tinte .paar__zeile{border-bottom-color:rgba(255,255,255,.18);}
.paar__zeile span:last-child{font-weight:500;text-align:right;}

/* ── Unterseiten ── */
.oben{padding-block:clamp(2.5rem,1.9rem + 3vw,4.25rem) 0;}
.oben h1{font-size:var(--s-2);max-width:20ch;margin-top:.75rem;font-weight:600;letter-spacing:-.024em;line-height:1.12;}
.oben p{margin-top:.95rem;max-width:48ch;color:var(--zink-tief);font-size:var(--s-1);line-height:1.5;}

.fuss{border-top:1px solid var(--raster);padding-block:2.5rem;font-size:var(--s--1);color:var(--zink);}
.fuss a{color:var(--tinte);}
.fuss p + p{margin-top:.45rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}