:root{
  --hero-image:url("./assets/konsumtracker-hintergrund.png") !important;
  --bg:#020611 !important;
  --card:rgba(4,12,27,.82) !important;
  --text:#eef7ff !important;
  --muted:#9fb1c8 !important;
  --ink:#20e7ff !important;
  --ink-2:#a24cff !important;
  --ink-3:#d58aff !important;
  --ok:#16ef9b !important;
  --warn:#ffd166 !important;
  --danger:#ff5066 !important;
  --border:rgba(87,211,255,.28) !important;
  --soft-cyan:rgba(32,231,255,.09) !important;
  --soft-magenta:rgba(162,76,255,.10) !important;
  --shadow:0 20px 70px rgba(0,0,0,.44) !important;
}

html{
  width:100%;
  min-width:100%;
  min-height:100%;
  scroll-behavior:smooth;
  background-color:#020611;
  background-image:var(--hero-image);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
body{
  margin:0 !important;
  padding:18px !important;
  width:100% !important;
  min-width:100% !important;
  min-height:100vh !important;
  min-height:100svh !important;
  min-height:100dvh !important;
  background-color:#020611 !important;
  background-image:none !important;
  font-family:"Space Grotesk",Inter,system-ui,sans-serif !important;
  overflow-x:clip !important;
  isolation:isolate;
}
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  background-color:#020611 !important;
  background-image:var(--hero-image) !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  pointer-events:none !important;
  z-index:-2 !important;
}
body::after{
  background:
    linear-gradient(rgba(32,231,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,231,255,.018) 1px,transparent 1px) !important;
  background-size:40px 40px !important;
}
.glow-layer{opacity:.18 !important}

.container{
  width:min(1800px,100%) !important;
  max-width:none !important;
  margin-inline:auto !important;
  padding:24px !important;
  border-radius:20px !important;
  border:1px solid var(--border) !important;
  background:transparent !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:none !important;
}
.container::before{
  left:24px !important;
  right:24px !important;
  background:linear-gradient(90deg,var(--ink),var(--ink-2),transparent) !important;
}

