/** Shopify CDN: Minification failed

Line 12:0 Unexpected "{"
Line 12:1 Expected identifier but found "%"
Line 13:2 Unexpected "="
Line 18:16 Unexpected "{"
Line 18:18 Expected identifier but found "'vel.css'"
Line 18:60 Expected identifier but found whitespace
Line 31:1 Expected identifier but found "%"

**/
{%- comment -%}
  ===========================================================
  VELITH — Stilvorlage

  Liegt als vel.css.liquid in assets/, damit die Schriftdateien
  über asset_url eingebunden werden können. Eingebunden wird sie
  trotzdem als {{ 'vel.css' | asset_url | stylesheet_tag }}.

  Die Schriften werden SELBST GEHOSTET, nicht von Google geladen.
  Für einen deutschen Shop ist das kein Schönheitsthema: das
  Einbinden von Google Fonts direkt von Googles Servern überträgt
  die IP-Adresse der Besucher in die USA und hat in Deutschland
  bereits zu Abmahnungen geführt (LG München I, 3 O 17493/20).
  Vier woff2-Dateien, zusammen rund 88 KB.

  Dawn setzt die Wurzel auf 62,5 %, 1rem sind hier also 10px.
  Alle Klassen beginnen mit vel-, damit nichts mit dem Theme
  kollidiert.
  ===========================================================
{%- endcomment -%}

/* --- Schriften ------------------------------------------------------- */
@font-face{
  font-family:"Vel Display";
  src:url("{{ 'vel-archivo-latin-800-normal.woff2' | asset_url }}") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Vel Text";
  src:url("{{ 'vel-inter-latin-400-normal.woff2' | asset_url }}") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Vel Text";
  src:url("{{ 'vel-inter-latin-600-normal.woff2' | asset_url }}") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:"Vel Text";
  src:url("{{ 'vel-inter-latin-700-normal.woff2' | asset_url }}") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212;
}

/* ===========================================================
   1 · FARBEN UND MASSE

   Die Farben kommen aus den Logos. Die zwei Rottöne sind kein
   Zufall: #D2473C trägt cremeweiße Schrift nur mit 3,89:1 und
   fällt damit durch die Barrierefreiheitsgrenze von 4,5:1.
   Deshalb ein etwas tieferes Rot zum Füllen (4,64:1) und ein
   helleres für kleine Schrift auf dunklem Grund (5,79:1).
   Alle Paare sind nachgerechnet, nicht geschätzt.
   =========================================================== */
:root{
  --vel-ink:#111111;
  --vel-ink-2:#191918;
  --vel-ink-3:#232321;
  --vel-paper:#F2EFE9;
  --vel-muted:#9A948B;

  --vel-rot:#D2473C;        /* Markenrot, nur für Flächen ohne Schrift darauf */
  --vel-rot-tief:#C23A2F;   /* Flächen MIT Schrift darauf */
  --vel-rot-hell:#E8655A;   /* kleine Schrift auf dunklem Grund */

  --vel-gruen:#2C463A;
  --vel-gruen-text:#B9C4BC;

  --vel-linie:rgba(242,239,233,.13);
  --vel-linie-stark:rgba(242,239,233,.26);

  /* Schriftgrößen wachsen mit dem Fenster, aber gedeckelt */
  --vel-mini:clamp(1.2rem,1.16rem + 0.12vw,1.3rem);
  --vel-small:clamp(1.35rem,1.29rem + 0.2vw,1.5rem);
  --vel-body:clamp(1.6rem,1.52rem + 0.26vw,1.8rem);
  --vel-lead:clamp(1.9rem,1.62rem + 0.88vw,2.6rem);
  --vel-head:clamp(3rem,2.04rem + 3vw,5.8rem);
  --vel-display:clamp(4.4rem,1.9rem + 7.8vw,12rem);

  --vel-maxw:1320px;
  --vel-rand:clamp(2rem,4.6vw,6.4rem);
  --vel-luft:clamp(2.4rem,4vw,5.6rem);
  --vel-block:clamp(5.6rem,10vh,11.2rem);

  --vel-radius:2px;
  --vel-schnell:.18s cubic-bezier(.3,.7,.3,1);
  --vel-ruhig:.5s cubic-bezier(.2,.7,.25,1);
}

/* ===========================================================
   2 · GRUNDLAGE
   =========================================================== */
