/* Werkzeichnung/Millimeterpapier-Design-System — geteilt von /, /preise, /features */
/* ============================================================
   CRAFTIFEX — „WERKZEICHNUNG"
   Eine Landingpage, gezeichnet wie ein technischer Plan.
   Blatt 01 · Maßstab 1:1 · Stand 06/2026
   ============================================================ */

:root{
  --paper:        #FAFAF7;
  --card:         #FFFFFF;
  --ink:          #1A1D20;
  --steel:        #5A646C;
  --line:         #DCD9CF;
  --line-soft:    #E8E6DD;
  --accent:       #E8500A;   /* Markierungsorange */
  --accent-dark:  #C03F03;
  --accent-soft:  #FDEDE3;
  --blueprint:    #15324E;   /* Cyanotypie */
  --blueprint-2:  #0F2740;
  --bp-line:      rgba(214,232,246,.22);
  --bp-text:      #C9DCEC;
  --bp-faint:     #8FB2CD;
  --ok:           #1E8A4C;

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(26,29,32,.05), 0 12px 32px -16px rgba(26,29,32,.18);
  --shadow-lift: 0 2px 4px rgba(26,29,32,.06), 0 24px 48px -20px rgba(26,29,32,.26);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background-color:var(--paper);
  /* Millimeterpapier: feines Raster + Zentimeter-Linien */
  background-image:
    linear-gradient(to right, rgba(232,80,10,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,80,10,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(232,80,10,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(232,80,10,.035) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 12px 12px, 12px 12px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--accent); color:#fff }

img,svg{ display:block; max-width:100% }
a{ color:inherit }
ul{ list-style:none }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit }

.container{ width:min(var(--container), 100% - 48px); margin-inline:auto }
@media (max-width:560px){ .container{ width:calc(100% - 40px) } }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; font-family:var(--mono); font-size:13px;
}
.skip-link:focus{ left:16px; top:12px }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }

/* ---------- Typo-Werkzeuge ---------- */

.display{
  font-variation-settings:'wdth' 122, 'wght' 800;
  letter-spacing:-.015em;
  line-height:.96;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--accent); flex:none;
}
.eyebrow b{ color:var(--accent); font-weight:600 }

.section-head{ max-width:720px; margin-bottom:56px }
.section-head h2{
  font-size:clamp(2rem, 4.6vw, 3.3rem);
  margin-top:18px;
}
.section-head p.lede{ margin-top:16px; color:var(--steel); font-size:1.08rem; max-width:560px }

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:15.5px; letter-spacing:.01em;
  padding:15px 26px; border-radius:var(--radius);
  text-decoration:none; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px) }
.btn--solid{ background:var(--ink); color:#fff }
.btn--solid:hover{ background:#000; box-shadow:var(--shadow) }
.btn--accent{ background:var(--accent); color:#fff }
.btn--accent:hover{ background:var(--accent-dark); box-shadow:var(--shadow) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:#fff }
.btn svg{ width:18px; height:18px; flex:none }

/* ---------- Registrierkreuze (Passermarken) ---------- */

.reg{
  position:absolute; width:15px; height:15px; pointer-events:none; opacity:.55;
  background:
    linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(250,250,247,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.nav.scrolled{ box-shadow:0 8px 24px -16px rgba(26,29,32,.25) }
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:11px; text-decoration:none;
}
.brand__mark{ width:30px; height:30px; flex:none; border-radius:8px; display:block; object-fit:cover }
.brand__name{
  font-family:'Orbitron', 'Archivo', system-ui, sans-serif;
  font-weight:700;
  font-size:18px; letter-spacing:.04em;
}
.brand__name span{ color:var(--accent) }

.nav__links{ display:flex; align-items:center; gap:6px }
.nav__links a:not(.btn){
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--steel);
  padding:9px 13px; border-radius:var(--radius);
  transition:color .15s ease, background-color .15s ease;
}
.nav__links a:not(.btn):hover{ color:var(--ink); background:rgba(26,29,32,.05) }
.nav__cta{ margin-left:10px; padding:11px 20px; font-size:14.5px }

.nav__toggle{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
}
.nav__toggle svg{ width:20px; height:20px }
.nav__toggle .x{ display:none }
.nav.open .nav__toggle .x{ display:block }
.nav.open .nav__toggle .burger{ display:none }

@media (max-width:880px){
  .nav__toggle{ display:flex }
  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:68px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:14px 24px 22px;
  }
  .nav.open .nav__links{ display:flex }
  .nav__links a:not(.btn){ padding:13px 10px; font-size:16px; border-bottom:1px dashed var(--line-soft) }
  .nav__cta{ margin:14px 0 0 }
}

/* ============================================================
   HERO — Blatt 01
   ============================================================ */

.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.hero .reg.tl{ top:22px; left:22px }
.hero .reg.tr{ top:22px; right:22px }

.hero__inner{
  display:grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
  padding:clamp(56px, 9vh, 104px) 0 clamp(64px, 10vh, 112px);
}

.hero h1{
  font-size:clamp(3.1rem, 7.5vw, 6.7rem);
  margin:26px 0 0;
}
.hero h1 .accent{ color:var(--accent) }

/* Bemaßungslinie unter der Headline */
.measure{
  display:flex; align-items:center; margin-top:26px; max-width:560px;
  position:relative; height:20px;
}
.measure::before,.measure::after{
  content:""; width:1px; height:20px; background:var(--ink); flex:none;
}
.measure__line{
  flex:1; height:1px; background:var(--ink); position:relative; margin:0 1px;
}
.measure__line::before,.measure__line::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.measure__line::before{ left:0; border-right:7px solid var(--ink); transform:translateY(-50%) }
.measure__line::after{ right:0; border-left:7px solid var(--ink); transform:translateY(-50%) }
.measure__label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); padding:0 14px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); white-space:nowrap;
}

