/* ============================================================
   OnlineGravur.de – Verbesserte Laser UI
   Ziele: Lesbarkeit, Mobilfreundlichkeit, klare Hierarchie
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  --bg0: #05080f;
  --bg1: #080d1a;
  --bg2: #0e1628;
  --glow:  #18f3ff;
  --glow2: #ff3bd4;
  --card:       rgba(255,255,255,.055);
  --card-hover: rgba(255,255,255,.09);
  --line:       rgba(255,255,255,.10);
  --text-base:  rgba(255,255,255,.88);
  --text-muted: rgba(255,255,255,.52);
  --text-faint: rgba(255,255,255,.28);
  --radius: 16px;
  --radius-lg: 22px;
  --section: 5rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-base);
  background: var(--bg0);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,.navbar-brand {
  font-family: 'Syne', system-ui, sans-serif;
  letter-spacing: -.02em;
}

/* ── Hintergrund ── */
.bg-laser {
  background:
    radial-gradient(ellipse 1100px 600px at 15% 5%,  rgba(24,243,255,.12), transparent 65%),
    radial-gradient(ellipse  900px 500px at 85% 25%, rgba(255,59,212,.09), transparent 60%),
    radial-gradient(ellipse  700px 400px at 50% 90%, rgba(24,100,255,.07), transparent 55%),
    linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  min-height: 100vh;
}

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 6px);
  opacity: .45;
}

/* ── Navigation ── */
.nav-glass {
  background: rgba(5,8,16,.8);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.navbar-brand {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--glow) 0%, #fff 70%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-link {
  color: var(--text-muted) !important; font-weight: 500;
  padding: .45rem .85rem !important; border-radius: 10px;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: #fff !important; background: rgba(255,255,255,.07); }

#cartBadge {
  background: var(--glow) !important; color: #04080e !important;
  font-weight: 700; font-size: .68rem; padding: .2em .55em;
  border-radius: 99px; vertical-align: middle;
}

/* ── Buttons ── */
.btn-laser {
  --bs-btn-color: #040810;
  --bs-btn-bg: var(--glow);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #6ffffe;
  --bs-btn-hover-color: #040810;
  font-family: 'Syne', sans-serif; font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(24,243,255,.28), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .2s;
}
.btn-laser:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(24,243,255,.45), inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn-laser:active { transform: translateY(0); }

