/* OnlineGravur.de – Laser Style */
:root{
  --bg0:#070b10;
  --bg1:#0b1220;
  --glow:#18f3ff;
  --glow2:#ff3bd4;
  --card: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.10);
}

.bg-laser{background: radial-gradient(1200px 600px at 20% 10%, rgba(24,243,255,.10), transparent 60%),
                          radial-gradient(900px 500px at 80% 30%, rgba(255,59,212,.08), transparent 55%),
                          linear-gradient(180deg, var(--bg0), var(--bg1)); min-height:100vh;}
.nav-glass{background: rgba(8,12,18,.65); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08);}
.laser-brand{letter-spacing:.3px;}
.btn-laser{
  --bs-btn-color:#0b0f14;
  --bs-btn-bg: var(--glow);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: #7bfffb;
  --bs-btn-hover-color:#081015;
  box-shadow: 0 0 18px rgba(24,243,255,.25), inset 0 0 0 1px rgba(255,255,255,.14);
  border-radius: 14px;
}
.card-laser{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
}
.card-laser::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(250px 60px at 20% 0%, rgba(24,243,255,.22), transparent 70%),
              radial-gradient(250px 60px at 80% 0%, rgba(255,59,212,.20), transparent 70%);
  opacity:.8; pointer-events:none;
}
.card-laser .card-body{position:relative;}
.hero{
  position:relative;
  padding: 5rem 0 2.5rem;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(closest-side at 40% 20%, rgba(0,0,0,1), rgba(0,0,0,0));
  opacity:.35;
  pointer-events:none;
}
.hero h1{
  font-weight: 800;
  letter-spacing: -.5px;
}
.laser-sweep{
  position:relative;
  display:inline-block;
}
.laser-sweep::after{
  content:"";
  position:absolute; left:-10%; top:0; width:20%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(24,243,255,.55), transparent);
  filter: blur(2px);
  transform: skewX(-18deg);
  animation: sweep 2.8s ease-in-out infinite;
}
@keyframes sweep{
  0%{left:-20%; opacity:0}
  15%{opacity:1}
  55%{left:110%; opacity:.85}
  100%{left:110%; opacity:0}
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 5px
  );
  opacity:.08;
}
.section-pad{padding: 3.5rem 0;}
.badge-soft{background: rgba(24,243,255,.12); border:1px solid rgba(24,243,255,.22); color:#bffcff;}
.fade-up{opacity:0; transform: translateY(14px); transition: all .7s ease;}
.fade-up.in{opacity:1; transform: translateY(0);}
.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius: 14px;
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.08);
  border-color: rgba(24,243,255,.6);
  box-shadow: 0 0 0 .25rem rgba(24,243,255,.12);
  color:#fff;
}
.table-darkish{
  --bs-table-bg: rgba(255,255,255,.04);
  --bs-table-border-color: rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
}
.small-muted{color: rgba(255,255,255,.65);}

.fw-bold {
  color: #00ffea;
}

.legal .legal-content{
  max-width: 980px;
  margin: 0 auto;
}

.legal .legal-content p,
.legal .legal-content li{
  line-height: 1.7;
}

.legal .legal-content h2{
  margin-top: 1.6rem;
}

/* =========================
   COOKIE CONSENT (LASER UI)
   ========================= */

.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(10,10,12,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1rem;

  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.cookie-banner[hidden]{
  display: none !important;
}

.cookie-text{
  color: rgba(255,255,255,0.88);
  font-size: 0.95rem;
  line-height: 1.35;
}

.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; }
}

/* Modal Overlay */
.cookie-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;

  display: none;
  padding: 1.25rem;

  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}

.cookie-modal.open{
  display: grid !important;
  place-items: center !important;
}

.cookie-modal-card{
  width: min(720px, 100%);
  border-radius: 18px;
}

/* kleine Animation */
.cookie-banner,
.cookie-modal-card{
  animation: ccPop .18s ease-out;
}

@keyframes ccPop{
  from { transform: translateY(8px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Produkt-Filter Select Dark Mode */
form .form-select{
  background: rgba(20,20,22,0.95) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(6px);
}

form .form-select:focus{
  border-color: #ff3c00 !important; /* dein Laser-Akzent */
  box-shadow: 0 0 0 .2rem rgba(255,60,0,.25) !important;
}

/* Dropdown-Liste */
form .form-select option{
  background: #111 !important;
  color: #fff !important;
}
/* Cart: Notizfeld mobil besser bedienbar */
.cart-note{
  min-height: 44px;          /* Fingergröße */
  resize: vertical;          /* User kann größer ziehen */
  touch-action: manipulation;
}

/* In Tables: Inputs/textarea nicht zu klein */
.table td .form-control{
  min-width: 140px;
}

/* Mobile: Tabelle soll nicht winzig werden -> Notizfeld breiter */
@media (max-width: 768px){
  .table-responsive{
    -webkit-overflow-scrolling: touch;
  }
  .cart-note{
    min-height: 90px;        /* deutlich besser tippen */
    font-size: 16px;         /* verhindert iOS Zoom */
    line-height: 1.35;
    padding: .75rem;
  }
}
.req{
  color:#ff3b3b;       /* dein Laser-Rot */
  font-weight:600;
  margin-left:4px;
}
.card-laser .form-label{
  color: #ffffff;   /* Labels weiß */
}

.card-laser .small-muted{
  color: #bfbfbf;   /* Untertexte etwas heller */
}