.hero__sub{
  margin-top:24px; max-width:540px;
  font-size:1.13rem; color:var(--steel);
}
.hero__sub strong{ color:var(--ink); font-weight:600 }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }

.hero__specs{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:36px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:var(--steel);
}
.hero__specs span{ display:flex; align-items:center; gap:9px }
.hero__specs i{
  width:7px; height:7px; background:var(--accent); flex:none;
  transform:rotate(45deg);
}

@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; padding-top:48px }
  .hero h1{ font-size:clamp(3rem, 12vw, 5.2rem) }
  .hero__stage{ justify-self:center }
}

/* ---------- Bühne: Gerät + Bemaßung ---------- */

.hero__stage{
  position:relative;
  padding:34px 64px 56px 30px;   /* Raum für Bemaßungslinien */
}
@media (max-width:560px){ .hero__stage{ padding:24px 48px 48px 14px } }

.dim{ position:absolute; font-family:var(--mono); color:var(--steel) }
.dim--v{
  top:38px; bottom:60px; right:26px; width:1px; background:var(--ink);
}
.dim--v::before,.dim--v::after{
  content:""; position:absolute; left:50%;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
}
.dim--v::before{ top:0; border-bottom:7px solid var(--ink); transform:translateX(-50%) }
.dim--v::after{ bottom:0; border-top:7px solid var(--ink); transform:translateX(-50%) }
.dim--v .dim__cap{ position:absolute; left:-7px; width:15px; height:1px; background:var(--ink) }
.dim--v .cap-t{ top:0 } .dim--v .cap-b{ bottom:0 }
.dim--v .dim__tag{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  background:var(--paper); padding:12px 0;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; color:var(--accent);
  white-space:nowrap;
}

.dim--h{
  left:30px; right:64px; bottom:30px; height:1px; background:var(--ink);
}
.dim--h::before,.dim--h::after{
  content:""; position:absolute; top:50%;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
}
.dim--h::before{ left:0; border-right:7px solid var(--ink); transform:translateY(-50%) }
.dim--h::after{ right:0; border-left:7px solid var(--ink); transform:translateY(-50%) }
.dim--h .dim__cap{ position:absolute; top:-7px; height:15px; width:1px; background:var(--ink) }
.dim--h .cap-l{ left:0 } .dim--h .cap-r{ right:0 }
.dim--h .dim__tag{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); padding:0 12px;
  font-size:11.5px; font-weight:600; letter-spacing:.12em; color:var(--steel);
  white-space:nowrap;
}
@media (max-width:560px){
  .dim--v{ right:16px } .dim--h{ right:48px; left:14px }
}

/* ---------- Das Gerät ---------- */

.device{
  position:relative;
  width:min(330px, 100%);
  margin-inline:auto;
  background:var(--ink);
  border-radius:34px;
  padding:11px;
  box-shadow:var(--shadow-lift);
}
.device::before{ /* Lautsprecher-Schlitz */
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:54px; height:4px; border-radius:4px; background:rgba(255,255,255,.18);
}
.device__screen{
  background:#F6F5F1;
  border-radius:24px;
  overflow:hidden;
  font-size:12.5px;
  line-height:1.45;
  min-height:560px;
  display:flex; flex-direction:column;
  position:relative;
}