.vel{
  background:var(--vel-ink);
  color:var(--vel-paper);
  font-family:"Vel Text",Inter,-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:var(--vel-body);
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
.vel *,.vel *::before,.vel *::after{box-sizing:border-box;min-width:0}
.vel img,.vel svg{display:block;max-width:100%}
.vel img{height:auto}
.vel p,.vel figure,.vel blockquote,.vel dd{margin:0}
.vel ul,.vel ol{margin:0;padding:0;list-style:none}
.vel h1,.vel h2,.vel h3,.vel h4{margin:0;font-weight:800;letter-spacing:-.005em}
.vel a{color:inherit}
/* Nur die Schriftart erben, NICHT die Farbe: Shopifys Express-Knöpfe
   (PayPal, Apple Pay) sind auch <button> und bringen ihre eigenen
   Farben mit. Ein geerbtes Cremeweiß macht daraus weiß auf weiß. */
.vel button{font-family:inherit}

/* Deutsche Komposita sind lang. Ohne Trennung schiebt
   "Versandkostenfreigrenze" sonst das Layout auseinander. */
.vel{overflow-wrap:break-word}
/* Silbentrennung nur dort, wo die Spalte wirklich schmal ist. In
   Überschriften und Vorspann sieht ein "mor-gen" nach Panne aus. */
.vel-kachel__klein,.vel-seite__text,.vel-paket__punkt p,
.vel-faq__antwort,.vel-pd__specs dd,.vel-masse__text{
  hyphens:auto;-webkit-hyphens:auto;
}

.vel :focus-visible{
  outline:2px solid var(--vel-rot-hell);
  outline-offset:3px;
  border-radius:1px;
}

/* Nur für Vorlesesoftware */
.vel-nursr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ===========================================================
   3 · TYPOGRAFIE UND HILFSKLASSEN
   =========================================================== */
.vel-display{
  font-family:"Vel Display",Archivo,Impact,"Haettenschweiler",sans-serif;
  font-weight:800;text-transform:uppercase;
  letter-spacing:.005em;line-height:.9;
}
/* Bei line-height unter 1 ragen Umlautpunkte oben aus dem Textkasten
   heraus und landen auf der Zeile darüber. Deshalb Luft nach oben. */
.vel .vel-eyebrow + .vel-display{margin-top:2.4rem}

.vel-wrap{
  max-width:var(--vel-maxw);margin-inline:auto;
  padding-left:max(var(--vel-rand),env(safe-area-inset-left,0px));
  padding-right:max(var(--vel-rand),env(safe-area-inset-right,0px));
}

.vel-eyebrow{
  font-size:var(--vel-small);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--vel-rot-hell);line-height:1.3;
}
.vel-eyebrow--hell{color:var(--vel-paper);opacity:.68}

.vel-lede{font-size:var(--vel-lead);line-height:1.35;max-width:32ch}
.vel-muted{color:var(--vel-muted)}

/* --- Einblenden beim Scrollen ----------------------------------------
   Versteckt wird NUR, wenn die Markierung vel-js am <html> steht — die
   setzt das Schnipsel vel-start synchron, bevor gezeichnet wird. Ohne
   JavaScript greift die Regel nie und alles ist von Anfang an da. */
.vel-js .vel-auf{opacity:0;transform:translateY(1.8rem)}
.vel-js .vel-auf.vel-auf--da{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1);
}

/* ===========================================================
   4 · KNOPF
   =========================================================== */
.vel-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-weight:700;font-size:var(--vel-body);line-height:1;
  min-height:5.4rem;padding:1.5rem 3rem;
  border:0;border-radius:var(--vel-radius);
  background:var(--vel-rot-tief);color:var(--vel-paper);
  text-decoration:none;cursor:pointer;text-align:center;
  letter-spacing:.05em;text-transform:uppercase;
  transition:background var(--vel-schnell),transform var(--vel-schnell);
}
.vel-btn:hover,.vel-btn:focus-visible{background:#D4463A;transform:translateY(-2px)}
.vel-btn:active{transform:translateY(0)}
.vel-btn--geist{
  background:none;color:var(--vel-paper);
  box-shadow:inset 0 0 0 1px var(--vel-linie-stark);
}
.vel-btn--geist:hover,.vel-btn--geist:focus-visible{background:rgba(242,239,233,.07)}
.vel-btn[disabled],.vel-btn[aria-disabled="true"]{
  background:var(--vel-ink-3);color:var(--vel-muted);
  cursor:not-allowed;transform:none;
}

/* ===========================================================
   5 · STÜCKZÄHLER
   =========================================================== */
.vel-zaehler{display:flex;flex-direction:column;gap:.8rem;max-width:38rem}
.vel-zaehler__text{
  font-size:var(--vel-small);letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;
}
.vel-zaehler__text b{color:var(--vel-rot-hell);font-weight:700}
.vel-zaehler__bahn{
  height:3px;background:rgba(242,239,233,.14);
  border-radius:3px;overflow:hidden;
}
.vel-zaehler__fuell{
  height:100%;background:var(--vel-rot);border-radius:3px;
  transform-origin:left;
}

/* ===========================================================
   6 · ANKÜNDIGUNGSLEISTE
   =========================================================== */
.vel-bar{
  background:var(--vel-rot-tief);color:var(--vel-paper);
  font-size:var(--vel-mini);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding-block:1rem;
}
.vel-bar__inner{
  display:flex;flex-wrap:wrap;gap:.6rem 2.8rem;
  align-items:center;justify-content:center;text-align:center;
}
.vel-bar__punkt{display:flex;align-items:center;gap:.9rem}
.vel-bar__punkt::before{
  content:"";width:.5rem;height:.5rem;border-radius:50%;
  background:currentColor;opacity:.65;flex:none;
}
.vel-bar__punkt:first-child::before{display:none}

/* ===========================================================
   7 · KOPFZEILE
   =========================================================== */
.vel-kopf{border-bottom:1px solid var(--vel-linie)}
.vel-kopf__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;padding-block:2.2rem;
}
.vel-marke{
  font-family:"Vel Display",Archivo,sans-serif;
  text-decoration:none;font-weight:800;text-transform:uppercase;
  letter-spacing:.17em;font-size:clamp(1.8rem,1.6rem + .4vw,2.3rem);
  line-height:1;display:inline-flex;align-items:center;white-space:nowrap;
  /* Als Link eine daumengerechte Fläche, nicht nur Zeilenhöhe */
  min-height:4.4rem;
}
.vel-marke sup{
  color:var(--vel-rot-hell);font-size:.44em;letter-spacing:.03em;
  margin-left:.3em;top:0;font-weight:800;
}
.vel-kopf__claim{white-space:nowrap}

