/* DVhub.de — Produkt-, Shop- & Kontakt-Komponenten */
/* ── Produkt-/Shop-Komponenten (neu) ── */
.hero-prod{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:70px 28px 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
@media (max-width:860px){.hero-prod{grid-template-columns:1fr;gap:30px}}
.hero-prod .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-prod .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.hero-prod h1{font-size:clamp(36px,5.4vw,62px);font-weight:700;line-height:1.04;letter-spacing:-.03em;margin-bottom:20px;text-wrap:balance}
.hero-prod h1 .grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-prod .lead{font-size:clamp(16px,1.9vw,19px);color:var(--text-2);line-height:1.6;margin-bottom:28px;max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--brd);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.hero-meta span:nth-child(1){color:var(--cyan)}.hero-meta span:nth-child(2){color:var(--yellow)}.hero-meta span:nth-child(3){color:var(--violet)}
.hero-art-prod{position:relative;display:grid;place-items:center}
.hero-art-prod::before{content:'';position:absolute;width:76%;aspect-ratio:1;border-radius:50%;z-index:0;background:radial-gradient(circle,rgba(52,219,255,.34),rgba(167,139,255,.18) 45%,transparent 70%);filter:blur(34px);animation:heroGlow 6s ease-in-out infinite}
.hero-art-prod .ring{position:absolute;inset:7%;border-radius:50%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,rgba(52,219,255,.5) 60deg,transparent 140deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 61%,transparent 62%);mask:radial-gradient(circle,transparent 58%,#000 59%,#000 61%,transparent 62%);animation:heroSpin 7s linear infinite}
.hero-art-prod .ring.b{inset:-1%;background:conic-gradient(from 180deg,transparent 0deg,rgba(255,212,33,.5) 50deg,transparent 120deg,transparent 360deg);animation-duration:10s;animation-direction:reverse;-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%,#000 69%,transparent 70%);mask:radial-gradient(circle,transparent 66%,#000 67%,#000 69%,transparent 70%)}
.hero-art-prod img{position:relative;z-index:1;width:min(100%,300px);height:auto;filter:drop-shadow(0 22px 46px rgba(31,141,255,.42)) drop-shadow(0 0 32px rgba(167,139,255,.26));animation:heroFloat 6s ease-in-out infinite}
.chip{position:absolute;z-index:2;padding:9px 13px;border-radius:11px;background:var(--card-2,rgba(255,255,255,.06));border:1px solid var(--brd-strong);backdrop-filter:blur(10px);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:flex;flex-direction:column;gap:2px;animation:chipFloat 4.6s ease-in-out infinite}
.chip b{font-size:14px;letter-spacing:0;text-transform:none}
.chip.tl{top:6%;left:-2%;animation-delay:0s}.chip.tr{top:20%;right:-4%;animation-delay:.6s}.chip.bl{bottom:14%;left:-4%;animation-delay:1.2s}.chip.br{bottom:2%;right:0;animation-delay:1.8s}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes heroGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes heroSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hero-art-prod::before,.hero-art-prod .ring,.hero-art-prod img,.chip{animation:none}}
.chip.tl b{color:var(--cyan)}.chip.tr b{color:var(--green)}.chip.bl b{color:var(--yellow)}.chip.br b{color:var(--violet)}
@media (max-width:860px){.hero-art-prod{display:none}}

/* terminal */
.terminal{border:1px solid var(--brd-strong);border-radius:14px;overflow:hidden;background:#05080f;box-shadow:var(--shadow);max-width:760px}
.terminal .bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid rgba(140,180,255,.12);background:rgba(255,255,255,.02)}
.terminal .bar i{width:11px;height:11px;border-radius:50%}
.terminal .bar i:nth-child(1){background:#ff5d5d}.terminal .bar i:nth-child(2){background:#ffd421}.terminal .bar i:nth-child(3){background:#3ee0a0}
.terminal .bar .t{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);margin-left:8px}
.terminal pre{margin:0;padding:18px 20px;font-family:var(--f-mono);font-size:13px;line-height:1.7;color:#cfe0ff;overflow-x:auto;white-space:pre}
.terminal .c{color:#5f7196}.terminal .p{color:var(--cyan)}.terminal .s{color:var(--green)}.terminal .o{color:var(--yellow)}.terminal .k{color:var(--violet)}

/* tiers */
/* Abrechnungs-Switch (Einmalkauf | Jahresabo) */
.billing-switch{display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 26px;padding:4px;border:1px solid var(--brd);border-radius:999px;background:var(--surface-2)}
.billing-switch .bs-opt{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:9px 22px;border-radius:999px;background:transparent;color:var(--text-2);transition:background .15s,color .15s}
.billing-switch .bs-opt:hover{color:var(--text)}
.billing-switch .bs-opt.is-active{background:var(--aurora);color:#04101f;font-weight:700}
/* 4-Spalten: Free + 3 aktive Karten (die inaktive Staffel wird ausgeblendet) */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1200px;margin:0 auto;align-items:stretch}
.tiers .tier{padding:24px}
#preise[data-mode="onetime"] .tier[data-plan="yearly"]{display:none}
#preise[data-mode="yearly"] .tier[data-plan="onetime"]{display:none}
@media (max-width:1040px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));max-width:660px}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;max-width:420px}}
.price-fineprint{max-width:760px;margin:14px auto 0;text-align:center;font-size:12.5px;line-height:1.55;color:var(--text-dim)}
/* Abo-Preise ("ab X €") etwas kompakter, damit sie einzeilig bleiben */
.tier[data-plan="yearly"] .price{flex-wrap:wrap;gap:6px}
.tier[data-plan="yearly"] .price .v{font-size:29px;white-space:nowrap}
.tier{position:relative;border:1px solid var(--brd);border-radius:18px;background:var(--surface);padding:30px;display:flex;flex-direction:column}
.tier.pro{border-color:color-mix(in srgb,var(--cyan) 45%,var(--brd));background:
  radial-gradient(90% 60% at 80% 0%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 60%),var(--surface);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent)}
