/* ============================================================
   SCHÖNTAG — Webseite / Design System
   B/W + ein Grün-Akzent · D-DIN-nahe Typografie · diagonale Schnitte
   ============================================================ */

/* ---- Hausschrift D-DIN ---- */
@font-face{font-family:'D-DIN';src:url('fonts/D-DIN.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'D-DIN';src:url('fonts/D-DIN-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'D-DIN Condensed';src:url('fonts/D-DINCondensed.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'D-DIN Condensed';src:url('fonts/D-DINCondensed-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --ink:#111111;
  --ink-pure:#000000;
  --ink-soft:#1c1c1c;
  --paper:#ffffff;
  --paper-2:#f5f5f3;
  --paper-3:#ededea;
  --line:#e3e3df;
  --line-strong:#cfcfca;
  --muted:#6b6b66;
  --muted-2:#8d8d88;
  --accent:#111111;
  --accent-ink:#6b6b66;
  --green:#2f9e6a;            /* Schöntag-Grünakzent (Lookbook) */
  --green-ink:#27875a;

  --head: 'D-DIN Condensed', 'Arial Narrow', sans-serif;
  --body: 'D-DIN', 'Helvetica Neue', Arial, sans-serif;

  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 64px);
  --sec-y:clamp(64px, 9vw, 132px);

  --diag: 64px;               /* diagonaler Versatz */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--accent);color:#fff;}

/* ---------------- Typography ---------------- */
.h-display,.h1,.h2,.h3,.eyebrow{font-family:var(--head);text-transform:uppercase;}
.h-display{
  font-weight:700;
  font-size:clamp(2.7rem, 6.2vw, 5.6rem);
  line-height:.92;
  letter-spacing:-.005em;
  margin:0;
}
.h1{font-weight:700;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.95;letter-spacing:-.004em;margin:0;}
.h2{font-weight:700;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:.98;margin:0;}
.h3{font-weight:600;font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.02;margin:0;}
.eyebrow{
  font-family:var(--head);
  font-weight:600;
  font-size:.84rem;
  letter-spacing:.22em;
  color:var(--muted);
  display:inline-block;
  white-space:nowrap;
}
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;color:var(--ink);font-weight:400;}
p{margin:0 0 1em;}
.muted{color:var(--muted);}
.label{
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--muted);
}

/* short rule under eyebrows */
.rule{display:block;width:54px;height:3px;background:var(--green);border:0;margin:14px 0 22px;}
.rule.ink{background:var(--ink);}
.rule.sm{width:40px;height:2px;margin:10px 0 16px;}

/* ---------------- Layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:var(--sec-y);}
.section.tight{padding-block:clamp(48px,6vw,84px);}
.bg-paper2{background:var(--paper-2);}
.bg-ink{background:var(--ink);color:#fff;}
.bg-ink .muted{color:#a4a4a0;}
.bg-ink .eyebrow{color:#fff;}
.bg-ink .rule{background:var(--green);}

.grid{display:grid;gap:clamp(20px,3vw,40px);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;line-height:1;white-space:nowrap;
  padding:16px 26px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn .ar{transition:transform .25s var(--ease);}
.btn:hover{background:#fff;color:var(--ink);}
.btn:hover .ar{transform:translateX(4px);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:var(--ink);color:#fff;}
.btn.onink{background:#fff;color:var(--ink);border-color:#fff;}
.btn.onink:hover{background:transparent;color:#fff;}
.btn.sm{padding:11px 18px;font-size:.82rem;}

.textlink{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;
  background:transparent;border:none;color:inherit;
  padding:0 0 3px;border-bottom:2px solid var(--ink);
  transition:gap .2s var(--ease),border-color .2s;
}
.textlink:hover{gap:14px;border-color:var(--accent);}
.bg-ink .textlink{border-color:#fff;}
.bg-ink .textlink:hover{border-color:var(--accent);}

/* ---------------- Image / placeholder ---------------- */
.ph{
  position:relative;overflow:hidden;background:var(--paper-3);
  background-image:repeating-linear-gradient(135deg,
     rgba(0,0,0,.045) 0 1px, transparent 1px 11px);
}
.ph.dark{background:#1a1a1a;background-image:repeating-linear-gradient(135deg,
     rgba(255,255,255,.05) 0 1px, transparent 1px 11px);}
.ph .ph-label{
  position:absolute;inset:auto 0 0 0;display:flex;align-items:center;gap:8px;
  padding:10px 12px;font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:.66rem;letter-spacing:.04em;color:#5a5a55;text-transform:uppercase;
}
.ph.dark .ph-label{color:#9a9a95;}
.ph .ph-mid{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.ph .ph-mid span{
  font-family:ui-monospace,Menlo,monospace;font-size:.7rem;letter-spacing:.08em;
  color:#7c7c76;text-transform:uppercase;border:1px dashed #b9b9b3;padding:6px 12px;background:rgba(255,255,255,.5);
}
.ph.dark .ph-mid span{color:#bcbcb6;border-color:#444;background:rgba(0,0,0,.3);}

/* diagonal-clipped media */
.clip-l{clip-path:polygon(var(--diag) 0,100% 0,100% 100%,0 100%);}
.clip-r{clip-path:polygon(0 0,100% 0,calc(100% - var(--diag)) 100%,0 100%);}
.clip-bl{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--diag)));}
.no-diag .clip-l,.no-diag .clip-r,.no-diag .clip-bl{clip-path:none;}

/* black message box */
.msgbox{background:var(--ink);color:#fff;padding:clamp(22px,3vw,38px);}
.msgbox .h3{color:#fff;}
.msgbox .accent-rule{width:46px;height:3px;background:var(--green);margin-bottom:16px;}

/* ---------------- Cards ---------------- */
.card{background:var(--paper);border:1px solid var(--line);}
.svc{
  padding:clamp(24px,2.6vw,34px);background:var(--paper);border:1px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
  position:relative;height:100%;
}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.35);border-color:var(--line-strong);}
.svc .ic{width:46px;height:46px;color:var(--ink);margin-bottom:22px;}
.svc .num{position:absolute;top:22px;right:24px;font-family:var(--head);font-weight:700;
  font-size:1.1rem;color:var(--line-strong);}

/* check list */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.checks li{display:flex;gap:16px;align-items:flex-start;}
.checks .ck{flex:0 0 auto;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink);}
.checks h4{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.02rem;margin:3px 0 4px;}
.checks p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.5;}

/* spec / data list (BAUHERR …) */
.spec{display:grid;grid-template-columns:auto 1fr;gap:9px 26px;font-size:.92rem;}
.spec dt{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.74rem;color:var(--muted);align-self:center;}
.spec dd{margin:0;font-weight:500;}

/* stat */
.stat{text-align:center;}
.stat .n{font-family:var(--head);font-weight:700;font-size:clamp(2.8rem,5vw,4.4rem);line-height:1;}
.stat .n .u{color:#fff;}
.stat .t{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:.82rem;color:#a4a4a0;margin-top:10px;}

/* tag / filter chips */
.chip{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
  padding:9px 16px;border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:.18s var(--ease);
}
.chip:hover{border-color:var(--ink);}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------------- Reveal animation ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------------- Responsive ---------------- */
@media (max-width:960px){
  :root{--diag:40px;}
  .cols-4{grid-template-columns:repeat(2,1fr);}
  .cols-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  body{font-size:16px;}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
  .clip-l,.clip-r{clip-path:none;}
}