/* ===========================================================
   8 · HERO

   Zwei Spalten: links Text und Knopf, rechts der Anhänger über
   beide Zeilen. Am Handy wird daraus Überschrift, Anhänger,
   Knopf — in der Reihenfolge, in der man liest und dann greift.
   =========================================================== */
.vel-hero{padding-block:clamp(3.2rem,6vh,6.4rem) clamp(4.8rem,9vh,9.6rem);position:relative}
.vel-hero__grid{
  display:grid;align-items:center;align-content:center;
  gap:var(--vel-luft);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  /* marken MUSS hier stehen. Ein grid-area-Name, den die Vorlage nicht
     kennt, legt CSS als eigene Spur an — dann bricht die Überschrift
     buchstabenweise um. */
  grid-template-areas:"kopf plate" "cta plate" "marken marken";
}
.vel-hero__kopf{grid-area:kopf}
.vel-hero__cta{grid-area:cta;display:flex;flex-wrap:wrap;gap:1.8rem 2.4rem;align-items:center}
.vel-hero__cta .vel-zaehler{flex:1 0 100%}
.vel-hero h1{font-size:var(--vel-display);margin-block:1.8rem 2.2rem}
.vel-hero__preis{font-size:var(--vel-small);color:var(--vel-muted);line-height:1.55}
.vel-hero__preis b{color:var(--vel-paper);font-weight:600}
.vel-hero__marken{
  grid-area:marken;display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;
  padding-top:2.4rem;margin-top:.8rem;border-top:1px solid var(--vel-linie);
}
.vel-hero__marke{
  display:flex;align-items:center;gap:.9rem;
  font-size:var(--vel-small);color:var(--vel-muted);
}
.vel-hero__marke svg{width:1.6rem;height:1.6rem;flex:none;fill:none;
  stroke:var(--vel-rot-hell);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===========================================================
   9 · DER ANHÄNGER

   Es gibt noch keine Produktfotos, also wird er gebaut: ein
   gestreifter Verlauf für gebürsteten Stahl, die Schrift unten
   hell und oben dunkel abgesetzt — so liest das Auge eine
   Vertiefung statt eines Aufdrucks. Beim Tippen dreht er sich.
   Das zeigt die Mechanik, die ein Standbild nicht zeigen kann.
   =========================================================== */
.vel-plate{
  grid-area:plate;justify-self:center;width:min(82vw,430px);
  display:flex;flex-direction:column;align-items:center;
}
.vel-plate__kette{width:100%;height:auto}
.vel-plate__kette path{
  fill:none;stroke:#BCB7AF;stroke-width:3.2;
  stroke-linecap:round;stroke-dasharray:5.5 3.2;
}

.vel-plate__buehne{perspective:1600px;width:100%;margin-top:-.6rem}
.vel-plate__box{
  position:relative;width:100%;aspect-ratio:32/22;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.2,.78,.22,1);
  cursor:pointer;border-radius:1.5rem;
}
.vel-plate--um .vel-plate__box{transform:rotateY(180deg)}
.vel-plate__box:focus-visible{outline-offset:8px}

.vel-plate__seite{
  position:absolute;inset:0;backface-visibility:hidden;
  display:grid;place-items:center;border-radius:1.5rem;overflow:hidden;
  background:linear-gradient(104deg,
    #6B675F 0%, #A7A299 13%, #7E7971 26%, #D2CDC4 40%,
    #888379 54%, #B3AEA5 69%, #67635C 84%, #8F8A82 100%);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.52),
    inset 0 -3px 5px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(0,0,0,.38),
    0 32px 70px rgba(0,0,0,.72);
}
/* Die feinen Schleifspuren des gebürsteten Stahls */
.vel-plate__seite::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(104deg,
    rgba(255,255,255,.09) 0 1px,rgba(0,0,0,.08) 1px 2.5px);
  mix-blend-mode:overlay;
}
/* Ein weicher Lichtstreifen, der beim Überfahren wandert */
.vel-plate__seite::after{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);
  transform:translateX(-62%);transition:transform 1.1s ease;
}
.vel-plate__box:hover .vel-plate__seite::after{transform:translateX(62%)}
.vel-plate__seite--hinten{transform:rotateY(180deg)}

.vel-plate__wort{
  position:relative;z-index:1;
  font-family:"Vel Display",Archivo,sans-serif;
  font-weight:800;text-transform:uppercase;line-height:1;
  font-size:clamp(3.4rem,9.2vw,5.8rem);letter-spacing:.02em;
  color:#46423C;
  text-shadow:0 1.5px 0 rgba(255,255,255,.58),0 -1px 1px rgba(0,0,0,.55);
}
/* Die 161 ist im Logo rot — hier als farbgefüllte Gravur */
.vel-plate__seite--hinten .vel-plate__wort{
  color:#9E342B;
  text-shadow:0 1.5px 0 rgba(255,255,255,.42),0 -1px 1px rgba(0,0,0,.6);
}