.btn-outline-light {
  border-color: rgba(255,255,255,.2) !important; color: var(--text-muted) !important;
  border-radius: 12px; font-weight: 500;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline-light:hover {
  border-color: rgba(255,255,255,.45) !important; color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

.btn-outline-danger {
  border-radius: 10px !important;
  border-color: rgba(255,80,80,.35) !important; color: rgba(255,130,130,.8) !important;
}
.btn-outline-danger:hover { background: rgba(255,60,60,.1) !important; color: #ff9090 !important; }

/* ── Karten ── */
.card-laser {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 18px 45px rgba(0,0,0,.45);
  transition: background .25s, box-shadow .25s, transform .25s;
  position: relative; overflow: hidden;
}
.card-laser::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(230px 55px at 20% 0%, rgba(24,243,255,.18), transparent 70%),
    radial-gradient(230px 55px at 80% 0%, rgba(255,59,212,.14), transparent 70%);
  opacity: .9; pointer-events: none; transition: opacity .3s;
}
.card-laser:hover::before { opacity: 1.3; }
.card-product:hover {
  background: var(--card-hover);
  transform: translateY(-3px);
  box-shadow: 0 2px 0 rgba(255,255,255,.07) inset, 0 24px 55px rgba(0,0,0,.55),
              0 0 0 1px rgba(24,243,255,.18);
}
.card-body { position: relative; }

/* ── Hero ── */
.hero { position: relative; padding: 6rem 0 3rem; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(closest-side at 35% 25%, rgba(0,0,0,.9), rgba(0,0,0,0));
  pointer-events: none;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.15;
}
.laser-sweep { position: relative; display: inline-block; color: var(--glow); }
.laser-sweep::after {
  content: ""; position: absolute; left: -15%; top: 0; width: 25%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(24,243,255,.6), transparent);
  filter: blur(3px); transform: skewX(-18deg);
  animation: sweep 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes sweep {
  0%  { left: -25%; opacity: 0 }
  12% { opacity: 1 }
  60% { left: 115%; opacity: .7 }
  100%{ left: 115%; opacity: 0 }
}

/* Schnellstart */
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(24,243,255,.12); border: 1px solid rgba(24,243,255,.28);
  color: var(--glow); font-family: 'Syne', sans-serif; font-weight: 700; font-size: .78rem;
  flex-shrink: 0;
}

/* ── Prozess-Schritte ── */
.step-card {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem; text-align: center;
  transition: background .25s, transform .25s;
}
.step-card:hover { background: rgba(255,255,255,.07); transform: translateY(-2px); }
.step-icon { font-size: 2.2rem; margin-bottom: .75rem; display: block; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(24,243,255,.12); border: 1px solid rgba(24,243,255,.28);
  color: var(--glow); font-family: 'Syne', sans-serif; font-weight: 800; font-size: .9rem;
  margin-bottom: 1rem;
}

/* ── Produkte ── */
.product-img-wrap { position: relative; overflow: hidden; }
.product-img-wrap img {
  width: 100%; height: 100%; object-fit: contain;
  background: rgba(0,0,0,.35); padding: 12px;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.card-product:hover .product-img-wrap img { transform: scale(1.06); }

.price-tag { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--glow); font-size: 1.1rem; }
.price-from { font-size: .7rem; color: var(--text-muted); font-weight: 400; display: block; margin-bottom: 1px; }

.badge-soft {
  background: rgba(24,243,255,.1); border: 1px solid rgba(24,243,255,.22);
  color: #bffcff; font-size: .7rem; font-weight: 600;
  letter-spacing: .03em; border-radius: 8px; padding: .3em .7em;
}

/* ── Filter ── */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-bar .form-select {
  background: rgba(10,15,28,.92) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.15) !important; border-radius: 12px;
  min-width: 180px;
}
.filter-bar .form-select:focus {
  border-color: rgba(24,243,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(24,243,255,.12) !important;
}
.filter-bar .form-select option { background: #0b1220 !important; color: #fff !important; }

/* ── Formulare ── */
.form-control, .form-select {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.13) !important;
  color: #fff !important; border-radius: 12px; font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--text-faint) !important; }
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(24,243,255,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(24,243,255,.12) !important; color: #fff !important;
}
.form-label { color: rgba(255,255,255,.82) !important; font-weight: 500; font-size: .9rem; margin-bottom: .35rem; }
.req { color: #ff5050; font-weight: 600; margin-left: 3px; }

/* ── Tabelle Warenkorb ── */
.table-darkish {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.08);
}
.table-darkish th {
  color: var(--text-muted) !important; font-weight: 600;
  font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.table-darkish td { padding: 1rem 1.25rem; border-color: rgba(255,255,255,.06) !important; vertical-align: middle; }

.cart-note { min-height: 52px; resize: vertical; touch-action: manipulation; }
@media (max-width: 768px) { .cart-note { min-height: 90px; font-size: 16px; } }

.upload-zone {
  border: 1.5px dashed rgba(255,255,255,.18); border-radius: 12px;
  padding: .8rem; background: rgba(255,255,255,.03); transition: border-color .2s;
}
.upload-zone:hover { border-color: rgba(24,243,255,.4); }

/* Trust-Badges */
.trust-badge {
  display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem;
  border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  transition: background .2s;
}
.trust-badge:hover { background: rgba(255,255,255,.07); }
.trust-icon { font-size: 1.35rem; flex-shrink: 0; }
.trust-text { font-size: .82rem; color: var(--text-muted); line-height: 1.3; }
.trust-text strong { color: var(--text-base); display: block; font-weight: 600; font-size: .84rem; }

/* CTA */
.cta-banner {
  background: radial-gradient(600px 200px at 20% 50%, rgba(24,243,255,.09), transparent 65%), rgba(255,255,255,.04);
  border: 1px solid rgba(24,243,255,.18) !important;
}

/* Abschnitte */
.section-pad { padding: var(--section) 0; }
.section-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }

.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(24,243,255,.35), rgba(255,59,212,.2), transparent);
  margin: var(--section) 0;
}