.app__bar{
  background:var(--ink); color:#fff;
  padding:13px 16px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.app__bar .t{ font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px }
.app__bar .t svg{ width:15px; height:15px }
.app__bar .no{ font-family:var(--mono); font-size:10.5px; color:#9fe3bd; letter-spacing:.04em }

.app__body{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; flex:1 }

.fld{
  background:#fff; border:1px solid #E5E2D9; border-radius:6px;
  padding:9px 12px;
}
.fld label{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:#98A1A8; margin-bottom:3px;
}
.fld .val{
  display:inline-block; font-weight:600; font-size:12.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; max-width:100%;
}

.chips{ display:flex; gap:7px }
.chip{
  flex:1; text-align:center; background:#fff; border:1px solid #E5E2D9; border-radius:6px;
  padding:8px 6px; font-family:var(--mono); font-size:10.5px; color:var(--ink);
}
.chip b{ display:block; font-size:9px; letter-spacing:.1em; color:#98A1A8; font-weight:500; margin-bottom:2px }

.mat{ background:#fff; border:1px solid #E5E2D9; border-radius:6px; padding:9px 12px }
.mat label{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#98A1A8 }
.mat .row{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11.5px; padding:5px 0; border-bottom:1px dashed #ECE9E0;
}
.mat .row:last-child{ border-bottom:0 }
.mat .row .q{ font-family:var(--mono); color:var(--steel); flex:none }

.fotos{ display:flex; gap:7px; align-items:center }
.foto{
  width:46px; height:46px; border-radius:6px; flex:none;
  background:linear-gradient(135deg,#D8DDD3,#B9C2BB);
  border:1px solid #E5E2D9; position:relative; overflow:hidden;
}
.foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
}
.foto:nth-child(2){ background:linear-gradient(135deg,#CFD9E2,#A7B6C2) }
.foto:nth-child(3){ background:linear-gradient(135deg,#E2D9CB,#C6B89F) }
.fotos .add{
  width:46px; height:46px; border:1.5px dashed #C9CFC9; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color:#98A1A8; font-size:18px; font-weight:300;
}

.sig{
  background:#fff; border:1px solid #E5E2D9; border-radius:6px; padding:9px 12px 10px;
  position:relative;
}
.sig label{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#98A1A8; margin-bottom:2px }
.sig svg.stroke{ width:150px; height:46px }
.sig svg.stroke path{
  fill:none; stroke:#23303B; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.sig .qr{ position:absolute; right:11px; bottom:9px; width:40px; height:40px }
.sig .baseline{ border-top:1px solid #D6D3C9; margin-top:2px; padding-top:4px;
  font-family:var(--mono); font-size:8.5px; color:#A6ADB3; letter-spacing:.05em }

.exportbtn{
  margin-top:auto;
  background:var(--accent); color:#fff; border-radius:8px;
  padding:12px; text-align:center; font-weight:700; font-size:12.5px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.exportbtn svg{ width:15px; height:15px }

.toast{
  position:absolute; left:14px; right:14px; bottom:64px;
  background:var(--ink); color:#fff; border-radius:8px;
  padding:10px 13px; font-size:11.5px; font-weight:500;
  display:flex; align-items:center; gap:9px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.45);
}
.toast svg{ width:15px; height:15px; flex:none; color:#7CE3A6 }

.stamp{
  position:absolute; right:18px; top:148px;
  transform:rotate(-7deg);
  border:2.5px solid var(--accent); border-radius:5px;
  color:var(--accent);
  font-family:var(--mono); text-align:center;
  padding:7px 13px 6px;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.stamp b{ display:block; font-size:12px; letter-spacing:.18em; font-weight:600 }
.stamp i{ display:block; font-style:normal; font-size:8.5px; letter-spacing:.08em; margin-top:2px; opacity:.85 }

/* ---------- Demo-Choreografie ---------- */

@keyframes rise{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
@keyframes wipe{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes draw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
@keyframes pop{ 0%{ opacity:0; transform:scale(.6) } 70%{ transform:scale(1.06) } 100%{ opacity:1; transform:scale(1) } }
@keyframes press{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(.965) } }
@keyframes slam{
  0%{ opacity:0; transform:rotate(-7deg) scale(1.7) }
  62%{ opacity:1; transform:rotate(-7deg) scale(.96) }
  78%{ transform:rotate(-7deg) scale(1.03) }
  100%{ opacity:1; transform:rotate(-7deg) scale(1) }
}

.demo.run .a{ animation:rise .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d,0s) }
.demo.run .val{ animation:wipe .65s steps(16,end) both; animation-delay:var(--d,0s) }
.demo.run .sig svg.stroke path{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.7s ease-in-out both; animation-delay:var(--d,0s);
}
.demo.run .qr{ animation:pop .45s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d,0s) }
.demo.run .exportbtn.go{ animation:press .4s ease both; animation-delay:var(--d,0s) }
.demo.run .toast{ animation:pop .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d,0s) }
.demo.run .stamp{ animation:slam .55s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--d,0s) }

@media (prefers-reduced-motion: reduce){
  .demo.run .a,.demo.run .val,.demo.run .qr,.demo.run .toast,.demo.run .stamp,
  .demo.run .exportbtn.go,.demo.run .sig svg.stroke path{ animation:none }
  .demo.run .sig svg.stroke path{ stroke-dasharray:none; stroke-dashoffset:0 }
}

/* ============================================================
   GEWERKE-LAUFBAND
   ============================================================ */

.ticker{
  border-bottom:1px solid var(--line);
  background:var(--card);
  overflow:hidden;
  padding:15px 0;
}
.ticker__track{
  display:flex; width:max-content; gap:0;
  animation:scroll 34s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused }
.ticker ul{ display:flex; flex:none }
.ticker li{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
  display:flex; align-items:center; white-space:nowrap;
}
.ticker li::after{
  content:""; width:6px; height:6px; background:var(--accent);
  transform:rotate(45deg); margin:0 26px;
}
@keyframes scroll{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none }
}

/* ============================================================
   SEKTIONEN — Grundgerüst
   ============================================================ */

section{ scroll-margin-top:84px }
.sec{ padding:clamp(76px, 11vh, 130px) 0 }

/* Scroll-Reveal (nur mit JS aktiv) */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }
.js .reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none }
}

/* ============================================================
   MODULE (Features)
   ============================================================ */

.grid-6{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media (max-width:980px){ .grid-6{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid-6{ grid-template-columns:1fr } }

.mod{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mod:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ink) }

/* CAD-Auswahlecken */
.mod::before,.mod::after{
  content:""; position:absolute; width:13px; height:13px;
  border:2px solid var(--accent); opacity:0; transition:opacity .18s ease;
}
.mod::before{ top:-2px; left:-2px; border-right:0; border-bottom:0 }
.mod::after{ bottom:-2px; right:-2px; border-left:0; border-top:0 }
.mod:hover::before,.mod:hover::after{ opacity:1 }

.mod__top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px }
.mod__icon{
  width:46px; height:46px; border:1px solid var(--ink); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
}
.mod__icon svg{ width:25px; height:25px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.mod__icon svg .hl{ stroke:var(--accent) }
.mod__id{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--steel) }

.mod h3{ font-size:1.22rem; font-weight:700; letter-spacing:-.01em }
.mod p{ color:var(--steel); font-size:.97rem; margin-top:8px }
.mod ul{ margin-top:16px; display:flex; flex-direction:column; gap:8px }
.mod li{
  font-size:.92rem; display:flex; align-items:baseline; gap:11px; color:var(--ink);
}
.mod li::before{
  content:""; width:6px; height:6px; background:var(--accent); flex:none;
  transform:translateY(-1px);
}

/* ============================================================
   BLAUPAUSE — Ablauf in 4 Schritten
   ============================================================ */

.blueprint{
  background-color:var(--blueprint);
  background-image:
    linear-gradient(to right, var(--bp-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bp-line) 1px, transparent 1px);
  background-size:96px 96px;
  color:#fff;
  border-top:1px solid var(--blueprint-2);
  border-bottom:1px solid var(--blueprint-2);
  position:relative;
}
.blueprint .eyebrow{ color:var(--bp-faint) }
.blueprint .eyebrow::before{ background:#fff }
.blueprint .eyebrow b{ color:#fff }
.blueprint .section-head p.lede{ color:var(--bp-text) }

.bp-meta{
  position:absolute; top:26px; right:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--bp-faint); text-transform:uppercase;
  display:flex; gap:22px;
}
@media (max-width:760px){ .bp-meta{ display:none } }

.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px;
  position:relative; margin-top:10px;
}
.steps::before{ /* Verbindungslinie */
  content:""; position:absolute; top:29px; left:calc(12.5% ); right:calc(12.5%);
  border-top:1.5px dashed rgba(214,232,246,.4);
}
@media (max-width:880px){
  .steps{ grid-template-columns:1fr; gap:0; padding-left:6px }
  .steps::before{
    top:10px; bottom:10px; left:34px; right:auto; border-top:0;
    border-left:1.5px dashed rgba(214,232,246,.4);
  }
}

.step{ position:relative; padding-top:4px }
@media (max-width:880px){
  .step{ display:grid; grid-template-columns:58px 1fr; gap:0 18px; padding:18px 0 }
}

.step__no{
  width:58px; height:58px; border-radius:50%;
  border:1.5px solid #fff; background:var(--blueprint);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:17px; font-weight:600;
  position:relative; z-index:1;
  margin-bottom:20px;
}
.step:last-child .step__no{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
@media (max-width:880px){
  .step__no{ margin-bottom:0; grid-row:1 / span 2 }
}

.step h3{ font-size:1.12rem; font-weight:700; letter-spacing:.005em }
.step p{ color:var(--bp-text); font-size:.95rem; margin-top:7px; max-width:30ch }
@media (max-width:880px){ .step p{ max-width:none } }

.bp-note{
  margin-top:54px; padding-top:24px;
  border-top:1px solid rgba(214,232,246,.25);
  display:flex; flex-wrap:wrap; gap:14px 36px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--bp-faint); text-transform:uppercase;
}
.bp-note span{ display:flex; align-items:center; gap:10px }
.bp-note i{ width:6px; height:6px; background:var(--accent); transform:rotate(45deg); flex:none }

/* ============================================================
   KONDITIONEN (Preise)
   ============================================================ */

.plans{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px; max-width:920px;
}
@media (max-width:760px){ .plans{ grid-template-columns:1fr } }

.plan{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px 30px; position:relative;
  display:flex; flex-direction:column;
}
.plan--pro{ border:1.5px solid var(--ink); box-shadow:var(--shadow) }

.hero__cloudhint{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:28px; padding:11px 16px;
  border:1px dashed var(--line); border-radius:4px;
  font-size:14px; color:var(--steel); text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.hero__cloudhint b{ color:var(--accent) }
.hero__cloudhint:hover{ border-color:var(--accent); color:var(--ink) }
.hero__cloudhint-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  border:1px solid var(--accent); border-radius:3px; padding:2px 7px;
}

.plans-group__label{ margin:0 0 18px }
.plans-group__label--cloud{ margin-top:56px }
.plan--cloud{
  max-width:920px;
  display:grid; grid-template-columns:1.35fr .95fr; gap:30px;
  border:1.5px solid var(--accent);
}
.plan--cloud .plan__cta{
  display:flex; flex-direction:column; gap:10px; justify-content:center;
  border-left:1px dashed var(--line); padding-left:30px;
}
.plan--cloud .plan__cta .btn{ text-align:center }
@media (max-width:760px){
  .plan--cloud{ grid-template-columns:1fr }
  .plan--cloud .plan__cta{ border-left:none; padding-left:0; border-top:1px dashed var(--line); padding-top:22px }
}

.plan__stamp{
  position:absolute; top:-15px; right:22px;
  transform:rotate(4deg);
  border:2px solid var(--accent); border-radius:4px; color:var(--accent);
  background:var(--card);
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.2em;
  padding:6px 13px 5px;
}

.plan__id{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--steel); text-transform:uppercase }
.plan h3{ font-size:1.7rem; margin-top:8px; font-variation-settings:'wdth' 116,'wght' 750; text-transform:uppercase; letter-spacing:.01em }

.plan__price{
  margin:18px 0 4px; display:flex; align-items:baseline; gap:10px;
  font-family:var(--mono);
}
.plan__price b{ font-size:2.5rem; font-weight:600; letter-spacing:-.02em }
.plan__price span{ font-size:.95rem; color:var(--steel) }
.plan__alt{ font-family:var(--mono); font-size:12.5px; color:var(--steel); letter-spacing:.02em }

.plan hr{ border:0; border-top:1px dashed var(--line); margin:24px 0 20px }

.plan ul{ display:flex; flex-direction:column; gap:11px; flex:1 }
.plan li{ display:flex; gap:12px; font-size:.97rem; align-items:baseline }
.plan li svg{ width:15px; height:15px; flex:none; transform:translateY(2px) }
.plan li.yes svg{ color:var(--accent) }
.plan li.no{ color:#9AA2A8 }
.plan li.no svg{ color:#C4C9CC }
.plan li b{ font-weight:700 }

.plan .btn{ margin-top:28px; width:100% }

.plans__foot{
  margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--steel);
  letter-spacing:.03em;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq-wrap{ max-width:780px }
.faq{
  border-bottom:1px solid var(--line);
}
.faq:first-of-type{ border-top:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:21px 4px;
  font-weight:600; font-size:1.06rem;
  transition:color .15s ease;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--accent-dark) }
.faq .cross{
  width:15px; height:15px; flex:none; position:relative;
  transition:transform .25s ease;
}
.faq .cross::before,.faq .cross::after{
  content:""; position:absolute; background:var(--accent);
}
.faq .cross::before{ left:0; right:0; top:7px; height:1.5px }
.faq .cross::after{ top:0; bottom:0; left:7px; width:1.5px }
.faq[open] .cross{ transform:rotate(45deg) }
.faq .answer{ padding:0 36px 24px 4px; color:var(--steel); font-size:.98rem; max-width:64ch }
.faq .answer strong{ color:var(--ink) }
@media (prefers-reduced-motion: reduce){ .faq .cross{ transition:none } }

/* ============================================================
   DOWNLOAD / CTA
   ============================================================ */

.cta{ position:relative; border-top:1px solid var(--line) }
.cta .reg.bl{ bottom:22px; left:22px }
.cta .reg.br{ bottom:22px; right:22px }
.cta__inner{ text-align:center; max-width:780px; margin-inline:auto }
.cta .eyebrow{ justify-content:center }
.cta h2{
  font-size:clamp(2.3rem, 5.4vw, 3.9rem); margin-top:20px;
}
.cta h2 .accent{ color:var(--accent) }
.cta p{ color:var(--steel); margin-top:18px; font-size:1.1rem }

.stores{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px }
.store{
  display:flex; align-items:center; gap:13px;
  background:var(--ink); color:#fff; text-decoration:none;
  border-radius:var(--radius); padding:13px 24px 13px 19px;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.store:hover{ background:#000; transform:translateY(-2px); box-shadow:var(--shadow-lift) }
.store svg{ width:26px; height:26px; flex:none }
.store .txt{ text-align:left; line-height:1.15 }
.store .txt i{ display:block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.14em; opacity:.7; text-transform:uppercase }
.store .txt b{ font-size:17px; font-weight:600; letter-spacing:.01em }

.cta__specs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 30px; margin-top:34px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--steel);
}
.cta__specs span{ display:flex; align-items:center; gap:9px }
.cta__specs i{ width:6px; height:6px; background:var(--accent); transform:rotate(45deg); flex:none }

/* ============================================================
   FOOTER — Schriftfeld (DIN-Plankopf)
   ============================================================ */

footer{ border-top:1px solid var(--ink); background:var(--card) }

.tblock{
  display:grid;
  grid-template-columns:2.2fr 1fr 1fr 1fr;
  border-left:1px solid var(--ink);
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.tblock > div{
  padding:13px 18px 14px;
  border-right:1px solid var(--ink);
}
.tblock > div:last-child{ border-right:0 }
.tblock dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:3px;
}
.tblock dd{ font-size:14px; font-weight:600; letter-spacing:.01em }
@media (max-width:760px){
  .tblock{ grid-template-columns:1fr 1fr }
  .tblock > div:nth-child(2){ border-right:0 }
  .tblock > div:nth-child(1),.tblock > div:nth-child(2){ border-bottom:1px solid var(--ink) }
}

.foot__main{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding:54px 0 46px;
}
@media (max-width:880px){ .foot__main{ grid-template-columns:1fr 1fr; gap:38px 24px } }
@media (max-width:540px){ .foot__main{ grid-template-columns:1fr } }

.foot__brand p{ color:var(--steel); font-size:.95rem; margin-top:14px; max-width:34ch }
.foot__col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); font-weight:500; margin-bottom:16px;
}
.foot__col ul{ display:flex; flex-direction:column; gap:10px }
.foot__col a{ text-decoration:none; font-size:.95rem; color:var(--ink) }
.foot__col a:hover{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }

.foot__legal{
  border-top:1px solid var(--line);
  padding:20px 0 26px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--steel); letter-spacing:.04em;
}
.foot__legal .heart{ color:var(--accent) }