.tablet-mock{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;                 /* Rahmen-Dicke */
  border-radius: 34px;
  background: linear-gradient(180deg, #2b2b2b, #121212);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -10px 25px rgba(0,0,0,.45);
}

.tablet-inner{
 padding: 0;
background: linear-gradient(135deg, #fbf6ee 0%, #f3eadc 100%);
 border-radius: 24px;
   display: flex;
  flex-direction: column;
  gap: 12px;
}

#screen-info, #screen-streichpreise, .task-section, #screen-start, #screen-abschluss{
    width: 100%;
    max-width: 1280px;
    margin: auto;
}


/* optional: oben mittig Kamera-Punkt */
.tablet-mock .tablet-camera{
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3a84ff 0%, #0a0a0a 60%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  z-index:3;
}
/* Layout: tablet-inner als "App-Frame" mit Header/Content/Footer */


/* Browser-Bar (Mock) */
.browser-bar{
  border-radius: 16px 16px 0 0 ;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
}

.browser-tabstrip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.35);
}

.browser-tab{
  display:flex;
  align-items:center;
  gap:8px;
  height: 22px;
  min-width: 160px;
  padding: 0 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.tab-favicon{
  width: 10px; height: 10px;
  border-radius: 3px;
  background: rgba(0,0,0,.18);
}

.tab-title{
  flex:1;
  height: 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.10);
}

.tab-plus{
  width: 20px; height: 20px;
  border-radius: 8px;
  background: rgba(0,0,0,.08);
}

/* Toolbar */
.browser-toolbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
}

.tool-icons{
  display:flex;
  gap:6px;
  align-items:center;
}

.tool-icons.right{ margin-left:auto; }

.tool-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,.18);
}

.tool-ic{
  width: 18px; height: 18px;
  border-radius: 6px;
  background: rgba(0,0,0,.10);
}

.address-bar{
  flex:1;
  height: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 10px;
}

.lock{
  width: 10px; height: 10px;
  border-radius: 3px;
  background: rgba(0,0,0,.20);
}

.url-skeleton{
  flex:1;
  height: 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.10);
}

/* Content-Bereich in der Mitte soll wachsen */
.tablet-inner .row{
  flex: 1;
  margin: 0; /* Bootstrap row hat negative margins; wenn es stört, kannst du das lassen */
}

/* Taskbar */
.taskbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.taskbar-icons{
  display:flex;
  gap:8px;
  align-items:center;
}

.taskbar-icons.right{ margin-left:auto; }

.tb-ic{
  width: 26px; height: 26px;
  border-radius: 10px;
  background: rgba(0,0,0,.10);
}

/* Status-Chips (klickbar, aber wie Statusleiste) */
.taskbar-status{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}

.status-chip{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #ffd6d2;
  cursor: pointer;
}

.status-chip:hover{
  background: #ffa9a0;
}

.status-label{
  font-size: .75rem;
  color: rgba(0,0,0,.55);
}

.status-value{
  font-weight: 600;
  font-size: .85rem;
  color: rgba(0,0,0,.80);
}

/* responsive: Rand etwas schlanker */
@media (max-width: 768px){
  .tablet-mock{
    padding: 12px;
    border-radius: 26px;
  }
  .tablet-mock::before,
  .tablet-mock::after{
    inset: 8px;
    border-radius: 20px;
  }
  .tablet-mock > *{
    border-radius: 18px;
  }
}
/* rechte Spalte: untereinander + Abstand */
.widget-stack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Widget-Kachel */
.widget-tile{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.10);

  box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55);

  cursor: pointer;
  text-align: left;
  user-select: none;

  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

.widget-tile:hover{
  background: rgba(255,255,255,.92);
  box-shadow:
    0 12px 26px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
  transform: translateY(-1px);
}

.widget-tile:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* Fokus sichtbar (Keyboard) */
.widget-tile:focus-visible{
  outline: 3px solid rgba(0, 68, 138, .35);
  outline-offset: 2px;
}

/* Icon links */
.widget-ic{
  width: 42px;
  height: 42px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: rgba(0,0,0,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);

  font-size: 20px;
  line-height: 1;
}