/* Animationen */
.fade-up { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fade-up.in { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(1){transition-delay:.05s}
.fade-up:nth-child(2){transition-delay:.12s}
.fade-up:nth-child(3){transition-delay:.19s}
.fade-up:nth-child(4){transition-delay:.26s}
.fade-up:nth-child(5){transition-delay:.33s}
.fade-up:nth-child(6){transition-delay:.40s}

/* Alerts */
.alert-success { background:rgba(40,200,120,.1)!important; border-color:rgba(40,200,120,.3)!important; color:#7fefb8!important; border-radius:var(--radius)!important; }
.alert-warning { background:rgba(255,220,60,.08)!important; border-color:rgba(255,220,60,.25)!important; color:#ffe87a!important; border-radius:var(--radius)!important; }
.alert-danger  { background:rgba(255,70,70,.08)!important; border-color:rgba(255,70,70,.25)!important; color:#ff9090!important; border-radius:var(--radius)!important; }

/* Legal */
.legal .legal-content { max-width: 900px; margin: 0 auto; }
.legal .legal-content p, .legal .legal-content li { line-height: 1.75; color: var(--text-muted); }
.legal .legal-content h2 { margin-top: 2rem; }

/* Cookie */
.cookie-banner {
  position:fixed!important; left:1rem!important; right:1rem!important; bottom:1rem!important; z-index:9999!important;
  display:grid; grid-template-columns:1fr auto; gap:1rem;
  background:rgba(8,12,20,.96); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  padding:1.1rem 1.3rem; backdrop-filter:blur(12px); box-shadow:0 16px 50px rgba(0,0,0,.55);
}
.cookie-banner[hidden]{display:none!important;}
.cookie-text{color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.4;}
.cookie-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:900px){.cookie-banner{grid-template-columns:1fr;}.cookie-actions{justify-content:flex-start;}}
.cookie-modal{position:fixed!important;inset:0!important;z-index:10000!important;display:none;padding:1.25rem;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);}
.cookie-modal.open{display:grid!important;place-items:center!important;}
.cookie-modal-card{width:min(720px,100%);border-radius:18px;}
.cookie-banner,.cookie-modal-card{animation:ccPop .18s ease-out;}
@keyframes ccPop{from{transform:translateY(8px);opacity:.6}to{transform:translateY(0);opacity:1}}

/* Responsive */
@media(max-width:576px){
  .hero{padding:4rem 0 2rem;}
  .section-pad{padding:3rem 0;}
  .table th,.table td{font-size:.8rem;padding:.7rem .8rem;}
  .card-laser{border-radius:14px;}
}

/* Hilfeklassen */
.small-muted{color:var(--text-muted);font-size:.9rem;}
.text-glow{color:var(--glow);}
.fw-bold{font-weight:700!important;color:#fff!important;}
.lead{color:var(--text-muted);}

/* ── Performance: font-display hint (handled via Google Fonts URL param) ── */

/* ── Produktdetail-Seite ── */
.breadcrumb-link:hover { color: var(--glow) !important; }

/* ── FAQ Accordion ── */
.faq-item button:hover { background: rgba(255,255,255,.07) !important; }

/* ── Sticky Sidebar ── */
@media (min-width: 992px) {
  .sticky-sidebar { position: sticky; top: 80px; }
}

/* ── Suchfeld ── */
input[type="search"]::-webkit-search-cancel-button { 
  filter: invert(1) opacity(.5);
}

/* ── Mobile: Produktbild größer ── */
@media (max-width: 576px) {
  .ratio-1x1.product-detail-img { --bs-aspect-ratio: 85%; }
}

/* ── Produkttitel-Link hover ── */
a .fw-bold:hover, a:hover .fw-bold { color: var(--glow) !important; transition: color .2s; }

/* ── Ladeindikator Submit-Button ── */
button[disabled] { opacity: .6; cursor: not-allowed; }

/* ── Fortschrittsanzeige ── */
.progress-steps { overflow-x: auto; scrollbar-width: none; }
.progress-steps::-webkit-scrollbar { display: none; }