/* Easy 3DPrint - Webseite Relaunch
   Designsystem. Markenfarben aus dem Logo gezogen: Anthrazit #373736, Blau #0075BE. */

:root{
  --ink:#161615;
  --charcoal:#373736;
  --graphite:#5A5A57;
  --mute:#7C7C77;
  --blue:#0075BE;
  --blue-dk:#005B94;
  --blue-tint:#EAF4FB;
  --paper:#FFFFFF;
  --sand:#F7F6F3;
  --line:#E5E3DD;
  --line-dk:#2E2E2D;

  --wrap:1220px;
  --gut:clamp(20px,5vw,48px);

  --r-sm:6px; --r:12px; --r-lg:20px;

  --sh-sm:0 1px 2px rgba(22,22,21,.06), 0 2px 8px rgba(22,22,21,.05);
  --sh:0 4px 16px rgba(22,22,21,.07), 0 16px 48px rgba(22,22,21,.07);

  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.075rem);
  --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem);
  --step-2:clamp(1.4rem,1.25rem + .7vw,1.85rem);
  --step-3:clamp(1.75rem,1.45rem + 1.4vw,2.6rem);
  --step-4:clamp(2.15rem,1.6rem + 2.6vw,3.7rem);
  --step-5:clamp(2.6rem,1.7rem + 4.2vw,5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}

body{
  margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.62;
  color:var(--charcoal);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue-dk);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--blue)}

h1,h2,h3,h4{color:var(--ink);font-weight:760;line-height:1.08;letter-spacing:-.022em;margin:0 0 .6em;
  text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1);letter-spacing:-.012em;line-height:1.28}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:660;color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:70ch}