/* Der Schlagschatten reicht gut 30px nach unten — der Hinweis
   braucht mehr Abstand, als er optisch aussieht. */
.vel .vel-plate__hinweis{
  margin-top:4.4rem;text-align:center;
  font-size:var(--vel-small);color:var(--vel-muted);
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:.9rem;
}
.vel-plate__hinweis svg{
  width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  animation:vel-wink 3.4s ease-in-out infinite;
}
@keyframes vel-wink{
  0%,68%,100%{transform:rotate(0)}
  78%{transform:rotate(-170deg)}
  88%{transform:rotate(-180deg)}
}

/* ===========================================================
   10 · SWITCH — die zwei Seiten

   Ein echter Umschalter, kein Bild: der Knopf färbt die Fläche
   um und tauscht den Text. Wer hier klickt, hat die Idee des
   Produkts verstanden, ohne sie gelesen zu haben.
   =========================================================== */
.vel-switch{padding-block:var(--vel-block);border-top:1px solid var(--vel-linie)}
.vel-switch__kopf{max-width:54ch;margin-bottom:clamp(3.2rem,5vh,5.6rem)}
.vel-switch h2{font-size:var(--vel-head);margin-bottom:1.8rem}
.vel-switch__kopf .vel-lede{max-width:48ch;color:var(--vel-muted)}

.vel-switch__paar{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.vel-seite{
  position:relative;overflow:hidden;
  background:var(--vel-ink-2);
  padding:clamp(2.8rem,3.4vw,4.4rem);
  display:flex;flex-direction:column;gap:1.4rem;justify-content:flex-end;
  min-height:clamp(20rem,27vw,30rem);
  transition:background var(--vel-ruhig);
}
.vel-seite--rot{background:var(--vel-rot-tief)}
.vel-seite__wort{
  font-family:"Vel Display",Archivo,sans-serif;
  font-size:clamp(4.4rem,8.4vw,9rem);font-weight:800;
  line-height:.84;letter-spacing:.01em;text-transform:uppercase;
}
.vel-seite__text{font-size:var(--vel-body);line-height:1.5;max-width:30ch}
.vel-seite:not(.vel-seite--rot) .vel-seite__text{color:var(--vel-muted)}
.vel-seite--rot .vel-seite__text{color:rgba(242,239,233,.93)}

/* ===========================================================
   11 · MASSE — wie lang die Kette wirklich ist
   =========================================================== */
.vel-masse{padding-block:var(--vel-block);border-top:1px solid var(--vel-linie)}
.vel-masse__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--vel-luft);align-items:center;
}
.vel-masse h2{font-size:var(--vel-head);margin-bottom:1.8rem}
.vel-masse__text{color:var(--vel-muted);max-width:44ch;line-height:1.7}
.vel-masse__bild{
  background:var(--vel-ink-2);padding:clamp(2rem,2.4vw,3.2rem);
  display:grid;place-items:center;
}
.vel-masse__bild svg{width:100%;max-width:520px;height:auto}
.vel-masse__liste{
  margin-top:2.8rem;display:grid;gap:1px;
  background:var(--vel-linie);border-block:1px solid var(--vel-linie);
}
.vel-masse__zeile{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;
  background:var(--vel-ink);padding:1.4rem 0;font-size:var(--vel-small);
}
.vel-masse__zeile dt{color:var(--vel-muted);letter-spacing:.1em;text-transform:uppercase}
.vel-masse__zeile dd{font-weight:600;text-align:right}

/* ===========================================================
   12 · GESCHICHTE
   =========================================================== */
.vel-zurueck{background:var(--vel-gruen);padding-block:var(--vel-block)}
.vel-zurueck__grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:var(--vel-luft);align-items:start;
}
.vel-zurueck h2{font-size:var(--vel-head)}
.vel-zurueck__text{
  display:flex;flex-direction:column;gap:1.8rem;
  font-size:var(--vel-body);line-height:1.75;max-width:58ch;
  color:var(--vel-gruen-text);
}
.vel-zurueck__text strong{color:var(--vel-paper);font-weight:700}
.vel-zurueck__text p{margin:0}

/* ===========================================================
   13 · FAKTEN
   =========================================================== */
.vel-fakten{padding-block:var(--vel-block)}
.vel-fakten__grid{display:grid;grid-template-columns:repeat(var(--vel-spalten,4),1fr);gap:4px}
.vel-kachel{
  background:var(--vel-ink-2);padding:clamp(2.2rem,2.4vw,3.2rem);
  /* Zahl und Erklärung gehören zusammen. Auseinandergezogen über die
     volle Kachelhöhe sah die Bildunterschrift aus, als wäre sie
     abgerutscht. Die gleiche Mindesthöhe bleibt, der Platz sammelt
     sich jetzt unten. */
  display:flex;flex-direction:column;justify-content:flex-start;gap:1.4rem;
  min-height:clamp(13rem,15vw,18rem);
}
.vel-kachel--akzent{background:var(--vel-rot-tief)}
.vel-kachel__gross{
  font-family:"Vel Display",Archivo,sans-serif;
  font-size:clamp(2.8rem,3.2vw,4.2rem);font-weight:800;
  line-height:.95;letter-spacing:.005em;text-transform:uppercase;
}
.vel-kachel__klein{font-size:var(--vel-small);line-height:1.5;color:var(--vel-muted)}
.vel-kachel--akzent .vel-kachel__klein{color:rgba(242,239,233,.93)}

