/* =====================================================================
   DrawingStamp Pro — gemeinsames Design-System (Apple-Look, hell + dunkle
   Sektionen). Auf jeder Seite via <link rel="stylesheet" href="assets/site.css">.
   Grundet den Apple-Stil in der Produktwelt: technische Zeichnung,
   Bemaßung, nummerierte Prüfstempel (Monospace-Callouts).
   ===================================================================== */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* helle Grundflächen (Apple) */
  --bg:            #ffffff;
  --bg-muted:      #f5f5f7;          /* Apple-Grau, leicht kühl */
  --text:          #1d1d1f;          /* Apple-Fast-Schwarz */
  --text-2:        #6e6e73;          /* Sekundärtext */
  --line:          rgba(0,0,0,.10);

  /* dunkle Markensektionen */
  --bg-dark:       #0b1020;
  --bg-dark-2:     #0f172a;
  --on-dark:       #f5f5f7;
  --on-dark-2:     #9aa6bd;
  --line-dark:     rgba(255,255,255,.12);

  /* Akzent (Markenblau) */
  --accent:        #2563eb;          /* auf Hell lesbar */
  --accent-hover:  #1d4ed8;
  --accent-light:  #60a5fa;          /* auf Dunkel */

  /* Bemaßungs-Hairline (technisches Detail) */
  --dim:           rgba(37,99,235,.30);
  --dim-dark:      rgba(96,165,250,.38);

  --radius:        20px;
  --radius-sm:     14px;
  --pill:          980px;
  --maxw:          1120px;
  --nav-h:         52px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }

