:root{
  --led-on: rgba(255, 40, 40, .95);
  --led-dim: rgba(255, 40, 40, .18);
  --led-glow: rgba(255, 40, 40, .35);
  --panel-border: rgba(255,255,255,.14);
  --panel-bg1: rgba(0,0,0,.58);
  --panel-bg2: rgba(0,0,0,.18);
  --sec-border: rgba(255, 40, 40, .45);
  --text: rgba(255,255,255,.90);
  --muted: rgba(255,255,255,.65);
}

*{ box-sizing: border-box; }
.allergen-dashboard{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; 
}

.allergen-dashboard fieldset{
  position: relative;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,.04);
}

.allergen-dashboard fieldset:nth-of-type(1){
  background: rgba(255,0,0,.07);
  border-color: rgba(255,0,0,.07);
}
.allergen-dashboard fieldset:nth-of-type(2){
  background: rgba(255,165,0,.07);
  border-color: rgba(255,165,0,.07);
}
.allergen-dashboard fieldset:nth-of-type(3){
  background: rgba(255,255,0,.07);
  border-color: rgba(255,255,0,.07);
}
.allergen-dashboard fieldset:nth-of-type(4){
  background: rgba(106,90,205,.07);
  border-color: rgba(106,90,205,.07);
}

.allergen-dashboard fieldset::before{
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  bottom: 0;
  width: 6px;
  border-radius: 6px 0 0 6px;
  background: #666;
  padding-top: 8px;
}

