/* Vorbestellung 2. Auflage auf der alten Backbuch-Seite /backbuch/ (framework/backbuch-vorbestellung.php). Nur auf dieser Seite geladen. * Gestaltung = Vorbestell-Bausteine der neuen Seite /lowcarbbenni-backbuch/ (seite.css, vb-*), an die Schrift der alten Seite angepasst. * Kalam (Handschrift des Zettels): SIL Open Font License 1.1, lokal ausgeliefert (kein Abruf bei Google). */ @font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/kalam-latin-400.woff2') format('woff2')} @font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/kalam-latin-700.woff2') format('woff2')} :root{--vb-weiss:#fffdf9;--vb-navy:#1f2a44;--vb-text:#3a4256;--vb-leise:#5f6679;--vb-orange:#a8440f;--vb-orange-d:#7f3209;--vb-orange-h:#e2672a; --vb-gelb:#f6c143;--vb-tanne:#2f6a4f;--vb-rot:#c0392b;--vb-knopf:#f46f1b} /* Kopf (statt "Nur noch X % verfügbar") */ .vb-kopfzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 14px} .vb-marke{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-weight:800;font-size:12px;line-height:1;letter-spacing:.06em; text-transform:uppercase;transform:rotate(-2deg);transform-origin:0 50%} .vb-marke s{color:var(--vb-rot);border:2px solid var(--vb-rot);border-radius:4px;padding:4px 6px;text-decoration-thickness:2px} .vb-marke b{color:#fff;font-weight:800;background:var(--vb-tanne);border-radius:4px;padding:6px 8px;box-shadow:0 3px 0 rgba(0,0,0,.18)} .vb-versand{margin:0;font-weight:700;font-size:15px;line-height:1.2;color:var(--vb-navy)} @media (min-width:900px){.vb-marke{font-size:14px}} /* Ab Tablet steht der Stempel ganz oben im Kaufbereich; dessen .wrap schneidet mit overflow:hidden ab, der gedrehte Stempel ragte 9 px darüber (Bennis Bild 26.10.) -> Luft nach oben */ @media (min-width:431px){.vb-kopfzeile{padding-top:12px}} /* Handy und kleines Tablet: wie Kicker und Überschrift des Themes (bol3-lp global.min.css, Regeln bis 430 und bis 600 px) mittig */ @media (max-width:600px){.vb-kopfzeile{flex-direction:column;align-items:center;text-align:center}.vb-kopfzeile .vb-marke{justify-content:center;transform-origin:50% 50%}} /* Zeilen am Kaufknopf */ .vb-unten{margin:22px 0 12px} .vb-unten .vb-marke{justify-content:center;margin-bottom:14px;transform:rotate(-2deg);transform-origin:50% 50%} .vb-rest{margin:0 0 4px;font-weight:800;font-size:15px;line-height:1.25;color:var(--vb-rot)} .vb-versand-klein{margin:0;font-weight:600;font-size:13.5px;line-height:1.3;color:var(--vb-tanne)} /* Karte (Zettel, Tracker, Zähler) */ .vb-karte{position:relative;box-sizing:border-box;max-width:560px;background:var(--vb-weiss);border:2px dashed var(--vb-orange);border-radius:16px; margin:18px 0 22px;padding:16px 15px 14px;box-shadow:0 8px 18px rgba(31,42,68,.10);text-align:left;color:var(--vb-text)} .vb-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px} .vb-kopf small{font-weight:800;font-size:11px;line-height:1;letter-spacing:.12em;color:var(--vb-orange)} .vb-live{font-weight:800;font-size:11px;line-height:1;color:var(--vb-rot);display:flex;align-items:center;gap:5px;white-space:nowrap} .vb-live:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vb-rot);box-shadow:0 0 0 4px rgba(192,57,43,.18)} .vb-karte .vb-hand{font-family:'Kalam',cursive;font-weight:400;font-size:18px;line-height:1.3;color:var(--vb-navy);margin:10px 0 12px} .vb-karte .vb-hand b{color:var(--vb-orange);font-weight:700} .vb-karte .vb-hand i{font-style:normal;display:block;text-align:right;font-size:19px} .vb-schritte{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin:4px 0 14px} .vb-schritte:before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:3px;background:linear-gradient(90deg,var(--vb-tanne) 0 33.4%,#e6dccb 33.4% 100%)} .vb-lauf{position:absolute;left:37.5%;width:25%;top:13px;height:3px;overflow:hidden;z-index:0} .vb-lauf:after{content:"";position:absolute;top:0;bottom:0;width:45%;left:-45%;border-radius:3px; background:linear-gradient(90deg,rgba(226,103,42,0),#e2672a,rgba(226,103,42,0));animation:vb-lauf 1.6s linear infinite} @keyframes vb-lauf{to{left:100%}} @keyframes vb-puls{0%{box-shadow:0 0 0 0 rgba(226,103,42,.55)}70%{box-shadow:0 0 0 11px rgba(226,103,42,0)}100%{box-shadow:0 0 0 0 rgba(226,103,42,0)}} .vb-schritte div{position:relative;z-index:1;text-align:center;font-weight:600;font-size:10.5px;line-height:1.2;letter-spacing:-.01em;color:var(--vb-leise);padding:0 2px;min-width:0;-webkit-hyphens:manual;hyphens:manual} @media (max-width:374px){.vb-karte{padding:14px 11px 12px}} @media (min-width:600px){.vb-schritte div{font-size:11.5px;letter-spacing:0}} .vb-schritte i{display:block;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:#e6dccb;color:#fff;font-weight:800;font-size:13px;line-height:28px;font-style:normal} .vb-schritte .ok{color:var(--vb-navy)}.vb-schritte .ok i{background:var(--vb-tanne)} .vb-schritte .jetzt{color:var(--vb-navy);font-weight:800}.vb-schritte .jetzt i{background:var(--vb-orange-h);animation:vb-puls 1.8s ease-out infinite} .vb-zaehler{background:var(--vb-navy);color:#fff;border-radius:12px;padding:12px 13px 11px} .vb-zaehler .z{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:800;font-size:15px;line-height:1.2} .vb-zaehler .z b{font-size:26px;color:var(--vb-gelb)} .vb-zaehler .balken{height:10px;background:rgba(255,255,255,.16);border-radius:999px;overflow:hidden;margin:8px 0 7px} .vb-zaehler .balken i{display:block;height:100%;width:79%;background:linear-gradient(90deg,var(--vb-gelb),#e2672a 70%,var(--vb-rot));border-radius:999px;transition:width .8s ease} .vb-zaehler p{margin:0;font-weight:500;font-size:12.5px;line-height:1.35;color:#c9cee0} .vb-zaehler p b{color:#fff} @keyframes vb-blitz{0%{color:#e2672a;transform:scale(1.18)}100%{transform:scale(1)}} .vb-blitz{display:inline-block;animation:vb-blitz .7s ease-out} /* Leiste unten (Handy/Tablet), ersetzt dort den runden Warenkorb-Knopf; Ziel = dieselbe Backbuch-Kasse */ .buy-footer{display:none!important} .vb-leiste{position:fixed;left:0;right:0;bottom:0;z-index:99999;display:flex;align-items:center;gap:12px;background:var(--vb-weiss); box-shadow:0 -4px 16px rgba(31,42,68,.14);padding:10px 14px calc(10px + env(safe-area-inset-bottom)); transform:translateY(115%);transition:transform .3s ease} .vb-leiste.zeigen{transform:none} /* Die Leiste steht im