/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════
   LM-Tech Kassensystem — Design System
   Basiert auf dem LM-Tech Website-Design
   Navy-Blau + Cyan · Professionell · Deutsch
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Next.js Dev-Tools-Indikator (unten links) — für Kunden ausblenden */
nextjs-portal { display: none !important; }

/* ── CSS-Variablen ──────────────────────────────────────────── */
:root {
  /* Hintergründe — Navy-Blau wie LM-Tech Website */
  --bg:         #0D1B2A;
  --bg2:        #0F2137;
  --card:       #162535;
  --surface:    #1A2E42;
  --border:     #1E3448;
  --border2:    #243D55;

  /* Akzent — Cyan wie LM-Tech Website */
  --cyan:       #00D4FF;
  --cyan-dark:  #00A8CC;
  --cyan-glow:  rgba(0, 212, 255, 0.12);
  --cyan-glow2: rgba(0, 212, 255, 0.25);

  /* Text */
  --text:       #FFFFFF;
  --text2:      #8BA4B8;
  --text3:      #4A6880;

  /* Status */
  --green:      #00C896;
  --green-glow: rgba(0, 200, 150, 0.12);
  --amber:      #FFB800;
  --amber-glow: rgba(255, 184, 0, 0.12);
  --red:        #FF4757;
  --red-glow:   rgba(255, 71, 87, 0.12);

  /* Kompatibilität mit bestehendem Code */
  --purple:     #00D4FF;
  --teal:       #00C896;

  /* Typografie */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  /* Schatten */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-cyan: 0 0 24px rgba(0,212,255,0.15);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Die App nutzt fast überall feste px-Werte statt rem — eine Erhöhung von
     font-size allein würde daher kaum etwas vergrößern. zoom skaliert
     stattdessen die gesamte gerenderte Seite gleichmäßig (wie Browser-Zoom),
     damit Text/Icons/Abstände überall spürbar größer und besser lesbar sind. */
  zoom: 1.15;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typografie ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dark); }

/* ── Inputs ─────────────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font-body);
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--r-md);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow2);
}
input::-moz-placeholder, textarea::-moz-placeholder { color: var(--text3); }
input::placeholder, textarea::placeholder { color: var(--text3); }

/* ── Buttons ────────────────────────────────────────────────── */
button {
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
button:active { transform: scale(0.97); }

/* ── LM-Tech Komponenten ────────────────────────────────────── */

/* Primärer Cyan-Button (wie "ZAHLEN" auf Website) */
.btn-primary {
  background: var(--cyan);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,212,255,0.3);
  transition: all 0.15s;
}
.btn-primary:hover { background: var(--cyan-dark); box-shadow: 0 6px 20px rgba(0,212,255,0.4); }
.btn-primary:active { transform: scale(0.97); }

/* Sekundärer Button (wie "STORNO" auf Website) */
.btn-secondary {
  background: var(--surface);
  color: var(--text2);
  font-weight: 600;
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
  padding: 12px 20px;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.btn-secondary:hover { background: var(--card); color: var(--text); border-color: var(--cyan); }

/* Karte / Card */
.lmt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color 0.2s;
}
.lmt-card:hover { border-color: var(--border2); }
.lmt-card.active { border-color: var(--cyan); background: var(--cyan-glow); }

/* Cyan-Badge (wie "DEUTSCHES KASSENSYSTEM" auf Website) */
.lmt-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.25);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lmt-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

/* Stat-Karte (wie "500+ KUNDEN" auf Website) */
.lmt-stat {
  padding: 20px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--cyan);
  background: var(--card);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.lmt-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.lmt-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
}

/* KPI-Karte */
.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  border-left: 3px solid var(--cyan);
}
.kpi-value { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--cyan); }
.kpi-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; }

/* Navigations-Item aktiv */
.nav-active {
  background: var(--cyan-glow);
  border-left: 3px solid var(--cyan) !important;
  color: var(--text) !important;
}

/* Tabellen-Header */
.tbl-header {
  background: var(--bg2);
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

/* Status-Punkte */
.dot-online   { width:8px;height:8px;border-radius:50%;background:var(--green); display:inline-block; }
.dot-offline  { width:8px;height:8px;border-radius:50%;background:var(--red);   display:inline-block; }
.dot-warning  { width:8px;height:8px;border-radius:50%;background:var(--amber); display:inline-block; }

/* Cyan-Glow-Effekt für aktive Elemente */
.cyan-glow { box-shadow: var(--shadow-cyan); }

/* Mono-Font für Preise/Zahlen */
.mono { font-family: var(--font-mono); }

/* ── Responsive ─────────────────────────────────────────────── */
.grid-auto-sm { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.grid-auto-md { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* POS Produkt-Grid */
.pos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
@media(max-width:640px)  { .pos-grid { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:7px; } }
@media(min-width:1400px) { .pos-grid { grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); } }

/* Warenkorb Panel */
.cart-panel { width:290px; flex-shrink:0; }
@media(max-width:1024px) { .cart-panel { width:240px; } }
@media(max-width:640px)  { .cart-panel { display:none; } }

/* Modal als Sheet auf Mobile */
.modal-sheet {
  background:var(--surface); border-radius:var(--r-xl); padding:24px;
  width:100%; max-width:520px; border:1px solid var(--border);
  max-height:92vh; overflow-y:auto;
}
@media(max-width:640px) {
  .modal-sheet {
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    position:fixed; bottom:0; left:0; right:0;
    max-width:100%; max-height:90vh;
  }
}

/* Admin-Grid */
.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:768px) { .admin-grid { grid-template-columns:1fr; } }

/* Mobile */
@media(max-width:640px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-2 { grid-template-columns:1fr; }
  ::-webkit-scrollbar { width:3px; height:3px; }
  .page-content { padding-bottom:70px; }
}

/* Safe Area iPhone */
.safe-bottom { padding-bottom:env(safe-area-inset-bottom); }

/* ── Animationen ────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}
@keyframes slideUp {
  from { transform:translateY(100%); }
  to   { transform:translateY(0); }
}
@keyframes pulse-cyan {
  0%,100% { box-shadow:0 0 0 0 rgba(0,212,255,0.3); }
  50%      { box-shadow:0 0 0 8px rgba(0,212,255,0); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200%  0; }
}

.animate-in   { animation:fadeIn 0.3s ease both; }
.pulse-cyan   { animation:pulse-cyan 2s infinite; }

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--surface) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-md);
}

/* ── Hover states ───────────────────────────────────────────── */
@media(hover:hover) {
  .hover-cyan:hover { border-color:var(--cyan) !important; }
  .hover-lift:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
}

/* Touch */
@media(hover:none) { button:active { opacity:0.75; } }

/* Landscape Mobile */
@media(max-width:896px) and (orientation:landscape) {
  .pos-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}