h1{
  background:linear-gradient(90deg,var(--ink) 0 32%,#f4f8ff 52%,#f4f8ff 100%) !important;
  -webkit-background-clip:text !important;
  font-size:clamp(1.45rem,3vw,2.6rem) !important;
  letter-spacing:.04em !important;
  text-align:left !important;
  text-shadow:none !important;
}
h2{
  color:#b8c6d8 !important;
  text-align:left !important;
  font-size:.78rem !important;
  letter-spacing:.16em !important;
}
h3{color:#dfeaff}
p,.hint,.medical-note,.qr-hint{color:var(--muted)}

.hero-panel{
  border-radius:16px !important;
  border:1px solid var(--border) !important;
  background:linear-gradient(100deg,rgba(4,15,34,.92),rgba(5,12,28,.76)) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.34) !important;
}
.hero-brand img{
  border-radius:12px !important;
  padding:6px !important;
  background:rgba(20,9,53,.62) !important;
  border:1px solid rgba(162,76,255,.42) !important;
}
.hero-brand-copy span,.hero-kicker,.offline-logo{color:var(--ink) !important}
.hero-brand-copy strong{font-size:clamp(1.15rem,2vw,1.7rem) !important}

button,.btn{
  border-radius:10px !important;
  border:1px solid rgba(32,231,255,.42) !important;
  background:linear-gradient(90deg,var(--ink),#78f7ff) !important;
  color:#00121a !important;
  font-weight:800 !important;
  box-shadow:none !important;
  transition:transform .18s ease,border-color .18s ease,filter .18s ease !important;
}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.secondary{
  border-color:rgba(162,76,255,.56) !important;
  background:linear-gradient(90deg,var(--ink-2),#d25fff) !important;
  color:#fff !important;
}
.btn.ghost,.close,.nav-chip{
  background:rgba(4,12,28,.72) !important;
  color:var(--text) !important;
  border:1px solid rgba(162,76,255,.45) !important;
}

.grid,.summary-grid,.timer-grid{gap:12px !important}
.chip,.summary-card,.timer-card,.qr-block,.first-aid-main,
.medical-panel,.debug-kv{
  border-radius:14px !important;
  border:1px solid rgba(87,211,255,.22) !important;
  background:linear-gradient(180deg,rgba(5,17,38,.88),rgba(3,11,26,.78)) !important;
  box-shadow:none !important;
}
.chip,.summary-card,.timer-card,.settings{
  background:transparent !important;
  backdrop-filter:none !important;
}
#ghbOptions.settings{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding-inline:10px !important;
}
.chip:hover,.summary-card:hover{border-color:rgba(32,231,255,.58) !important}
.chip .title,.summary-card strong,.qr-title{color:var(--ink) !important}

input,select,textarea{
  border-radius:9px !important;
  border:1px solid rgba(150,183,220,.22) !important;
  background:rgba(0,5,16,.72) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  max-width:100% !important;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(32,231,255,.28) !important;
  border-color:var(--ink) !important;
}

table{
  border-color:rgba(87,211,255,.24) !important;
  background:rgba(1,8,19,.82) !important;
}
th{
  color:#d68cff !important;
  background:rgba(10,10,30,.96) !important;
  border-color:rgba(120,151,195,.22) !important;
}
td{border-color:rgba(120,151,195,.18) !important}
tbody tr:nth-child(even){background:rgba(32,231,255,.025)}

.modal{background:rgba(0,3,10,.84) !important;backdrop-filter:blur(10px)}
.modal-card,.medical-card{
  border-radius:18px !important;
  border:1px solid rgba(87,211,255,.30) !important;
  background:linear-gradient(180deg,rgba(5,15,34,.98),rgba(2,8,20,.98)) !important;
  box-shadow:0 28px 100px rgba(0,0,0,.66) !important;
}
#medicalFirstPage{
  background:var(--hero-image) center/cover fixed !important;
}
.medical-shell,.medical-grid{
  background:transparent !important;
}
.medical-card{
  width:min(1400px,96vw) !important;
  max-width:1400px !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.medical-card::before{display:none !important}
.medical-panel{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.medical-kicker{color:var(--ink) !important}
.medical-lock-badge{
  color:#d9b8ff !important;
  border-color:rgba(162,76,255,.48) !important;
  background:rgba(90,30,150,.14) !important;
}
.medical-gdpr-box{
  border-color:rgba(162,76,255,.34) !important;
  background:rgba(72,24,122,.10) !important;
}
.medical-consent-short{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0;
  padding:10px 0;
}
#medicalConsentModal{
  z-index:10050 !important;
  background:rgba(0,3,10,.76) !important;
  backdrop-filter:blur(10px) !important;
}
#medicalConsentModal .medical-consent-modal-card{
  width:min(780px,94vw) !important;
  max-width:780px !important;
  max-height:min(820px,92vh) !important;
  overflow:auto !important;
  background:linear-gradient(180deg,rgba(5,15,34,.98),rgba(2,8,20,.98)) !important;
  border:1px solid rgba(162,76,255,.58) !important;
  box-shadow:0 28px 100px rgba(0,0,0,.76) !important;
  backdrop-filter:blur(18px) !important;
}
.medical-consent-copy{
  display:grid;
  gap:12px;
  margin:18px 0;
}
.medical-consent-copy section{
  padding:14px 16px;
  border:1px solid rgba(87,211,255,.20);
  border-radius:12px;
  background:rgba(4,12,28,.58);
}
.medical-consent-copy strong{color:#d68cff}
.medical-consent-copy p{margin:8px 0 0;line-height:1.55}
.medical-consent-confirm{
  padding:14px 16px !important;
  border:1px solid rgba(255,209,102,.42);
  border-radius:12px;
  background:rgba(255,209,102,.07);
}
#medicalConsentAccept:disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:grayscale(.8);
}
.danger,.warning,.timer-warning,.medical-error.show{
  border-color:rgba(255,80,102,.52) !important;
  background:rgba(255,80,102,.09) !important;
  color:#ffd8de !important;
}
.ok,.status-ok{color:var(--ok) !important}
.timer-value,.timer-countdown{color:var(--ink) !important}
#medicalActionStatus[data-status="ok"]{
  border-color:rgba(60,255,155,.42) !important;
  color:#bfffdc !important;
}
#medicalActionStatus[data-status="error"]{
  border-color:rgba(255,75,110,.52) !important;
  color:#ffd0d9 !important;
}