/* ===========================================================
   14 · WAS ANKOMMT
   =========================================================== */
.vel-paket{padding-block:var(--vel-block);border-top:1px solid var(--vel-linie)}
.vel-paket h2{font-size:var(--vel-head);margin-bottom:clamp(3.2rem,5vh,5.6rem);max-width:18ch}
.vel-paket__grid{display:grid;grid-template-columns:repeat(var(--vel-spalten,3),1fr);gap:var(--vel-luft)}
.vel-paket__punkt{display:flex;flex-direction:column;gap:1.2rem}
.vel-paket__nr{
  font-family:"Vel Display",Archivo,sans-serif;
  font-size:var(--vel-small);font-weight:800;letter-spacing:.18em;
  color:var(--vel-rot-hell);
}
.vel-paket__punkt h3{font-size:var(--vel-lead);line-height:1.2;font-weight:700;letter-spacing:0}
.vel-paket__punkt p{color:var(--vel-muted);line-height:1.65;max-width:34ch}

/* ===========================================================
   15 · STIMMEN

   Bewusst ohne Vorgabetexte. Hier gehören echte Nachrichten
   hinein oder gar nichts — erfundene Stimmen fallen auf und
   kosten mehr Vertrauen, als sie bringen.
   =========================================================== */
.vel-stimmen{padding-block:var(--vel-block);border-top:1px solid var(--vel-linie)}
.vel-stimmen h2{font-size:var(--vel-head);margin-bottom:clamp(3.2rem,5vh,5.6rem);max-width:16ch}
.vel-stimmen__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(27rem,1fr));gap:1.6rem}
.vel-stimme{
  background:var(--vel-ink-2);padding:2.6rem 2.8rem;
  display:flex;flex-direction:column;gap:1.6rem;
  border-radius:1.8rem 1.8rem 1.8rem .4rem;position:relative;
}
.vel-stimme__text{font-size:var(--vel-body);line-height:1.6}
.vel-stimme__wer{
  display:flex;align-items:center;gap:1.2rem;
  font-size:var(--vel-small);color:var(--vel-muted);
}
.vel-stimme__kreis{
  width:3.6rem;height:3.6rem;border-radius:50%;flex:none;
  background:var(--vel-ink-3);color:var(--vel-paper);
  display:grid;place-items:center;
  font-family:"Vel Display",Archivo,sans-serif;font-size:1.4rem;letter-spacing:.05em;
}

/* ===========================================================
   16 · FRAGEN
   =========================================================== */
.vel-faq{padding-block:var(--vel-block);border-top:1px solid var(--vel-linie)}
.vel-faq__grid{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--vel-luft);align-items:start;
}
.vel-faq h2{font-size:var(--vel-head);position:sticky;top:3.2rem}
.vel-faq__liste{display:flex;flex-direction:column}
.vel-faq details{border-bottom:1px solid var(--vel-linie)}
.vel-faq details:first-child{border-top:1px solid var(--vel-linie)}
.vel-faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.8rem;
  padding:2.4rem 0;
  font-size:var(--vel-lead);font-weight:600;line-height:1.3;letter-spacing:-.005em;
  transition:color var(--vel-schnell);
}
.vel-faq summary::-webkit-details-marker{display:none}
.vel-faq summary:hover{color:var(--vel-rot-hell)}
.vel-faq__plus{position:relative;width:1.7rem;height:1.7rem;flex:none}
.vel-faq__plus::before,.vel-faq__plus::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:var(--vel-rot-hell);transform:translateY(-50%);
  transition:transform var(--vel-schnell);
}
.vel-faq__plus::after{transform:translateY(-50%) rotate(90deg)}
.vel-faq details[open] .vel-faq__plus::after{transform:translateY(-50%) rotate(0)}
.vel-faq__antwort{
  padding:0 4rem 2.6rem 0;max-width:62ch;
  color:var(--vel-muted);line-height:1.7;
}
.vel-faq__antwort p{margin:0 0 1em}
.vel-faq__antwort p:last-child{margin-bottom:0}
.vel-faq__antwort a{color:var(--vel-paper)}

/* ===========================================================
   17 · ABSCHLUSS
   =========================================================== */
.vel-close{padding-block:var(--vel-block);text-align:center}
.vel-close h2{font-size:var(--vel-display)}
/* Unter einer Überschrift in dieser Größe wirkt ein normaler Knopf
   verloren — hier darf er mitwachsen. */
.vel-close .vel-btn{
  margin-top:clamp(2.4rem,4vh,4rem);
  font-size:clamp(1.6rem,1.4rem + .5vw,2rem);
  min-height:6.4rem;padding-inline:clamp(3rem,4vw,5rem);
}
.vel-close .vel-zaehler{margin:3.2rem auto 0}
.vel .vel-close__note{margin-top:2.2rem;font-size:var(--vel-small);color:var(--vel-muted)}