.tier .badge{position:absolute;top:-11px;left:30px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.tier.free .badge{background:var(--surface-2);border:1px solid var(--brd-strong);color:var(--text-2)}
.tier.pro .badge{background:var(--aurora);color:#04101f;font-weight:700}
.tier h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.tier .sub{font-size:13.5px;color:var(--text-2);margin-bottom:18px;line-height:1.5}
.tier .price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.tier .price .v{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tier.free .price .v{color:var(--text)}.tier.pro .price .v{color:var(--cyan)}
.tier .price .u{font-family:var(--f-mono);font-size:12px;color:var(--text-dim)}
.tier .vat{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px;flex:1}
.tier li{position:relative;padding-left:28px;font-size:14px;color:var(--text-2);line-height:1.45}
.tier li::before{content:'✓';position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700;display:grid;place-items:center}
.tier.free li::before{background:color-mix(in srgb,var(--cyan) 16%,transparent);color:var(--cyan)}
.tier.pro li::before{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.tier li.muted{color:var(--text-dim)}.tier li.muted::before{content:'–';background:transparent;color:var(--text-dim)}
.tier .cta{display:flex;flex-direction:column;gap:8px}
.tier .cta .note{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-dim);text-align:center}

/* feature matrix */
.matrix{max-width:none;margin:0;overflow-x:auto;border:1px solid var(--brd);border-radius:16px}   /* volle Sektionsbreite, linksbündig (Chrissi) */
.matrix table{width:100%;border-collapse:collapse;font-size:14px}
.matrix th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);padding:15px 18px;background:var(--surface-2);border-bottom:1px solid var(--brd)}
.matrix th.col{text-align:center;width:110px}
.matrix th.col.pro{color:var(--cyan)}
.matrix td{padding:13px 18px;border-bottom:1px solid var(--brd);color:var(--text-2)}
.matrix td:first-child{color:var(--text);font-weight:500}
.matrix td.col{text-align:center;font-family:var(--f-mono);font-size:13px}
.matrix tr:last-child td{border-bottom:0}
.matrix .yes{color:var(--green);font-weight:700}.matrix .no{color:var(--text-dim)}.matrix .lim{color:var(--yellow);font-size:11px}
.matrix tbody tr:hover td{background:var(--surface)}

.shop-note{max-width:760px;margin:18px auto 0;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--brd);border-left:3px solid var(--cyan);border-radius:12px;background:var(--surface);padding:16px 20px;font-size:13.5px;color:var(--text-2);line-height:1.55}
.shop-note svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:1px}

/* Kontakt */
.contact-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.cform{border:1px solid var(--brd);border-radius:18px;background:var(--surface);padding:28px}
.cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.cform .frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600;color:var(--text)}
.field label .req{color:var(--cyan)}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--brd);border-radius:10px;padding:11px 14px;color:var(--text);font-family:var(--f-sans);font-size:14px;outline:0;transition:.15s}
.field textarea{resize:vertical;min-height:130px;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 4%,var(--surface-2))}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--text-2);line-height:1.5;margin-bottom:18px}
.consent input{width:17px;height:17px;flex-shrink:0;margin-top:1px;accent-color:var(--cyan)}
.consent a{color:var(--cyan)}
.cform .submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-ok{display:none;align-items:center;gap:10px;font-size:13.5px;color:var(--green);font-family:var(--f-mono)}
.form-ok.show{display:flex}
.form-ok svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2}

.cinfo{display:flex;flex-direction:column;gap:14px}
.cinfo .card{border:1px solid var(--brd);border-radius:16px;background:var(--surface);padding:22px}
.cinfo .card h3{font-size:16px;font-weight:700;margin-bottom:4px}
.cinfo .card .org{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.cinfo .card p{font-size:13.5px;color:var(--text-2);line-height:1.6}
.cinfo .card a{color:var(--cyan)}
.cinfo .rows{display:flex;flex-direction:column;gap:12px}
.cinfo .ir{display:flex;gap:12px;align-items:center;font-size:13.5px;color:var(--text-2)}
.cinfo .ir .ic{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,transparent)}
.cinfo .ir .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.cinfo .ir b{color:var(--text);font-weight:600;display:block;font-size:14px}