/* Startseite (04.11.2026): „Unser Versprechen“ (Urkunde zum Kippen + Stempel-Liste) und „Alles inklusive“ (Kassenbon).
   startbloecke.js setzt .is-da beim Hineinscrollen und kippt die Urkunde mit der Maus. */
.vbv, .vbq { font-family: Raleway, system-ui, -apple-system, 'Segoe UI', sans-serif; --p: #007E91; --o: #E8A020; --t: #16323a; }
.vbv-eye, .vbq-eye { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p); }
.vbv-eye::before, .vbq-eye::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.vbv h2, .vbq h2 { margin: 10px 0 12px !important; font-size: clamp(1.7rem, 3vw, 2.6rem) !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -0.015em; color: var(--t) !important; text-align: left !important; }
.vbv h2 em, .vbq h2 em { font-style: normal; color: var(--o); }
.vbv p.vbv-lead, .vbq p.vbq-lead { margin: 0 0 24px; font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.6; color: #44606a; font-weight: 500; }

/* ---------- Versprechen ---------- */
.vbv { max-width: 1240px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 0 clamp(16px, 3vw, 40px); }
.vbv-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vbv-buehne { position: relative; perspective: 1100px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.vbv-urkunde {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
  position: relative; width: min(100%, 380px); aspect-ratio: 3 / 4; border-radius: 18px; padding: 14px;
  background: linear-gradient(150deg, #ffffff 0%, #f4f9fa 100%);
  box-shadow: 0 40px 70px -30px rgba(0, 60, 70, 0.45), 0 0 0 1px rgba(0, 126, 145, 0.12);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.vbv-urkunde.is-kippen { transition: transform 0.08s linear; }
.vbv-rahmen { position: relative; height: 100%; border: 2px solid var(--p); border-radius: 10px; outline: 1px solid rgba(0,126,145,.35); outline-offset: -8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 18px; overflow: hidden; }
.vbv-glanz { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; opacity: .9; }
.vbv-u1 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: .08em; color: var(--t); transform: translateZ(30px); }
.vbv-u2 { margin-top: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: #44606a; text-transform: uppercase; }
.vbv-sterne { margin: 12px 0 6px; color: var(--o); font-size: 1.35rem; letter-spacing: .18em; transform: translateZ(40px); }
.vbv-crest { position: relative; width: 70px; height: 105px; margin: 10px 0 12px; transform: translateZ(50px); }
.vbv-crest img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; }
.vbv-u3 { font-size: .78rem; font-weight: 700; color: var(--p); letter-spacing: .06em; text-transform: uppercase; }
.vbv-sig { margin-top: 18px; padding-top: 8px; border-top: 1px solid rgba(22,50,58,.25); width: 70%; font-size: .72rem; color: #44606a; font-weight: 600; }
.vbv-sig b { display: block; font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive; font-weight: 400; font-size: 1.35rem; color: var(--t); line-height: 1.2; }
/* drehendes Siegel */
.vbv-siegel { position: absolute; right: -26px; top: -26px; width: 112px; height: 112px; transform: translateZ(70px); }
.vbv-siegel svg { width: 100%; height: 100%; animation: vbv-dreh 22s linear infinite; }
.vbv-siegel text { font-size: 9px; font-weight: 800; letter-spacing: .06em; fill: #fff; }
.vbv-siegel .k { fill: var(--o); }
.vbv-siegel .m { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1; text-align: center; }
.vbv-siegel .m small { display: block; font-size: .55rem; letter-spacing: .1em; }
@keyframes vbv-dreh { to { transform: rotate(360deg); } }
.vbv .vbv-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,126,145,.25); color: var(--p) !important; font-weight: 800; font-size: .9rem; text-decoration: none !important; box-shadow: 0 6px 18px -8px rgba(0,60,70,.3); transition: transform .2s ease; }
.vbv .vbv-pdf:hover { transform: translateY(-2px); }

.vbv-liste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.vbv-liste li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; margin: 0; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -18px rgba(0,60,70,.35), 0 0 0 1px rgba(0,126,145,.08); opacity: 0; transform: translateX(24px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 140ms); }
.vbv.is-da .vbv-liste li { opacity: 1; transform: none; }
.vbv-stempel { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--p); color: #fff; transform: scale(2.2) rotate(-20deg); opacity: 0; transition: transform .35s cubic-bezier(.3,1.6,.5,1), opacity .2s ease; transition-delay: calc(var(--i) * 140ms + 260ms); }
.vbv.is-da .vbv-stempel { transform: none; opacity: 1; }
.vbv .vbv-stempel svg { width: 22px; height: 22px; stroke: #fff; }
.vbv-liste b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--t); margin-bottom: 2px; }
.vbv-liste span { font-size: .93rem; line-height: 1.5; color: #44606a; font-weight: 500; }
.vbv-mehr { margin-top: 6px; }
.vbv-mehr summary { cursor: pointer; font-weight: 800; color: var(--p); font-size: .92rem; list-style: none; }
.vbv-mehr summary::-webkit-details-marker { display: none; }
.vbv-mehr summary::after { content: ' +'; }
.vbv-mehr[open] summary::after { content: ' –'; }
.vbv-mehr p { margin: 10px 0 0; font-size: .93rem; line-height: 1.65; color: #44606a; }

/* ---------- Kassenbon ---------- */
.vbq { max-width: 1240px; margin: clamp(56px, 7vw, 96px) auto clamp(40px, 5vw, 70px); padding: 0 clamp(16px, 3vw, 40px); }
.vbq-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.vbq-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.vbq .vbq-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 800; font-size: .92rem; text-decoration: none !important; transition: transform .2s ease; }
.vbq .vbq-btn.o { background: var(--o); color: #fff !important; }
.vbq .vbq-btn.g { background: rgba(0,126,145,.1); color: var(--p) !important; }
.vbq .vbq-btn:hover { transform: translateY(-2px); }
.vbq-btn svg { width: 16px; height: 16px; }
.vbq-fakten { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 0 24px; }
.vbq-fakten div { font-size: .85rem; color: #44606a; font-weight: 600; }
.vbq-fakten b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--p); line-height: 1.1; }

/* Drucker + Bon */
.vbq-drucker { position: relative; width: min(100%, 400px); margin: 0 auto; }
.vbq-schlitz { position: relative; z-index: 2; height: 26px; border-radius: 14px; background: linear-gradient(#1d4a54, #0b2f37); box-shadow: 0 10px 20px -8px rgba(0,0,0,.4); }
.vbq-schlitz::after { content: ''; position: absolute; left: 7%; right: 7%; top: 11px; height: 4px; border-radius: 4px; background: #031a1f; }
.vbq-schlitz i { position: absolute; right: 16px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; box-shadow: 0 0 8px #3ee08f; }
.vbq-papier { position: relative; margin: -12px 8% 0; clip-path: inset(0 -100px 100% -100px); transition: clip-path 2.4s cubic-bezier(.4,.1,.3,1) .2s; }
.vbq-schatten { filter: drop-shadow(0 16px 18px rgba(0,60,70,.2)); }
.vbq.is-da .vbq-papier { clip-path: inset(0 -100px -100px -100px); }
.vbq-bon { position: relative; background: #fffdf8; padding: 30px 24px 20px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #1d2b2f; font-size: .84rem;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 10px repeat-x; }
.vbq-kopf { text-align: center; border-bottom: 1px dashed #b9c3c5; padding-bottom: 12px; margin-bottom: 10px; }
.vbq-kopf b { display: block; font-family: Raleway, sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: .04em; }
.vbq-kopf span { display: block; font-size: .72rem; color: #5d6e72; }
.vbq-zeile { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; transition-delay: calc(.5s + var(--i) * 190ms); }
.vbq.is-da .vbq-zeile { opacity: 1; transform: none; }
.vbq-zeile .n { flex: 0 1 auto; }
.vbq-zeile .d { flex: 1 1 auto; border-bottom: 1px dotted #9aa7aa; transform: translateY(-3px); min-width: 12px; }
.vbq-zeile .p { flex: 0 0 auto; font-weight: 700; color: var(--p); }
.vbq-summe { margin-top: 10px; padding-top: 10px; border-top: 2px solid #1d2b2f; display: flex; justify-content: space-between; font-weight: 800; font-size: 1.05rem; opacity: 0; transition: opacity .3s ease; transition-delay: calc(.5s + var(--n) * 190ms); }
.vbq-summe2 { display: flex; justify-content: space-between; font-size: .78rem; color: #5d6e72; padding-top: 4px; opacity: 0; transition: opacity .3s ease; transition-delay: calc(.6s + var(--n) * 190ms); }
.vbq.is-da .vbq-summe, .vbq.is-da .vbq-summe2 { opacity: 1; }
.vbq-strich { margin: 16px auto 4px; height: 34px; width: 80%; background: repeating-linear-gradient(90deg, #1d2b2f 0 2px, transparent 2px 4px, #1d2b2f 4px 5px, transparent 5px 8px, #1d2b2f 8px 11px, transparent 11px 12px); opacity: .85; }
.vbq-dank { text-align: center; font-size: .72rem; color: #5d6e72; }
.vbq-stempel { position: absolute; right: 5%; bottom: 7%; padding: 8px 14px; border: 3px solid var(--o); border-radius: 10px; color: var(--o); font-family: Raleway, sans-serif; font-weight: 900; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; text-align: center; background: rgba(255,253,248,.75);
  transform: rotate(-14deg) scale(2.4); opacity: 0; transition: transform .32s cubic-bezier(.3,1.5,.5,1), opacity .15s ease; transition-delay: calc(1s + var(--n) * 190ms); }
.vbq-stempel small { display: block; font-size: .62rem; letter-spacing: .12em; }
.vbq.is-da .vbq-stempel { transform: rotate(-14deg) scale(1); opacity: .95; }

@media (max-width: 900px) {
  .vbv-in, .vbq-in { grid-template-columns: minmax(0, 1fr); }
  .vbv-buehne { order: 2; }
  .vbv-siegel { right: -8px; top: -20px; width: 92px; height: 92px; }
  .vbv-urkunde { width: min(86%, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .vbv-siegel svg { animation: none; }
  .vbv-liste li, .vbv-stempel, .vbq-zeile, .vbq-summe, .vbq-summe2, .vbq-stempel, .vbq-papier { transition: none !important; }
}

.vbv .vbv-pdf svg, .vbq .vbq-btn svg { width: 16px !important; height: 16px !important; flex: 0 0 auto; }
.vbv .vbv-pdf { white-space: nowrap; }