/* ------------------------------------------------------------------ */
/* Layout                                                             */
/* ------------------------------------------------------------------ */
.section{ padding:clamp(76px,13vh,152px) 0; position:relative; }
.section--muted{ background:var(--bg-muted); }
.section--dark{
  background:
    radial-gradient(1100px 620px at 50% -8%, #16233f 0%, var(--bg-dark) 62%);
  color:var(--on-dark);
}
.section--tight{ padding-top:clamp(48px,7vh,84px); }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.container--narrow{ max-width:760px; }

/* Blueprint-Raster als leises Detail in dunklen Sektionen */
.section--dark.grid::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(1000px 520px at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(1000px 520px at 50% 0%, #000 0%, transparent 72%);
}
.section--dark.grid > .container{ position:relative; z-index:1; }

/* ------------------------------------------------------------------ */
/* Typografie                                                         */
/* ------------------------------------------------------------------ */
.eyebrow{
  font:600 .82rem/1 var(--mono);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin:0 0 18px;
  display:inline-flex; align-items:center; gap:10px;
}
.section--dark .eyebrow{ color:var(--accent-light); }
.eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.65;
}

h1,h2,h3{ margin:0; letter-spacing:-.022em; text-wrap:balance; }
.h-display{
  font-size:clamp(2.6rem,6.2vw,4.9rem); font-weight:700; line-height:1.04;
}
.h-section{
  font-size:clamp(2rem,4.6vw,3.35rem); font-weight:700; line-height:1.07;
}
.h-sub{
  font-size:clamp(1.35rem,2.6vw,2.1rem); font-weight:600; line-height:1.12;
}
.lead{
  font-size:clamp(1.16rem,2.05vw,1.55rem); font-weight:400; line-height:1.42;
  color:var(--text-2); margin:20px 0 0; max-width:40ch;
}
.section--dark .lead{ color:var(--on-dark-2); }
.lead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.prose{ font-size:1.075rem; color:var(--text-2); }
.prose p{ margin:0 0 1.1em; }
.center{ text-align:center; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-row--center{ justify-content:center; }
.btn{
  display:inline-flex; align-items:center; gap:.45em;
  font:500 1.06rem/1 var(--font); text-decoration:none; cursor:pointer;
  padding:14px 26px; border-radius:var(--pill); border:1px solid transparent;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 10px 26px rgba(37,99,235,.28); }
.btn--primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 16px 34px rgba(37,99,235,.36); }
.section--dark .btn--primary{ background:var(--accent-light); color:#0b1020; box-shadow:0 12px 30px rgba(96,165,250,.32); }
.section--dark .btn--primary:hover{ background:#93c5fd; }
.btn--ghost{ background:transparent; color:var(--accent); border-color:var(--line); }
.btn--ghost:hover{ background:rgba(37,99,235,.06); transform:translateY(-2px); }
.section--dark .btn--ghost{ color:var(--on-dark); border-color:var(--line-dark); }
.section--dark .btn--ghost:hover{ background:rgba(255,255,255,.06); }

.link-more{
  display:inline-flex; align-items:center; gap:.35em;
  color:var(--accent); font-weight:500; text-decoration:none;
  font-size:1.05rem;
}
.section--dark .link-more{ color:var(--accent-light); }
.link-more .arrow{ transition:transform .18s ease; }
.link-more:hover .arrow{ transform:translateX(4px); }

/* ------------------------------------------------------------------ */
/* Produkt-Screenshot im schwebenden Rahmen                           */
/* ------------------------------------------------------------------ */
.shot-frame{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(15,23,42,.20), 0 8px 24px rgba(15,23,42,.10);
  background:#fff;
}
.section--dark .shot-frame{
  border-color:var(--line-dark);
  box-shadow:0 50px 120px rgba(0,0,0,.55);
}
.shot-frame img{ width:100%; }

/* Bemaßungs-Beschriftung an Bildern (technisches Detail) */
.dim-note{
  font:500 .8rem/1 var(--mono); color:var(--text-2);
  letter-spacing:.02em; margin-top:14px; display:flex; gap:8px; align-items:center;
}
.section--dark .dim-note{ color:var(--on-dark-2); }
.dim-note::before{ content:""; width:34px; height:1px; background:var(--dim); }
.section--dark .dim-note::before{ background:var(--dim-dark); }

/* ------------------------------------------------------------------ */
/* Split (Text + Bild)                                                */
/* ------------------------------------------------------------------ */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.split--reverse .split__media{ order:-1; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; gap:clamp(24px,6vw,40px); } }

/* ------------------------------------------------------------------ */
/* Merkmale als nummerierte "Prüfstempel"                             */
/* ------------------------------------------------------------------ */
.features{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px);
  margin-top:56px;
}
.feature{
  padding:32px 30px; border-radius:var(--radius);
  background:var(--bg); border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.section--muted .feature{ background:#fff; }
.section--dark .feature{ background:rgba(255,255,255,.04); border-color:var(--line-dark); }
.feature:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(15,23,42,.12); }
.section--dark .feature:hover{ box-shadow:0 28px 60px rgba(0,0,0,.5); }
/* nummerierter Stempel wie eine Prüf-Ballon-Marke */
.stamp{
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 1.02rem/1 var(--mono);
  color:var(--accent); border:1.5px solid var(--accent);
  margin-bottom:22px; letter-spacing:.02em;
}
.section--dark .stamp{ color:var(--accent-light); border-color:var(--accent-light); }
.feature h3{ font-size:1.28rem; font-weight:600; letter-spacing:-.01em; }
.feature p{ margin:12px 0 0; color:var(--text-2); font-size:1.02rem; }
.section--dark .feature p{ color:var(--on-dark-2); }

/* Kennzahlen-/Plattform-Band */
.spec-row{
  display:flex; flex-wrap:wrap; gap:14px 12px; margin-top:38px;
  justify-content:center;
}
.chip{
  font:500 .95rem/1 var(--font); color:var(--text-2);
  padding:11px 18px; border:1px solid var(--line); border-radius:var(--pill);
  background:var(--bg); display:inline-flex; align-items:center; gap:8px;
}
.section--dark .chip{ color:var(--on-dark-2); border-color:var(--line-dark); background:rgba(255,255,255,.03); }

/* ------------------------------------------------------------------ */
/* Karte für Unterseiten-Inhalt                                       */
/* ------------------------------------------------------------------ */
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(28px,4vw,46px); box-shadow:0 26px 60px rgba(15,23,42,.08);
}
.section--muted .card{ background:#fff; }

/* ------------------------------------------------------------------ */
/* Footer (Apple-Kleingedrucktes)                                     */
/* ------------------------------------------------------------------ */
.site-footer{
  background:var(--bg-muted); border-top:1px solid var(--line);
  color:var(--text-2); font-size:.85rem; padding:44px 0 52px;
}
.site-footer .container{ display:flex; flex-direction:column; gap:20px; }
.foot-brand{ display:flex; align-items:center; gap:12px; color:var(--text); font-weight:600; }
.foot-brand img{ width:30px; height:30px; border-radius:22%; }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot-links a{ color:var(--text-2); text-decoration:none; }
.foot-links a:hover{ color:var(--text); }
.foot-legal{ border-top:1px solid var(--line); padding-top:18px; color:var(--text-2); }

/* ------------------------------------------------------------------ */
/* Scroll-Reveal                                                      */
/* ------------------------------------------------------------------ */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */
@media (max-width:900px){
  .features{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split--reverse .split__media{ order:0; }
}
@media (max-width:560px){
  .features{ grid-template-columns:1fr; }
  .btn-row{ gap:10px; }
  .btn{ width:100%; justify-content:center; }
  .btn-row--auto .btn{ width:auto; }
}