/* Text rechts */
.widget-txt{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.widget-title{
  font-size: .75rem;
  color: rgba(0,0,0,.55);
}

.widget-value{
  font-weight: 700;
  font-size: .95rem;
  color: rgba(0,0,0,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-screen{
      background:
        radial-gradient(circle at 58% 38%,
          var(--c-info-2) 0%,
          var(--c-info-2) 46%,
          var(--c-info) 100%);
}

/* main.stage.shop { background-image: url(bg0.png);background-repeat: no-repeat; background-size: cover; background-position: center; }
main.stage.shop.regen { background-image: url(bg4.png)!important;background-repeat: no-repeat; background-size: cover; background-position: center;  }
main.stage.shop.morgens { background-image: url(bg0.png);background-repeat: no-repeat; background-size: cover; background-position: center; }
main.stage.shop.mittags {background-image: url(bg1.png);background-repeat: no-repeat; background-size: cover; background-position: center;  }
main.stage.shop.abends { background-image: url(bg2.png);background-repeat: no-repeat; background-size: cover; background-position: center; }
main.stage.shop.nachts { background-image: url(bg3.png);background-repeat: no-repeat; background-size: cover; background-position: center; } */

main.stage{
  position: relative;
  overflow: hidden;

  /* wichtig: alte background-image Regeln entfernen */
  background: none !important;
}

.stage-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg-layer{
  position: absolute;
  inset: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  opacity: 0;
  transition: opacity 450ms ease;
  will-change: opacity;
}

.bg-layer.is-active{
  opacity: 1;
}

main.stage > *:not(.stage-bg){
  position: relative;
  /* KEIN z-index hier! */
}

/* Stage-Background standardmäßig unsichtbar */
.stage-bg{
  opacity: 0;
  transition: opacity 300ms ease;
}

/* erst im Shop-Screen sichtbar */
main.stage.shop .stage-bg{
  opacity: 1;
}

.shop-cart {
    font-size: 51px;
    line-height: 1;
    /* padding: 6px 10px; */
    border-radius: 12px;
    /* background: rgba(0, 0, 0, .05); */
    /* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .08); */
    cursor: default;
    user-select: none;
}

.task-progress{
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.10);
  font-size: .85rem;
}

.btn-tip {
    background-color: var(--c-primary);
    color: #FFF;
}


.btn-tip:hover {
    background-color: #1d6eb8;
    color: #FFF;
}
.pricebox{
  padding-top: .25rem;
}

.pricebox-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.75rem;
}

.price-label{
  font-size:.8rem;
  color: rgba(0,0,0,.55);
}

.price-stack{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.price-old{
  font-size:.85rem;
  color: rgba(0,0,0,.45);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(220,53,69,.75); /* bootstrap danger tone */
}

.price-current{
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:.2px;
}

.pricebox-meta{
  margin-top:.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.lowest-price{
  font-size:.78rem;
  color: rgba(0,0,0,.55);
}

.discount-badge{
  background: rgba(25,135,84,.12);   /* success tint */
  color: #198754;                    /* bootstrap success */
  border: 1px solid rgba(25,135,84,.25);
  font-weight:700;
}
.task2-product { cursor: pointer; }
.task2-product:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.10); }
.task2-product { transition: transform .12s ease, box-shadow .12s ease; }
.cursor-pointer{cursor: pointer;}


/* Task 3 Highlight-State */
.dr-highlight {
  outline: 2px solid #dc3545;      /* Bootstrap danger */
  outline-offset: 4px;
  border-radius: 10px;
  transition: outline 0.2s ease, transform 0.15s ease;
}

.dr-highlight:hover {
  transform: scale(1.01);
}

/* Checklist Items */
.cl-item{
  text-align:left;
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  padding:.75rem .9rem;
  line-height:1.35;
  cursor:grab;
  user-select:none;
}
.cl-item:active{ cursor:grabbing; }
.cl-item.is-dragging{ opacity:.55; }

/* Clipboard Look */
.clipboard{
  background: linear-gradient(135deg, #fbf6ea 0%, #f5efdf 100%);
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  overflow:hidden;
}
.clipboard-top{
  position:relative;
  padding:1rem 1rem .75rem;
  border-bottom:1px solid rgba(0,0,0,.1);
}
.clipboard-top .clip{
  position:absolute;
  top:-12px; left:50%;
  transform:translateX(-50%);
  width:110px; height:34px;
  border-radius:12px 12px 14px 14px;
  background: #d9dde2;
  border:1px solid rgba(0,0,0,.18);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.clipboard-body{ padding:1rem; }

.cl-slots{ display:grid; gap:.5rem; }

.cl-slot{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:.65rem;
  align-items:start;
  padding:.25rem .5rem;
  border-radius:14px;
  background: rgba(255,255,255,.7);
  border:1px dashed rgba(0,0,0,.18);
  min-height:50px;
}
.cl-slot-label{
  width:34px; height:34px;
  border-radius:999px;
  display:flex;
  align-items:center; justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  font-weight:700;
}
.cl-slot-drop{ color: rgba(0,0,0,.45); padding-top:.15rem; }

.cl-slot.filled{
  border-style:solid;
  background:#fff;
}
.cl-slot.filled .cl-slot-drop{ color: #111827; }

/* Drop Hover */
.cl-slot.is-over,
[data-cl-pool].is-over{
  outline:2px solid #dc3545;
  outline-offset:3px;
  border-radius:14px;
}
.cl-item { touch-action: none; }

main.stage::before {
  transition: opacity .35s ease;
}
main.stage:not(.shop)::before {
  opacity: 0;
}
.euro{
  font-family: Arial, Helvetica, sans-serif;    font-size: 18px;
}

/* =========================
   Quiz-Antwort-Buttons: eigenes Klassen-System
   ========================= */
.btn-quiz-answer {
  background-color: #ffffff;
  border: 2px solid #000000;
  color: #000000 !important;
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-quiz-answer:hover:not(:disabled):not(.right):not(.wrong) {
  background-color: #aededa;
  border-color: #000000;
  color: #000000 !important;
}

.btn-quiz-answer.active:not(:disabled):not(.right):not(.wrong) {
  background-color: #9ad5ee;
  border-color: #000000;
  color: #000000 !important;
}

.btn-quiz-answer.right,
.btn-quiz-answer.right:hover,
.btn-quiz-answer.right:disabled {
  background-color: #00ab9d !important;
  border-color: #000000 !important;
  color: #000000 !important;
  opacity: 1;
}

.btn-quiz-answer.wrong,
.btn-quiz-answer.wrong:hover,
.btn-quiz-answer.wrong:disabled {
  background-color: #ff6f61 !important;
  border-color: #000000 !important;
  color: #000000 !important;
  opacity: 1;
}

.btn-quiz-answer:disabled,
.btn-quiz-answer.disabled {
  opacity: 1;
  pointer-events: none;
}
/* kleiner als 1280px */
@media (max-width: 1380px){
  .tablet-mock{
    max-width: 980px;
  }
}

#screen-streichpreise .card-body img {
    margin: auto;
    max-width: 90%;
    display: block;
}