.allergen-dashboard fieldset:nth-of-type(1)::before{ background: #ff4d4d; }
.allergen-dashboard fieldset:nth-of-type(2)::before{ background: #ffa500; }
.allergen-dashboard fieldset:nth-of-type(3)::before{ background: #f1c40f; }
.allergen-dashboard fieldset:nth-of-type(4)::before{ background: rgb(106, 90, 205); }

.allergen-dashboard legend{
  padding: 0 .6rem;
  font-weight: 600;
}

.allergen-dashboard fieldset ul{
  margin: .6rem 0 0;
  padding-left: 1.2rem;
}

.allergen-dashboard .stand{ text-align: right; }

.allergen-dashboard .count{
  text-align: center;
  font-size: 1.1rem;
  opacity: .85;
}

.allergen-dashboard img{
  display: block;
  max-width: 320px;
  margin: 1rem auto 0;
}

.next-wrap{ 
  width: min(1100px, 100%);
  z-index: 999;
  max-width: 520px;
  margin: 0 auto 14px;
}
.next-wrap svg{ 
  margin: auto;
}
.next-test__title{
  font-weight: 800;
  font-size: clamp(14px, 1.8vw, 18px);
  display: flex;
  gap: 10px;
  align-items: center;
}
.countdown-shell{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 0 10px; /* gegen Clipping */
}

.countdown-row{
  display: inline-flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
  transform-origin: center top;
  transform: scale(var(--cd-scale, 1));
  will-change: transform;
}
.cd-box{
  border-radius: 18px;
  padding: 16px 14px 12px;
  background:
    radial-gradient(220px 150px at 30% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--panel-bg1), var(--panel-bg2));
  border: 1px solid var(--panel-border);
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
  min-width: 140px;
}

.cd-box:first-child{
  margin-right: 1px;
}
.cd-box.is-sec{
  border-color: var(--sec-border);
  margin-left:1px;
  box-shadow:
    0 0 0 1px rgba(255,40,40,.22),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.cd-box.is-sec.blink-off .seg.on{
  opacity: .14 !important;
  filter: none !important;
}
.led{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 10px;
}
.digit{
  position: relative;
  width: 56px;
  height: 92px;
  --seg-thick: 8px;
  --seg-vlen: 30px;
}
.digit{
  position: relative;
  width: var(--digit-w, 34px);
  height: var(--digit-h, 56px);
  perspective: 600px;
}

.digit .face{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.digit .face.back{
  transform: rotateX(180deg);
}

.digit.is-flipping .face.front{
  animation: flipFront .34s ease-in-out;
}
.digit.is-flipping .face.back{
  animation: flipBack  .34s ease-in-out;
}

@keyframes flipFront{
  0%{ transform: rotateX(0deg); }
  100%{ transform: rotateX(-180deg); }
}
@keyframes flipBack{
  0%{ transform: rotateX(180deg); }
  100%{ transform: rotateX(0deg); }
}
.seg{
  position: absolute;
  background: var(--led-dim);
  border-radius: 999px;
  opacity: .95;
  transition: opacity .5s ease, filter .5s ease, background .5s ease;
  clip-path: polygon(
    10% 0%, 90% 0%,
    100% 50%,
    90% 100%, 10% 100%,
    0% 50%
  );
}
.seg.on{
  background: var(--led-on);
  filter:
    drop-shadow(0 0 10px var(--led-glow))
    drop-shadow(0 0 18px rgba(255,40,40,.25));
  opacity: 1;
}
.digit.is-dim .seg.on{
  background: var(--led-dim);
  filter: none;
  opacity: .45;
}
.seg.a, .seg.g, .seg.d{
  height: var(--seg-thick);
  left: 8px;
  right: 8px;
}
.seg.a{ top: 6px; }
.seg.d{ bottom: 6px; }
.seg.g{ top: 50%; transform: translateY(-50%); }

/* vertikale */
.seg.b, .seg.f{
  width: var(--seg-thick);
  height: var(--seg-vlen);
  top: 10px;
}
.seg.c, .seg.e{
  width: var(--seg-thick);
  height: var(--seg-vlen);
  bottom: 10px;
}

.seg.b, .seg.c{ right: 6px; }
.seg.f, .seg.e{ left: 6px; }

.cd-label{
  font-size: 16px;
  color: var(--muted);
}

@media (max-width: 720px){
  .countdown-row{ gap: 8px; }
  .cd-box{ min-width: 116px; padding: 14px 12px 10px; }
  .digit{ width: 48px; height: 80px; }
  .led{ gap: 12px; }
  .cd-label{ font-size: 14px; }
}

/* =========================
   Action Zone
   ========================= */
.action-zone{
  max-width: 520px;
  margin: 1rem auto;
  overflow: hidden;
  padding: .2rem;
  background: #fff;
  color:#000;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.action-zone img{
  width: 100%;
  max-width: 460px;
  display: block;
  margin: auto;
}
.alert-zone{
  max-width: 520px;
  margin: 1rem auto;
  color: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}

.alert-zone .cz-body{
  display: grid;
  grid-auto-columns: 1fr;
  gap: .2rem;
  background-color: #fff;
  align-items: center;
  color: #000;
  border: 12px solid #000;
}

.alert-zone .cz-img img{
  display:block;
  width: 100%;
  height: auto;
  border-bottom: 12px solid #000;
}

.alert-zone .cz-text h1{
  text-align: center;
  margin: 0 0 .35rem;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
}

.alert-zone .cz-text p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
}

/* =========================
   Warning Count
   ========================= */
.count--warning{
  padding: .4rem .4rem;
  border-radius: 12px;
  font-weight: 600;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,180,0,.18),
    rgba(255,180,0,.18) 10px,
    rgba(0,0,0,.2) 10px,
    rgba(0,0,0,.2) 20px
  );
  border: 1px solid rgba(255,180,0,.5);
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.count--warning span{
  display: inline-block;
  font-size: 1.2rem;
  padding: .1rem .5rem;
  border-radius: 100%;
  line-height: 1.8rem;
  background: rgba(255,180,0,.7);
  animation: pulse 4s infinite;
}

@keyframes pulse{
  0%{opacity:1}
  50%{opacity:.4}
  100%{opacity:1}
}

/* =========================
   Stand (Aktualisiert am...)
   ========================= */
.rk-stand{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.6rem;
  color:rgba(255,255,255,.88);
  font-family:system-ui, Segoe UI, Arial, sans-serif;
  font-size:.75rem;
  line-height:1;
  margin-bottom: 1.5rem;
}

.rk-stand-ico{
  width:28px;
  height:28px;
  flex:0 0 28px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

.rk-stand-text{
  white-space:nowrap;
  opacity:.92;
}
.allergen-grid-main{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  align-items: start; /* <<< SEHR wichtig */
}
.allergen-grid-bottom{
  margin-top: 1.5rem;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  justify-items: center;
}

.allergen-grid-bottom .bottom-card{
  max-width: 360px;
  width:100%;
}