/* Logo-Aufsteller. Farben und Stufen aus dem Designsystem der Easy-3DPrint-Seite
   (Webseite Relaunch/site/assets/css/site.css), dazu die Bausteine aus dem
   Generatoren-Handoff vom 05.10.2026. Keine fremden Schriften, keine fremden Hosts. */

: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-1:0 1px 2px rgba(22,22,21,.05);
  --sh-2:0 12px 32px -16px rgba(22,22,21,.18);
  --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.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.6;color:var(--charcoal);
  background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3{color:var(--ink);font-weight:720;line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--blue-dk);text-underline-offset:.18em}
a:hover{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:3px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.unsichtbar{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:50}
.skip:focus{left:12px;top:12px}
[hidden]{display:none !important}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;
  padding:0 18px;border-radius:var(--r-sm);border:1px solid transparent;font:inherit;font-size:15px;
  font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn--primaer{background:var(--blue);color:#fff}
.btn--primaer:hover{background:var(--blue-dk);color:#fff}
.btn--primaer:disabled{opacity:.45;cursor:not-allowed}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--klein{min-height:36px;padding:0 14px;font-size:14px}
.btn--breit{width:100%;min-height:48px;font-size:16px}
.textknopf{background:none;border:0;padding:10px 0;min-height:44px;font:inherit;font-size:14px;color:var(--blue-dk);
  cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.textknopf:hover{color:var(--blue)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ---------- Kopfzeile ---------- */
.kopfzeile{border-bottom:1px solid var(--line);background:#fff}
.kopfzeile__in{display:flex;align-items:center;gap:16px;min-height:68px}
.kopfzeile__logo img{height:30px;width:auto}
.kopfzeile__trenn{width:1px;height:24px;background:var(--line)}
.kopfzeile__titel{font-weight:650;color:var(--ink);font-size:15px}
.kopfzeile__kontakt{margin-left:auto}
@media (max-width:560px){.kopfzeile__trenn,.kopfzeile__titel{display:none}}

/* ---------- Dunkler Kopf ---------- */
.held{background:var(--charcoal);color:#E5E3DD}
.held__in{padding-block:clamp(40px,7vw,88px)}
.kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#E5E3DD;margin:0 0 18px;
  display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:24px;height:2px;background:#7FC4EC}
.held h1{color:#fff;font-size:var(--step-4);max-width:18ch;line-height:1.06}
.held__lede{max-width:56ch;font-size:var(--step-1);line-height:1.5;color:#E5E3DD;margin-bottom:24px}
.held__punkte{list-style:none;margin:0 0 28px;padding:16px 0 0;border-top:1px solid var(--line-dk);display:flex;flex-wrap:wrap;gap:8px 28px;color:#fff;font-size:15px}
.held__punkte li{display:flex;align-items:center;gap:8px}
.held__punkte svg{width:16px;height:16px;fill:none;stroke:#7FC4EC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.held__preis{display:inline-flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}
.held__preis-zahl{color:#fff;font-weight:700;font-size:var(--step-1);font-variant-numeric:tabular-nums}
.held__preis-text{font-size:14px;color:#CFCDC6}

/* ---------- Werkzeug ---------- */
.werkzeug{padding-block:clamp(40px,6vw,72px)}
.zustand{display:none}
.werkzeug[data-zustand="leer"] [data-fuer="leer"],
.werkzeug[data-zustand="laeuft"] [data-fuer="laeuft"],
.werkzeug[data-zustand="fertig"] [data-fuer="fertig"],
.werkzeug[data-zustand="fehler"] [data-fuer="fehler"],
.werkzeug[data-zustand="bestellen"] [data-fuer="bestellen"],
.werkzeug[data-zustand="danke"] [data-fuer="danke"]{display:block;animation:auf .25s ease-out}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.raster{display:grid;gap:clamp(24px,4vw,40px);align-items:start}
.raster--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.raster--ergebnis{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.raster--bestellen{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
@media (max-width:900px){.raster--ergebnis,.raster--bestellen{grid-template-columns:1fr}}

/* Ablage */
.ablage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;
  min-height:340px;padding:32px;border:1.5px dashed var(--line);border-radius:var(--r-lg);background:#fff;cursor:pointer;
  transition:border-color .15s,background .15s}
.ablage:hover,.ablage.ist-drueber{border-color:var(--blue);background:var(--blue-tint)}
.ablage:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.ablage__symbol{width:34px;height:34px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ablage__satz{font-size:var(--step-1);color:var(--ink);line-height:1.4;max-width:34ch;text-wrap:balance}
.ablage__formate{font-size:14px;color:var(--mute)}
.ablage__nur-logo{font-size:14px;color:var(--graphite);max-width:40ch;line-height:1.45;padding:10px 14px;border-radius:var(--r-sm);background:var(--sand)}
@media (max-width:600px){.ablage{min-height:240px}}

.beispiel{margin:0}
.beispiel__label{font-size:14px;font-weight:600;color:var(--graphite);margin-bottom:10px}
.beispiel__bild{background:var(--sand);border-radius:var(--r-lg);padding:clamp(16px,3vw,32px);display:grid;place-items:center;min-height:260px}
.beispiel__unter{font-size:14px;color:var(--mute);margin-top:10px}

/* Warten */
.warten{display:flex;gap:24px;align-items:center;max-width:760px;padding:clamp(24px,4vw,48px);border:1px solid var(--line);border-radius:var(--r-lg)}
.warten__kreis{width:44px;height:44px;flex:none;border-radius:50%;border:3px solid var(--line);border-top-color:var(--blue);animation:dreh 0.9s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.warten__datei{font-size:14px;color:var(--graphite);margin-bottom:4px}
.warten__titel{font-size:var(--step-2);margin-bottom:6px}
.warten__text{color:var(--graphite);margin:0}

/* Buehne */
.buehne{position:relative;height:480px;overflow:hidden;background:var(--sand);border-radius:var(--r);touch-action:pan-y;cursor:grab}
.buehne:active{cursor:grabbing}
.buehne canvas{position:absolute;inset:0;width:100%;height:100%}
.buehne__hinweis,.buehne__mass{position:absolute;bottom:14px;font-size:13px;color:var(--graphite);pointer-events:none}
.buehne__hinweis{left:16px}
.buehne__mass{right:16px;font-variant-numeric:tabular-nums}
.buehne__laden{position:absolute;inset:0;display:grid;place-items:center;color:var(--graphite);font-size:14px;background:var(--sand)}
@media (max-width:720px){.buehne{height:340px}}
.unter-buehne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:6px}
.unter-buehne__datei{font-size:14px;color:var(--mute)}

/* Produktspalte */
.produkt{display:flex;flex-direction:column;gap:20px}
.produkt__kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-dk);margin:0 0 -14px}
.produkt__titel{font-size:var(--step-2);margin:0;outline:none}
.produkt__daten{font-size:15px;color:var(--graphite);margin:-10px 0 0;font-variant-numeric:tabular-nums}
.pruefzeile{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--sand);font-size:14px;color:var(--ink)}
.pruefzeile b{color:var(--blue);font-weight:700}
.pruefzeile.ist-pruefen{background:var(--blue-tint)}
.pruefzeile.ist-pruefen b{color:var(--blue-dk)}
.pruefzeile ul{margin:6px 0 0;padding-left:18px;color:var(--charcoal)}
.block{border-top:1px solid var(--line);padding-top:18px}
.block__titel{font-size:14px;font-weight:600;color:var(--graphite);margin:0 0 10px;display:block}
.farbliste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.farbliste li{display:flex;align-items:center;gap:10px;font-size:15px}
.farbliste .tupfer{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}
.farbliste .pfeil{color:var(--mute);font-size:13px}
.farbliste .klein{margin-left:auto;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}

.seg{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.seg button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:0;border-radius:4px;background:none;
  font:inherit;font-size:15px;font-weight:600;color:var(--graphite);cursor:pointer}
.seg button[aria-checked="true"]{background:var(--ink);color:#fff}
.seg button:disabled{opacity:.5;cursor:wait}
.seg .tupfer{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}

.preisblock{display:grid;gap:14px}
.menge{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menge .block__titel{margin:0}
.menge__wahl{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm)}
.menge__knopf{width:44px;height:44px;border:0;background:none;font-size:20px;color:var(--ink);cursor:pointer}
.menge__knopf:disabled{color:var(--line);cursor:not-allowed}
.menge__wert{width:64px;height:44px;border:0;border-inline:1px solid var(--line);text-align:center;font:inherit;font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;-moz-appearance:textfield;appearance:textfield}
.menge__wert::-webkit-inner-spin-button,.menge__wert::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.staffel{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.staffel button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:14px;color:var(--graphite);cursor:pointer}
.staffel button:hover{border-color:var(--ink)}
.staffel button b{font-size:14px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.staffel button[aria-current="true"]{border-color:var(--blue);background:var(--blue-tint);color:var(--ink)}
.ablauf{border:1px solid var(--line);border-radius:var(--r);background:var(--sand);padding:14px 16px;margin:4px 0 14px}
.ablauf__titel{margin:0 0 8px;font-weight:650;color:var(--ink);font-size:15px}
.ablauf__liste{margin:0;padding-left:1.3em;display:grid;gap:6px;font-size:14px;color:var(--charcoal)}
.ablauf__liste b{color:var(--ink)}
.block__hinweis{font-size:13px;color:var(--mute);margin:10px 0 0}
.summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.summe__netto{font-size:var(--step-3);font-weight:750;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.summe__klein{font-size:14px;color:var(--graphite);font-variant-numeric:tabular-nums}
.preisblock__hinweis{font-size:14px;color:var(--graphite);margin:0}
.anfrageblock p{font-size:15px}

/* Hinweisflaeche Fehler */
.hinweisflaeche{max-width:760px;padding:clamp(24px,4vw,40px);background:var(--sand);border-radius:var(--r-lg)}
.hinweisflaeche__titel{font-size:var(--step-2);outline:none}

/* Formular */
.formular h2{font-size:var(--step-3);outline:none}
.formular__lede{color:var(--graphite);max-width:56ch}
fieldset{border:0;margin:0 0 22px;padding:0}
legend{font-size:14px;font-weight:650;color:var(--ink);margin-bottom:10px;padding:0}
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px 18px}
.feld{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--graphite)}
.feld--breit{grid-column:1/-1}
.feld input,.feld textarea{font:inherit;font-size:16px;color:var(--ink);padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;box-shadow:var(--sh-1);width:100%}
.feld textarea{resize:vertical;min-height:84px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.feld.ist-falsch input,.feld.ist-falsch textarea{border-color:var(--blue-dk);background:var(--blue-tint)}
.feld__hinweis{font-size:13px;color:var(--mute);margin:-4px 0 0}
.haken{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:10px 0;cursor:pointer}
.haken input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--blue);flex:none}
.haken.ist-falsch span{color:var(--blue-dk);font-weight:600}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__fehler{padding:12px 14px;border-radius:var(--r-sm);background:var(--blue-tint);color:var(--blue-dk);font-weight:600;font-size:15px}
.zusammenfassung{position:sticky;top:24px;background:var(--sand);border-radius:var(--r-lg);padding:20px}
.zusammenfassung img{border-radius:var(--r);background:#fff;margin-bottom:16px;width:100%}
.zusammenfassung__titel{font-weight:700;color:var(--ink);font-size:var(--step-1);margin-bottom:10px}
.zusammenfassung__liste{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 14px;font-size:15px}
.zusammenfassung__liste dt{color:var(--graphite)}
.zusammenfassung__liste dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.zusammenfassung__liste .gesamt{font-weight:750;font-size:17px}
.zusammenfassung__klein{font-size:13px;color:var(--mute);margin:0}
@media (max-width:900px){.zusammenfassung{position:static;order:-1}}

/* Danke */
.danke{max-width:640px;margin-inline:auto;text-align:center;padding-block:24px}
.danke__haken{width:56px;height:56px;margin:0 auto 18px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.danke h2{font-size:var(--step-3);outline:none}
.danke p{color:var(--graphite)}
.danke__nummer{font-variant-numeric:tabular-nums}

/* Ehrlich dazugesagt */
.ehrlich{padding-bottom:clamp(48px,8vw,96px)}
.ehrlich .wrap>h2{font-size:var(--step-3);margin-bottom:28px}
.ehrlich__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px 40px;
  background:var(--sand);border-radius:var(--r-lg);padding:clamp(28px,5vw,56px)}
.ehrlich h3{font-size:16px;font-weight:650;letter-spacing:-.005em;margin-bottom:8px}
.ehrlich p{font-size:15px;color:var(--charcoal)}

/* Fuss */
.fuss{border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.fuss__in{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:24px}
.fuss a{color:var(--graphite)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .warten__kreis{border-top-color:var(--blue)}
}

/* Bestellbedingungen */
.bedingungen{margin:6px 0 4px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;background:#fff}
.bedingungen summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:600;color:var(--ink)}
.bedingungen ul{margin:0 0 14px;padding-left:18px;font-size:14px;color:var(--charcoal);display:grid;gap:4px}