.section{padding-block:clamp(56px,9vw,120px)}
.section--sand{background:var(--sand)}
.section--tight{padding-block:clamp(40px,6vw,72px)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- Eyebrow / Kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:var(--step--1);font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-dk);margin:0 0 1.1em;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--blue);flex:none}
.section--dark .kicker{color:#7FC4EC}
.section--dark .kicker::before{background:#7FC4EC}

.lede{font-size:var(--step-1);line-height:1.55;color:var(--graphite)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:inherit;font-weight:650;font-size:var(--step-0);letter-spacing:-.005em;
  padding:.86em 1.5em;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .16s,color .16s,border-color .16s,transform .16s;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn--lg{padding:1.02em 1.8em;font-size:var(--step-1)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.arrowlink{
  display:inline-flex;align-items:center;gap:.5em;font-weight:650;text-decoration:none;
  color:var(--blue-dk);
}
.arrowlink span{border-bottom:1.5px solid currentColor;padding-bottom:1px}
.arrowlink svg{transition:transform .18s}
.arrowlink:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:24px;min-height:74px}
.hdr__logo{flex:none;display:block}
.hdr__logo img{height:34px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a:not(.btn){
  display:block;padding:.5em .8em;border-radius:var(--r-sm);
  color:var(--charcoal);text-decoration:none;font-weight:600;font-size:.97rem;
}
.nav a:not(.btn):hover{background:var(--sand);color:var(--ink)}
.nav a:not(.btn)[aria-current="page"]{color:var(--blue-dk);background:var(--blue-tint)}
.hdr .btn{flex:none;margin-left:10px}
.navtoggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.55em .8em;font:inherit;font-weight:650;cursor:pointer;color:var(--ink)}

@media (max-width:900px){
  .navtoggle{display:block}
  .nav{
    margin-left:0;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:12px var(--gut) 20px;box-shadow:var(--sh-sm);
  }
  .nav[hidden]{display:none}
  .nav a:not(.btn){padding:.75em .6em;font-size:1.05rem}
  .hdr .btn{margin:10px 0 0}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 6%, rgba(0,117,190,.34), transparent 58%);
}
.hero__in{position:relative;z-index:2;display:grid;gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:center;
  padding-block:clamp(52px,8vw,104px)}
.hero h1{color:#fff;max-width:16ch}
.hero h1 em{font-style:normal;color:#69BEEC}
.hero__sub{font-size:var(--step-1);line-height:1.55;color:#CFCFCA;max-width:46ch;margin-bottom:1.7em}
.hero .btn-row{margin-bottom:2.4em}
.hero__figure{position:relative;margin-bottom:24px}
.hero__figure img{border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(0,0,0,.42)}
.hero__tag{
  position:absolute;right:-16px;bottom:-20px;background:var(--paper);color:var(--ink);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);max-width:15rem;
}
.hero__tag b{display:block;font-size:.95rem}
.hero__tag span{font-size:var(--step--1);color:var(--graphite);line-height:1.45;display:block;margin-top:2px}

.trustrow{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-size:var(--step--1);color:#B9B9B4;font-weight:560}
.trustrow li{list-style:none;display:flex;align-items:center;gap:.5em}
.trustrow{margin:0;padding:0}
.trustrow svg{flex:none;color:#69BEEC}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__tag{left:auto;right:10px;bottom:-14px;max-width:min(88%,15rem)}
}

/* ---------- Faktenblock (GEO: zitierbar) ---------- */
.facts{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  padding:clamp(24px,3.4vw,42px);box-shadow:var(--sh-sm)}
.facts__grid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  border-top:1px solid var(--line);margin-top:26px}
.facts__grid div{padding:20px 22px 20px 0;border-bottom:1px solid var(--line)}
.facts__grid dt{font-size:var(--step--1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);margin-bottom:.4em}
.facts__grid dd{margin:0;font-weight:620;color:var(--ink);font-size:1.05rem;line-height:1.4}
.facts__grid dd small{display:block;font-weight:500;color:var(--graphite);font-size:var(--step--1);margin-top:.3em;line-height:1.45}

/* ---------- Karten-Grid ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,30px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.grid--2up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid--2up{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:.35em}
.card h3,.card h4{margin-bottom:.45em}
.card p{color:var(--graphite);font-size:.985rem}
.card__num{font-size:var(--step--1);font-weight:750;letter-spacing:.1em;color:var(--blue);margin-bottom:1em}
.card--flat{border:0;background:transparent;padding:0}

.ico{width:42px;height:42px;border-radius:9px;background:var(--blue-tint);color:var(--blue-dk);
  display:grid;place-items:center;margin-bottom:16px;flex:none}
.ico svg{width:22px;height:22px}

/* ---------- Projekte ---------- */
.proj{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .2s,transform .2s}
.proj:hover{box-shadow:var(--sh);transform:translateY(-3px)}
.proj__media{position:relative;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.proj__media img{width:100%;height:100%;object-fit:cover}
.proj__body{padding:22px clamp(20px,2vw,26px) clamp(22px,2.2vw,28px);display:flex;flex-direction:column;gap:.5em;flex:1}
.proj__body h3{font-size:var(--step-1);margin-bottom:.2em}
.proj__body p{color:var(--graphite);font-size:.975rem;margin:0}
.proj__take{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:.94rem;color:var(--ink);font-weight:600}

.badge{
  display:inline-flex;align-items:center;gap:.45em;align-self:flex-start;
  font-size:.76rem;font-weight:730;letter-spacing:.08em;text-transform:uppercase;
  padding:.42em .72em;border-radius:100px;
}
.badge--real{background:#E7F5EC;color:#1C6B3C}
.badge--concept{background:var(--sand);color:var(--graphite);border:1px solid var(--line)}
.badge--onMedia{position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:var(--sh-sm)}

/* Split-Feature */
.split{display:grid;gap:clamp(28px,4.5vw,64px);grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));align-items:center}
.split--rev>*:first-child{order:2}
.split img{border-radius:var(--r-lg)}
@media (max-width:760px){.split--rev>*:first-child{order:0}}

.checks{list-style:none;margin:1.4em 0 0;padding:0;display:grid;gap:.75em}
.checks li{display:flex;gap:.7em;align-items:flex-start;font-weight:560}
.checks svg{flex:none;margin-top:.32em;color:var(--blue)}
.checks li>span{display:block}
.checks li>span strong{display:block;margin-bottom:.15em}
.section--dark .checks svg{color:#69BEEC}

/* ---------- Dunkle Sektion ---------- */
.section--dark{background:var(--ink);color:#D7D7D2}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark .lede{color:#B9B9B4}
.section--dark .card{background:#232322;border-color:var(--line-dk)}
.section--dark .card p{color:#B9B9B4}
.section--dark .ico{background:rgba(105,190,236,.14);color:#7FC4EC}

/* ---------- Zahlenband ---------- */
.stats{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.stats div{border-left:2px solid var(--blue);padding-left:20px}
.stats b{display:block;font-size:var(--step-3);font-weight:770;color:var(--ink);letter-spacing:-.03em;line-height:1.05}
.stats span{font-size:.96rem;color:var(--graphite);display:block;margin-top:.35em}
.section--dark .stats b{color:#fff}
.section--dark .stats span{color:#B9B9B4}

/* ---------- Ablauf ---------- */
.steps{counter-reset:s;display:grid;gap:0}
.steps li{list-style:none;counter-increment:s;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,34px);
  padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-size:var(--step-2);font-weight:770;color:var(--blue);letter-spacing:-.02em;line-height:1;
  min-width:2.4ch
}
.steps h3{font-size:var(--step-1);margin-bottom:.3em}
.steps p{color:var(--graphite);margin:0}
.steps .when{display:inline-block;margin-top:.7em;font-size:var(--step--1);font-weight:680;
  letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}

/* ---------- Testimonials ---------- */
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:1.2em}
.quote blockquote{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink)}
.quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto}
.quote img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.quote b{display:block;font-size:.98rem;color:var(--ink)}
.quote small{color:var(--mute);font-size:var(--step--1)}

/* ---------- Newsletter (stillgelegt, 27.08.2026) ----------
   Der Abschnitt ist auf Louis' Entscheidung von der Startseite genommen, weil
   ohne angebundenes Mailwerkzeug kein Double-Opt-in moeglich war. Die Regeln
   bleiben stehen, damit der Block ohne Neubau zurueckkommen kann. Statt des
   Newsletters gibt es jetzt einen freiwilligen Haken im Anfrageformular. */
.nl{background:var(--ink);color:#D7D7D2;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.nl__copy{padding:clamp(28px,3.6vw,52px)}
.nl__copy h2{color:#fff;font-size:var(--step-3)}
.nl__form{padding:clamp(28px,3.6vw,52px);background:#232322;display:flex;flex-direction:column;justify-content:center;gap:14px}

/* ---------- Formulare ---------- */
/* align-content:start ist wichtig: In einer .field-row werden benachbarte
   Felder auf gleiche Hoehe gezogen. Ohne diese Zeile verteilt das innere
   Raster die zusaetzliche Hoehe auf seine Zeilen, und das Eingabefeld ohne
   Hinweistext wird sichtbar hoeher als seine Nachbarn. */
.field{display:grid;gap:.45em;margin-bottom:18px;align-content:start}
.field label{font-weight:640;font-size:.95rem;color:var(--ink)}
.field .hint{font-size:var(--step--1);color:var(--mute)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.72em .85em;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-tint)}
.field textarea{min-height:130px;resize:vertical}
.field--req label::after{content:" *";color:var(--blue)}
.field-row{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.check{display:flex;gap:.7em;align-items:flex-start;font-size:.95rem;margin-bottom:18px}
.check input{width:auto;margin-top:.28em;flex:none;accent-color:var(--blue)}
.nl__form .field label{color:#fff}
.nl__form .field input{background:#161615;border-color:#3C3C3A;color:#fff}
.nl__form .check{color:#B9B9B4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,44px);box-shadow:var(--sh-sm)}
.formnote{font-size:var(--step--1);color:var(--mute);margin-top:1.2em}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:clamp(18px,2vw,24px) 44px clamp(18px,2vw,24px) 0;
  position:relative;font-weight:660;font-size:var(--step-1);color:var(--ink);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .answer{padding:0 clamp(0px,4vw,56px) clamp(20px,2.4vw,28px) 0;color:var(--graphite);max-width:78ch}
.faq .answer p:first-child{margin-top:0}

/* ---------- Auszeichnung ---------- */
.award{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;background:var(--paper)}
.award__seal{width:56px;height:56px;border-radius:50%;background:var(--blue-tint);color:var(--blue-dk);
  display:grid;place-items:center;flex:none;font-weight:780;font-size:.8rem;letter-spacing:.04em}
.award b{color:var(--ink)}
.award p{margin:.2em 0 0;font-size:.96rem;color:var(--graphite)}

/* ---------- CTA-Band ---------- */
.ctaband{background:var(--blue);color:#fff;border-radius:var(--r-lg);
  padding:clamp(30px,4vw,58px);display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:center}
.ctaband h2{color:#fff;font-size:var(--step-3);margin-bottom:.4em}
.ctaband p{color:rgba(255,255,255,.9);margin:0}
.ctaband .btn--primary{background:#fff;color:var(--blue-dk);border-color:#fff}
.ctaband .btn--primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.ctaband .btn--onDark:hover{background:rgba(255,255,255,.16)}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:#9C9C97;padding-block:clamp(44px,6vw,76px) 28px;font-size:.95rem}
.ftr__grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(140px,1fr))}
.ftr h2{color:#fff;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1.1em;font-weight:730;line-height:1.3}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.62em}
.ftr a{color:#C6C6C1;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__logo{display:inline-block;background:#fff;border-radius:8px;padding:12px 16px;margin-bottom:20px}
.ftr__logo img{height:30px;width:auto;display:block}
.ftr__claim{max-width:34ch;color:#9C9C97}
.ftr__legal{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line-dk);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;font-size:.88rem}
.ftr__legal p{margin:0}
.ftr__legal nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1.1em}
.center{text-align:center}
.center .kicker{justify-content:center}
.sechead{margin-bottom:clamp(34px,4.5vw,58px)}
.sechead--split{display:grid;gap:clamp(18px,3vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:end}
.sechead h2{margin-bottom:0}
.sechead .lede{margin-top:1em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kontrast auf dunklem Grund ---------- */
.section--dark a:not(.btn):not(.arrowlink),
.nl__copy a:not(.btn),
.nl__form a:not(.btn),
.ctaband a:not(.btn){color:#8ECCF0}
.section--dark a:not(.btn):not(.arrowlink):hover,
.nl__copy a:not(.btn):hover,
.nl__form a:not(.btn):hover{color:#fff}
.section--dark .arrowlink{color:#8ECCF0}
.section--dark .arrowlink:hover{color:#fff}
.section--dark .faq{border-color:var(--line-dk)}
.section--dark .faq details{border-color:var(--line-dk)}
.section--dark .faq summary{color:#fff}
.section--dark .faq summary::after{border-color:#7FC4EC}
.section--dark .faq .answer{color:#B9B9B4}
.section--dark .quote{background:#232322;border-color:var(--line-dk)}
.section--dark .quote blockquote{color:#E4E4DF}
.section--dark .quote small{color:#8E8E8A}
.section--dark .award{background:#232322;border-color:var(--line-dk)}
.section--dark .award b{color:#fff}
.section--dark .award p{color:#B9B9B4}
.section--dark .award__seal{background:rgba(105,190,236,.14);color:#7FC4EC}
.section--dark .steps li,.section--dark .steps li:last-child{border-color:var(--line-dk)}
.section--dark .steps p{color:#B9B9B4}
.section--dark .steps .when{color:#8E8E8A}
.section--dark .facts{background:#232322;border-color:var(--line-dk)}
.section--dark strong,.nl__copy strong,.ctaband strong{color:#fff}
.section--dark .checks li{color:#C8C8C3}
.section--dark .card .badge{background:#2E2E2D;border-color:#3C3C3A;color:#B9B9B4}

/* ---------- Monogramm, wenn kein Portraet vorliegt ---------- */
.quote .mono{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--blue-tint);color:var(--blue-dk);font-weight:740;font-size:.95rem;letter-spacing:.02em;
}
.section--dark .quote .mono{background:rgba(105,190,236,.16);color:#7FC4EC}

/* ---------- Vergleichstabelle ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--paper)}
.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{
  background:var(--sand);color:var(--ink);font-weight:700;font-size:.9rem;line-height:1.3;
  border-bottom:2px solid var(--line);position:sticky;top:0;z-index:1;
}
.cmp thead th small{display:block;font-weight:500;color:var(--mute);font-size:.8rem;margin-top:.2em}
.cmp thead th:nth-child(2){background:var(--blue-tint);color:var(--blue-dk)}
.cmp thead th:nth-child(2) small{color:var(--blue-dk);opacity:.8}
.cmp tbody th{font-weight:640;color:var(--ink);width:22%}
.cmp td{color:var(--graphite)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp td::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:.6em;vertical-align:.08em;background:var(--line)}
.cmp td.yes::before{background:#2E9E5B}
.cmp td.mid::before{background:#D9A020}
.cmp td.no::before{background:#C6503C}
.cmp tbody td:nth-child(2){background:rgba(0,117,190,.04)}

/* ---------- Umbruch-Feinschliff ----------
   .nb haelt kurze Wortgruppen zusammen, die sonst ungluecklich brechen
   (etwa "1 bis 3 Wochen" oder "QR- und NFC-Chips"). */
.nb{white-space:nowrap}
.lede,.stats span,.facts__grid dd,.facts__grid dd small,.proj__take,.card p,.steps p{text-wrap:pretty}
.stats span,.facts__grid dd{text-wrap:balance}
.kicker{text-wrap:balance}


/* =========================================================================
   Animationen aus dem Design-Entwurf (01 Inbox / Downloads, 27.08.2026)
   Scroll-getrieben ueber animation-timeline. Wo der Browser das nicht kennt
   (aktuell Firefox), laeuft die Animation einmal in 1ms durch und bleibt im
   Endzustand stehen. Inhalte sind damit immer sichtbar, nur ohne Effekt.
   ========================================================================= */

}
@keyframes hdrBar{from{min-height:78px}to{min-height:60px}}
@keyframes hdrLogo{from{height:33px}to{height:27px}}
@keyframes hdrBg{from{background:rgba(255,255,255,.88);box-shadow:0 0 0 rgba(22,22,21,0)}to{background:rgba(255,255,255,.82);box-shadow:0 1px 22px rgba(22,22,21,.09)}}
@keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{transform:translateY(106%)}to{transform:none}}
@keyframes glowDrift{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}50%{transform:translate3d(-5%,4%,0) scale(1.12);opacity:1}100%{transform:translate3d(0,0,0) scale(1);opacity:.85}}
@keyframes livePulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes spoolSpin{to{transform:rotate(360deg)}}
@keyframes headSweep{0%{transform:translateX(-33px)}50%{transform:translateX(33px)}100%{transform:translateX(-33px)}}
@keyframes gantryRise{0%{transform:translateY(0);animation-timing-function:steps(10,end)}80%{transform:translateY(-40px);animation-timing-function:cubic-bezier(.5,0,.4,1)}94%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes printGrow{0%{transform:scaleY(0);animation-timing-function:steps(10,end)}26.7%{transform:scaleY(1);animation-timing-function:linear}100%{transform:scaleY(1)}}
@keyframes hopJourney{0%,26.7%{transform:translate(-212px,-24px)}30%{transform:translate(-212px,-24px);animation-timing-function:cubic-bezier(.32,0,.5,.4)}33%{transform:translate(-106px,-74px);animation-timing-function:cubic-bezier(.5,.6,.7,1)}35.8%{transform:translate(0,0)}36.8%{transform:translate(0,4px)}38%{transform:translate(0,0);animation-timing-function:cubic-bezier(.4,0,.6,1)}42%{transform:translate(0,9px)}100%{transform:translate(0,9px)}}
@keyframes objFade{0%,38%{opacity:1}42%{opacity:0}99.4%{opacity:0}99.5%,100%{opacity:1}}
@keyframes boxFade{0%,24%{opacity:0}26.5%{opacity:1}95%{opacity:1}96%{opacity:0}100%{opacity:0}}
@keyframes flapL{0%,37.5%{transform:rotate(-116deg)}43.5%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes flapR{0%,37.5%{transform:rotate(116deg)}43.5%{transform:rotate(0)}100%{transform:rotate(0)}}
@keyframes carrierExit{0%,44.5%{transform:translateX(0);animation-timing-function:cubic-bezier(.5,0,.55,1)}71%{transform:translateX(370px)}100%{transform:translateX(370px)}}

/* --- Sticky Header wird beim Scrollen kompakter --- */
@supports (animation-timeline: scroll(root)) {
  .hdr{animation:hdrBg 1ms linear both;animation-timeline:scroll(root);animation-range:22px 130px}
  .hdr__in{animation:hdrBar 1ms linear both;animation-timeline:scroll(root);animation-range:22px 130px}
  .hdr__logo img{animation:hdrLogo 1ms linear both;animation-timeline:scroll(root);animation-range:22px 130px}
}

/* --- Beim Hereinscrollen sanft aufsteigen --- */
@supports (animation-timeline: view()) {
  .sechead,.facts,.proj,.card,.quote,.steps li,.stats div,.tablewrap,.ctaband,.nl,.award,.split>*{
    animation:riseIn 1ms linear both;
    animation-timeline:view();
    animation-range:entry 4% cover 26%;
  }
}

/* --- Ruhige Variante: Bewegung aus, Foto statt Animation --- */
@media (prefers-reduced-motion:reduce){
  [data-motion]{display:none!important}
  [data-still]{display:block!important}
  [data-anim]{animation:none!important}
  .sechead,.facts,.proj,.card,.quote,.steps li,.stats div,.tablewrap,.ctaband,.nl,.award,.split>*{
    animation:none!important;opacity:1!important;transform:none!important
  }
}

/* ---------- 3D-Modell (WebGL) ----------
   Ersetzt die frühere CSS-3D-Konstruktion. Begründung: CSS-3D sortiert
   ganze Ebenen nach Tiefe, WebGL entscheidet pro Pixel. Nur damit sind
   die Fehlstellen beim Drehen ausgeschlossen. Renderer in site.js,
   Maße in Modell/geometrie.md. */
.modell{
  position:relative;justify-self:center;width:100%;max-width:470px;
  aspect-ratio:1/1;display:grid;place-items:center;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.modell[data-webgl]{cursor:grab}
.modell[data-zieht]{cursor:grabbing}
.modell__schatten{
  position:absolute;left:50%;bottom:14%;width:56%;height:24px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(22,22,21,.22),rgba(22,22,21,0) 76%);
  filter:blur(2px);
}
.modell__leinwand{position:relative;display:block;pointer-events:none}
.modell__standbild{position:relative;width:100%;height:auto;-webkit-user-drag:none;pointer-events:none}
/* Sobald WebGL läuft, tritt das Standbild zurück */
.modell[data-webgl] .modell__standbild{display:none}
.modell__hinweis{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5em;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:.45em .9em;box-shadow:var(--sh-sm);
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--graphite);white-space:nowrap;transition:opacity .3s;
}
.modell[data-zieht] .modell__hinweis{opacity:0}
.modell[data-kein-webgl] .modell__hinweis{display:none}
.modell:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:var(--r)}

/* ---------- Bestaetigung nach dem Absenden ----------
   Bewusst auffaellig: wer ein Formular abschickt, muss ohne Suchen sehen,
   dass es raus ist. Rolle "status", damit Screenreader es ansagen. */
.erfolg{display:flex;gap:.9em;align-items:flex-start;background:#EAF6EE;
  border:1.5px solid #A8D8BC;border-radius:var(--r-sm);padding:1em 1.15em;
  margin:0 0 2em;font-weight:560}
.erfolg svg{flex:none;margin-top:.15em;color:#1F7A4C}
.erfolg strong{display:block;margin-bottom:.15em}
.erfolg span{font-weight:400}

/* ---------- Formularfehler ----------
   Markiert genau das Feld, das nicht durchgekommen ist. Die Eingaben bleiben
   dabei stehen, deshalb reicht eine Markierung plus ein Satz darunter. */
.field--fehler input,.field--fehler select,.field--fehler textarea{
  border-color:#B4231F;background:#FDF7F6}
.field--fehler label{color:#8E1C18}
.check--fehler label{color:#8E1C18}
.check--fehler input{outline:2px solid #B4231F;outline-offset:2px}
.feldfehler{font-size:var(--step--1);color:#B4231F;font-weight:560}
.formnote--fehler{color:#B4231F;font-weight:560;margin:0 0 1.4em}