.offline-footer{
  max-width:1500px !important;
  margin:14px auto 0 !important;
  border-radius:14px !important;
  border:1px solid rgba(87,211,255,.18) !important;
  background:rgba(3,11,26,.80) !important;
  color:var(--muted) !important;
}
.legal-links a{color:#c787ff !important}

button,.btn,.close,.nav-chip,
input,select,textarea{
  min-height:44px;
}
button,.btn,.close,.nav-chip,a,input,select,textarea{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:760px){
  html{
    background-position:center !important;
    background-size:cover !important;
  }
  body{
    padding:0 !important;
  }
  body::before{
    background-position:center !important;
    background-size:cover !important;
  }
  .container{
    width:100% !important;
    min-height:100svh !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:
      max(14px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left)) !important;
    border-inline:0 !important;
    border-radius:0 !important;
  }
  .hero-panel{padding:16px !important}
  .hero-top{align-items:flex-start !important}
  .hero-actions{width:100%}
  .hero-actions .btn,.hero-actions .nav-chip{flex:1}
  h1{font-size:1.45rem !important}
  .modal-card,.medical-card{border-radius:14px !important}
  input,select,textarea{font-size:16px !important}
  .timer-actions{align-items:stretch !important}
  .timer-actions>.btn,
  .timer-actions>.timer-custom{
    flex:1 1 100% !important;
    width:100% !important;
  }
  #ghbOptions.settings{
    padding-inline:0 !important;
    border:0 !important;
  }
  .offline-footer{
    width:100% !important;
    margin:0 !important;
    padding:
      14px
      max(12px,env(safe-area-inset-right))
      max(16px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left)) !important;
    border-inline:0 !important;
    border-radius:0 !important;
  }
}
@media(min-width:761px) and (max-width:1180px){
  body{
    padding:
      max(14px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(18px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left)) !important;
  }
  .container{
    width:100% !important;
    padding:18px !important;
  }
  .hero-actions,.utility-actions,.timer-actions{
    flex-wrap:wrap !important;
  }
  input,select,textarea{font-size:16px !important}
}
@media(min-width:1181px){
  body{
    padding:clamp(22px,2.2vw,38px) !important;
  }
  .container{
    width:min(1480px,calc(100vw - 48px)) !important;
    padding:clamp(24px,2vw,34px) !important;
  }
  .hero-panel{
    padding:24px 28px !important;
  }
  .hero-copy{
    display:grid !important;
    grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr) !important;
    align-items:center !important;
    gap:28px !important;
  }
  .hero-copy .offline-logo{
    justify-content:flex-start !important;
  }
  .hero-copy p{
    text-align:left !important;
  }
  .utility-bar{
    margin-block:14px 18px !important;
  }
  .kpi{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    margin-top:18px !important;
  }
  .kpi .chip{
    min-width:0 !important;
    padding:16px 18px !important;
  }
  .row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
  }
  .timer-card{
    padding:20px !important;
  }
  .timer-actions{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    align-items:end !important;
  }
  .timer-actions>.btn,
  .timer-actions>.timer-custom{
    width:100% !important;
  }
  .timer-actions>.btn{
    min-height:48px !important;
  }
  .timer-status-grid{
    gap:14px !important;
  }
  .medical-shell{
    width:min(1400px,100%) !important;
  }
  .medical-card{
    width:100% !important;
    max-width:none !important;
    padding:clamp(24px,2vw,34px) !important;
  }
  .medical-grid{
    grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr) !important;
    gap:28px !important;
  }
}
@media(orientation:landscape) and (max-height:600px){
  html,body{min-height:100dvh !important}
  body{padding:0 !important}
  .container{
    width:100% !important;
    margin:0 !important;
    border-inline:0 !important;
    border-radius:0 !important;
    padding:
      max(10px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left)) !important;
  }
  .modal{
    padding:
      max(8px,env(safe-area-inset-top))
      max(10px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left)) !important;
  }
}
@media(hover:none),(pointer:coarse){
  button:hover,.btn:hover{transform:none !important}
  button,.btn,.close,.nav-chip{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  button,.btn{transition:none !important}
}