/* ===========================================================
   18 · KAUFLEISTE AM HANDY

   Vier von fünf Besuchern kommen mit dem Telefon. Wer dort an
   der Geschichte vorbeiscrollt, hat den Kaufknopf längst aus
   dem Blick — die Leiste holt ihn zurück. Sie erscheint erst,
   wenn der Hero durchgescrollt ist, damit sie nicht gleich zu
   Beginn den halben Bildschirm belegt.
   =========================================================== */
.vel-kaufleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(17,17,17,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--vel-linie);
  padding:1.2rem max(1.6rem,env(safe-area-inset-left,0px))
          calc(1.2rem + env(safe-area-inset-bottom,0px))
          max(1.6rem,env(safe-area-inset-right,0px));
  display:none;align-items:center;gap:1.6rem;
  transform:translateY(100%);transition:transform var(--vel-ruhig);
}
.vel-kaufleiste--da{transform:none}
.vel-kaufleiste__info{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.vel-kaufleiste__preis{font-weight:700;font-size:var(--vel-body);line-height:1.1}
.vel-kaufleiste__rest{
  font-size:var(--vel-mini);color:var(--vel-muted);
  letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vel-kaufleiste .vel-btn{
  flex:1 1 auto;min-height:4.8rem;padding-inline:1.6rem;
  font-size:var(--vel-small);
}

/* ===========================================================
   19 · PRODUKTSEITE
   =========================================================== */
.vel-pd{padding-block:clamp(2.4rem,4vh,4.8rem) var(--vel-block)}
.vel-pd__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:var(--vel-luft);align-items:start;
}
.vel-pd__media{display:flex;flex-direction:column;gap:8px}
.vel-pd__buehne{
  background:var(--vel-ink-2);aspect-ratio:1;
  display:grid;place-items:center;padding:clamp(2.4rem,4vw,5.6rem);
}
.vel-pd__buehne .vel-plate{width:min(72%,330px)}
.vel-pd__bild{background:var(--vel-ink-2);overflow:hidden}
.vel-pd__bild img{width:100%;height:auto}
.vel-pd__paar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vel-pd__klein{
  background:var(--vel-ink-2);aspect-ratio:32/21;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
}
.vel-pd__klein-wort{
  font-family:"Vel Display",Archivo,sans-serif;
  font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:.02em;
  font-size:clamp(2.4rem,4vw,4rem);color:#46423C;
  padding:.46em .66em;border-radius:1rem;
  background:linear-gradient(104deg,#6B675F,#A7A299 20%,#D2CDC4 45%,#888379 65%,#B3AEA5 85%,#67635C);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.52),inset 0 -3px 5px rgba(0,0,0,.46),
             inset 0 0 0 1px rgba(0,0,0,.38);
  text-shadow:0 1.5px 0 rgba(255,255,255,.58),0 -1px 1px rgba(0,0,0,.55);
}
.vel-pd__klein-wort--rot{color:#9E342B}
.vel-pd__klein-text{
  font-size:var(--vel-mini);letter-spacing:.15em;
  text-transform:uppercase;color:var(--vel-muted);
}

.vel-pd__info{display:flex;flex-direction:column;gap:2.2rem;position:sticky;top:3.2rem}
.vel-pd__title{font-size:clamp(3.4rem,2.2rem + 3.4vw,5.6rem)}
.vel-pd__preisrow{display:flex;align-items:baseline;gap:1.2rem 1.8rem;flex-wrap:wrap}
.vel-pd__preis{
  font-family:"Vel Display",Archivo,sans-serif;
  font-size:clamp(3rem,2.1rem + 2.2vw,4.4rem);font-weight:800;line-height:1;
}
.vel-pd__streich{color:var(--vel-muted);font-size:var(--vel-body)}
.vel-pd__versand{font-size:var(--vel-small);color:var(--vel-muted)}
.vel-pd__kurz{max-width:44ch;line-height:1.65}
.vel-pd__form{display:flex;flex-direction:column;gap:1.2rem;margin:0}
.vel-pd__add{width:100%}

/* Shopify gibt die Express-Knöpfe in eigener Größe aus. Hier auf die
   Breite des Knopfes darüber ziehen, sonst stehen sie verloren links. */
.vel-pd__express{margin-top:.2rem}
.vel-pd__express > *,
.vel-pd__express .shopify-payment-button,
.vel-pd__express .shopify-payment-button__button{width:100%;max-width:none}
.vel-pd__express .shopify-payment-button__button{
  border-radius:var(--vel-radius);font-weight:700;
  min-height:5.4rem;font-size:var(--vel-body);
}
.vel-pd__express .shopify-payment-button__more-options{
  width:100%;margin-top:.8rem;color:var(--vel-muted);font-size:var(--vel-small);
}

.vel-pd__trust{display:flex;flex-direction:column;gap:1rem}
.vel-pd__trust li{position:relative;padding-left:2.6rem;font-size:var(--vel-small);line-height:1.45}
.vel-pd__trust li::before{
  content:"";position:absolute;left:.2rem;top:.38em;
  width:1.1rem;height:.58rem;
  border-left:2px solid var(--vel-rot-hell);border-bottom:2px solid var(--vel-rot-hell);
  transform:rotate(-45deg);
}

.vel-pd__specs{
  margin-top:.6rem;padding:2.6rem 3rem;background:var(--vel-ink-2);
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2.8rem;
  font-size:var(--vel-small);
}
.vel-pd__specs dt{
  color:var(--vel-muted);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5;
}
.vel-pd__specs dd{line-height:1.5}

.vel-pd__text{line-height:1.7;color:var(--vel-muted);max-width:54ch}
.vel-pd__text p{margin:0 0 1.2em}
.vel-pd__text p:last-child{margin-bottom:0}
.vel-pd__text a{color:var(--vel-paper)}

/* ===========================================================
   20 · FUSSZEILE
   =========================================================== */
.vel-fuss{border-top:1px solid var(--vel-linie);padding-block:clamp(4rem,7vh,6.4rem)}
.vel-fuss__grid{display:flex;flex-wrap:wrap;gap:3.2rem 4.8rem;justify-content:space-between}
.vel .vel-fuss__claim{
  margin-top:1.4rem;font-size:var(--vel-small);
  color:var(--vel-muted);max-width:30ch;line-height:1.6;
}
/* Die Links bekommen Höhe statt nur Zeilenhöhe: 22px Text sind mit
   dem Daumen kaum zu treffen, 44px sind der Richtwert. Der negative
   Außenabstand holt die zusätzliche Höhe optisch wieder heraus, damit
   die Fußzeile nicht auseinanderfällt. */
.vel-fuss__links{display:flex;flex-wrap:wrap;gap:.4rem 2.8rem;margin-block:-1.1rem}
.vel-fuss__links a{
  color:var(--vel-muted);text-decoration:none;font-size:var(--vel-small);
  display:inline-flex;align-items:center;min-height:4.4rem;
}
.vel-fuss__links a:hover{color:var(--vel-paper);text-decoration:underline}
.vel-fuss .vel-marke{min-height:4.4rem;align-items:center}
.vel-fuss__unten{
  margin-top:3.6rem;padding-top:2.4rem;border-top:1px solid var(--vel-linie);
  display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:space-between;
  font-size:var(--vel-mini);color:var(--vel-muted);
}

/* ===========================================================
   20b · WARENKORB

   Dawns Warenkorb-Schublade ist hell. Wer auf "In den Warenkorb"
   klickt, landet also mitten im Kauf auf einer weißen Fläche, die
   aussieht wie ein fremder Shop — genau dort bricht der Kauf ab.

   Statt Dawns Bauteile einzeln zu überschreiben, werden hier seine
   eigenen Farbvariablen umgesetzt. Dawn färbt Knöpfe, Felder und
   Trenner daraus, also zieht die ganze Schublade die Velith-Farben
   von selbst an. Das bleibt auch heil, wenn das Theme aktualisiert
   wird.
   =========================================================== */
.vel-cart .drawer__inner,
.vel-cart .cart-drawer__overlay{
  --color-background:17,17,17;
  --color-foreground:242,239,233;
  --color-base-text:242,239,233;
  --color-base-background-1:17,17,17;
  --color-base-background-2:25,25,24;
  --color-button:194,58,47;
  --color-button-text:242,239,233;
  --color-base-accent-1:194,58,47;
  --color-base-accent-2:194,58,47;
  --color-shadow:0,0,0;
  --gradient-background:#111111;
  --color-card-hover:242,239,233;
}
.vel-cart .drawer__inner{
  background:var(--vel-ink);color:var(--vel-paper);
  border-left:1px solid var(--vel-linie);
  font-family:"Vel Text",Inter,system-ui,sans-serif;
}
.vel-cart .cart-drawer__overlay{background:rgba(0,0,0,.72)}

.vel-cart .drawer__header{border-bottom:1px solid var(--vel-linie)}
.vel-cart .drawer__heading{
  font-family:"Vel Display",Archivo,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:2.6rem;line-height:1;
}
.vel-cart .drawer__close{color:var(--vel-paper)}
.vel-cart .drawer__close svg{fill:currentColor}

.vel-cart .cart-item__name{
  color:var(--vel-paper);text-decoration:none;font-weight:600;
}
.vel-cart .cart-item__name:hover{text-decoration:underline}
.vel-cart .cart-item__details,
.vel-cart .product-option,
.vel-cart .cart-item__price-wrapper{color:var(--vel-paper)}
.vel-cart .product-option,
.vel-cart .cart-item__old-price{color:var(--vel-muted)}
.vel-cart .cart-item__media img,
.vel-cart .cart-item__image{border-radius:2px}
.vel-cart .cart-item{border-bottom:1px solid var(--vel-linie)}

/* Mengenfeld: Dawns Rahmen ist für Weiß gedacht und verschwindet
   auf Schwarz fast. */
.vel-cart .quantity{
  background:var(--vel-ink-2);
  box-shadow:inset 0 0 0 1px var(--vel-linie-stark);
  color:var(--vel-paper);
}
.vel-cart .quantity__input{color:var(--vel-paper);background:none}
.vel-cart .quantity__button svg{fill:var(--vel-paper)}
.vel-cart cart-remove-button .button{color:var(--vel-muted)}
.vel-cart cart-remove-button .button:hover{color:var(--vel-rot-hell)}

.vel-cart .drawer__footer{border-top:1px solid var(--vel-linie)}

/* Die Rechnung: Zwischensumme, Versand, Gesamt. Der Versand steht
   offen da, statt erst an der Kasse aufzutauchen — die Überraschung
   an der Kasse ist der häufigste Grund für einen Abbruch. */
.vel-cart .vel-summe{
  display:flex;flex-direction:column;gap:.9rem;
  padding:.4rem 0 2rem;
}
.vel-cart .vel-summe__zeile{
  display:flex;justify-content:space-between;gap:2rem;
  font-size:var(--vel-small);color:var(--vel-muted);
}
.vel-cart .vel-summe__zeile--gesamt{
  padding-top:1.2rem;margin-top:.3rem;
  border-top:1px solid var(--vel-linie);
  color:var(--vel-paper);font-size:var(--vel-body);font-weight:700;
}
.vel-cart .vel-summe__fuss{
  margin:.5rem 0 0;font-size:var(--vel-mini);color:var(--vel-muted);line-height:1.5;
}

.vel-cart .cart__checkout-button{
  background:var(--vel-rot-tief);color:var(--vel-paper);
  border:0;border-radius:var(--vel-radius);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  min-height:5.4rem;
}
.vel-cart .cart__checkout-button::after,
.vel-cart .cart__checkout-button::before{display:none}
.vel-cart .cart__checkout-button:hover{background:#D4463A}

/* Die Vertrauenszeile MUSS außerhalb von .cart__ctas stehen: Dawn
   setzt das als Raster, eine Liste darin landet NEBEN dem Knopf
   statt darunter. */
.vel-cart .vel-cart-trust{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;
  margin-top:1.4rem;padding-bottom:.4rem;
}
.vel-cart .vel-cart-trust li{
  position:relative;padding-left:2rem;
  font-size:var(--vel-mini);color:var(--vel-muted);line-height:1.4;
}
.vel-cart .vel-cart-trust li::before{
  content:"";position:absolute;left:0;top:.34em;
  width:.9rem;height:.48rem;
  border-left:2px solid var(--vel-rot-hell);
  border-bottom:2px solid var(--vel-rot-hell);
  transform:rotate(-45deg);
}

/* Leerer Warenkorb */
.vel-cart .cart-drawer__empty-content .button{
  background:var(--vel-rot-tief);color:var(--vel-paper);border:0;
  border-radius:var(--vel-radius);
}
.vel-cart .cart__login-title,
.vel-cart .cart__login-paragraph{color:var(--vel-muted)}

/* ===========================================================
   21 · SCHMALE FENSTER
   =========================================================== */
@media (max-width:900px){
  .vel-hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:"kopf" "plate" "cta" "marken";
    gap:clamp(2.4rem,4vh,4rem);
  }
  .vel-plate{width:min(84vw,360px)}
  .vel-hero h1{margin-block:1.4rem 1.8rem}
  .vel-hero__cta{flex-direction:column;align-items:stretch;gap:1.8rem}
  .vel-hero__cta .vel-btn{width:100%}
  .vel-hero__preis{text-align:center}

  /* Die hohen Kacheln sind am Desktop Absicht, am Handy nur Leerlauf */
  .vel-switch__paar{grid-template-columns:1fr}
  .vel-seite{min-height:0;padding-block:3.2rem}
  .vel-fakten__grid{grid-template-columns:1fr 1fr}
  .vel-paket__grid{grid-template-columns:1fr;gap:3.2rem}
  .vel-kachel{min-height:0}

  .vel-masse__grid,.vel-zurueck__grid,.vel-faq__grid{grid-template-columns:1fr;gap:2.8rem}
  .vel-faq h2{position:static}
  .vel-faq__antwort{padding-right:0}

  .vel-pd__grid{grid-template-columns:1fr}
  .vel-pd__info{position:static}
  .vel-pd__buehne .vel-plate{width:min(76%,300px)}

  /* Die Kaufleiste gibt es nur hier — am Desktop ist der Knopf
     ohnehin in Reichweite, dort wäre sie nur im Weg. Die Fußzeile
     bekommt unten Platz, damit die Leiste die letzten Links nicht
     verdeckt. */
  .vel-kaufleiste{display:flex}
  .vel-fuss{padding-bottom:calc(clamp(4rem,7vh,6.4rem) + 8.4rem)}
}

@media (max-width:560px){
  .vel-kopf__claim{
    font-size:1.1rem;letter-spacing:.1em;
    white-space:normal;text-align:right;max-width:14ch;line-height:1.35;
  }
  .vel-bar__inner{gap:.4rem 1.6rem}
  .vel-fakten__grid{grid-template-columns:1fr}
  .vel-pd__specs{padding:2.2rem 2rem;gap:1rem 1.6rem}
}

/* Ganz schmale Geräte: lieber kleinere Schrift als ein Layout,
   das seitlich ausbricht. */
@media (max-width:360px){
  :root{--vel-rand:1.6rem;--vel-display:clamp(3.6rem,13vw,4.8rem)}
  .vel-marke{letter-spacing:.12em}
}

/* ===========================================================
   22 · BEWEGUNG UND DRUCK
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  .vel *,.vel *::before,.vel *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .vel-js .vel-auf{opacity:1;transform:none}
}

@media print{
  .vel{background:#fff;color:#000}
  .vel-kaufleiste,.vel-bar{display:none!important}
  .vel-faq__antwort{color:#000}
  .vel details{open:open}
}