:root{
  color-scheme:dark;
  --app-bg:#07111f;
  --app-bg-2:#0a1624;
  --app-surface:#0f1b2e;
  --app-surface-2:#0a1626;
  --app-surface-3:#12233a;
  --app-line:#23344d;
  --app-line-strong:#35516f;
  --app-text:#f6f8fb;
  --app-muted:#93a7c1;
  --app-accent:#36d67e;
  --app-accent-2:#44b6ff;
  --app-warn:#f5b942;
  --app-danger:#ff7078;
  --app-shadow:0 14px 35px rgba(0,0,0,.24);
  --app-card-shadow:0 8px 24px rgba(0,0,0,.18);
  --app-radius:18px;
  --app-radius-lg:24px;
  --app-input:#091525;
  --app-hover:#132942;
  --app-overlay:rgba(255,255,255,.035);
}

html[data-theme="light"]{
  color-scheme:light;
  --app-bg:#f3f6f9;
  --app-bg-2:#eaf0f5;
  --app-surface:#ffffff;
  --app-surface-2:#f8fafc;
  --app-surface-3:#eef3f7;
  --app-line:#d6e0e8;
  --app-line-strong:#b8c7d5;
  --app-text:#172230;
  --app-muted:#62748a;
  --app-accent:#169a58;
  --app-accent-2:#147cc1;
  --app-warn:#a76a00;
  --app-danger:#c83f49;
  --app-shadow:0 14px 35px rgba(43,60,78,.12);
  --app-card-shadow:0 7px 20px rgba(43,60,78,.09);
  --app-input:#ffffff;
  --app-hover:#edf4f8;
  --app-overlay:rgba(10,35,55,.025);
}

html[data-theme="dark"]{
  color-scheme:dark;
}

/* Global background and typography */
html,body{
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb,var(--app-accent-2) 12%, transparent), transparent 30%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb,var(--app-accent) 8%, transparent), transparent 28%),
    linear-gradient(180deg,var(--app-bg-2),var(--app-bg)) !important;
  color:var(--app-text) !important;
}
body{
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--app-accent-2)}
h1,h2,h3,strong{letter-spacing:-.015em}
.muted,.sub,.subtitle,.lead,.groupMeta,.focus,.reco,.planHint,.note{
  color:var(--app-muted) !important;
}

/* Main surfaces */
.panel,.card,.board,.fitnessBox,.healthItem,.group,.baseCard,
.item,.variant,.libraryClosed,.healthBanner,.levelResult,.levelInfo{
  background:var(--app-surface) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
  box-shadow:var(--app-card-shadow);
}
.board{box-shadow:var(--app-shadow)}
.tile,.muscleTile,.planTile{
  background:linear-gradient(145deg,var(--app-surface),var(--app-surface-2)) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
  box-shadow:var(--app-card-shadow);
}
.tile:hover,.muscleTile:hover,.planTile:hover{
  border-color:var(--app-line-strong) !important;
  transform:translateY(-1px);
}
.tile.training,.muscleTile.active{
  border-color:color-mix(in srgb,var(--app-accent) 55%,var(--app-line)) !important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--app-accent) 9%,var(--app-surface)),var(--app-surface-2)) !important;
}
.icon{
  background:color-mix(in srgb,var(--app-accent-2) 10%,var(--app-surface-3)) !important;
}
.tile.training .icon{
  background:color-mix(in srgb,var(--app-accent) 13%,var(--app-surface-3)) !important;
}

/* Inputs */
input,select,textarea{
  background:var(--app-input) !important;
  color:var(--app-text) !important;
  border-color:var(--app-line) !important;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--app-muted) 80%,transparent)}
input:focus,select:focus,textarea:focus{
  border-color:var(--app-accent-2) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent-2) 13%,transparent) !important;
}
option{
  background:var(--app-surface);
  color:var(--app-text);
}

/* Buttons */
button,.btn,.logout,.smallBtn,.manageExercisesBtn,.add{
  transition:.15s ease;
}
.logout,.smallBtn,.secondary,.manageExercisesBtn,.tab{
  background:var(--app-surface-3) !important;
  color:var(--app-text) !important;
  border-color:var(--app-line) !important;
}
.logout:hover,.smallBtn:hover,.secondary:hover,.manageExercisesBtn:hover,.tab:hover{
  background:var(--app-hover) !important;
  border-color:var(--app-line-strong) !important;
}
.save,.add{
  background:linear-gradient(135deg,var(--app-accent),color-mix(in srgb,var(--app-accent) 72%,white)) !important;
  color:#04130c !important;
}
.danger{color:var(--app-danger) !important}
.tab.active{
  background:color-mix(in srgb,var(--app-accent) 12%,var(--app-surface)) !important;
  border-color:var(--app-accent) !important;
}

/* Health / warnings */
.healthStatus,.healthBanner,.levelInfo,.levelResult{
  background:color-mix(in srgb,var(--app-accent-2) 5%,var(--app-surface)) !important;
}
.healthBanner.warning,.exerciseHealthNote{
  background:color-mix(in srgb,var(--app-warn) 9%,var(--app-surface)) !important;
  border-color:color-mix(in srgb,var(--app-warn) 32%,var(--app-line)) !important;
  color:var(--app-text) !important;
}
.healthBanner.stop{
  background:color-mix(in srgb,var(--app-danger) 8%,var(--app-surface)) !important;
  border-color:color-mix(in srgb,var(--app-danger) 40%,var(--app-line)) !important;
}

/* Form choices */
.choice label{
  background:var(--app-surface-2) !important;
  border-color:var(--app-line) !important;
  color:var(--app-text) !important;
}
.choice input:checked+label{
  border-color:var(--app-accent) !important;
  background:color-mix(in srgb,var(--app-accent) 8%,var(--app-surface)) !important;
}

/* Compact premium top bar */
.appTopbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 0 14px;
}
.appBrand{
  display:flex;
  align-items:center;
  gap:10px;
}
.appBrandMark{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--app-accent-2),var(--app-accent));
  color:white;
  font-size:20px;
  box-shadow:var(--app-card-shadow);
}
.appThemeSelect{
  min-width:116px;
  height:40px !important;
  border-radius:12px !important;
  padding:0 10px !important;
  font-size:13px !important;
  font-weight:800;
}

/* Profile appearance card */
.appearanceRow{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:12px;
  align-items:center;
}
.appearanceInfo strong{display:block}
.appearanceInfo span{
  display:block;
  margin-top:3px;
  color:var(--app-muted);
  font-size:12px;
}
@media(max-width:620px){
  .appearanceRow{grid-template-columns:1fr}
  .appThemeSelect{width:100%}
}


/* =========================================================
   STUFE 2 – KRAFTSPORT / PERFORMANCE LOOK
   ========================================================= */

:root{
  --strength-glow:rgba(54,214,126,.16);
  --strength-glow-2:rgba(68,182,255,.14);
  --strength-grid:rgba(255,255,255,.028);
  --strength-stripe:rgba(255,255,255,.018);
  --strength-card-edge:rgba(255,255,255,.045);
  --strength-image-overlay:linear-gradient(
    180deg,
    rgba(5,10,18,.05) 0%,
    rgba(5,10,18,.18) 55%,
    rgba(5,10,18,.72) 100%
  );
}

html[data-theme="light"]{
  --strength-glow:rgba(22,154,88,.10);
  --strength-glow-2:rgba(20,124,193,.10);
  --strength-grid:rgba(20,40,60,.045);
  --strength-stripe:rgba(20,40,60,.022);
  --strength-card-edge:rgba(20,40,60,.055);
  --strength-image-overlay:linear-gradient(
    180deg,
    rgba(255,255,255,.02) 0%,
    rgba(255,255,255,.08) 58%,
    rgba(10,25,40,.52) 100%
  );
}

/* More athletic full-page backdrop */
html,body{
  background:
    radial-gradient(circle at 12% 4%, var(--strength-glow-2), transparent 26%),
    radial-gradient(circle at 88% 12%, var(--strength-glow), transparent 30%),
    linear-gradient(180deg,var(--app-bg-2),var(--app-bg)) !important;
  background-attachment:fixed !important;
}

body{
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    linear-gradient(var(--strength-grid) 1px, transparent 1px),
    linear-gradient(90deg,var(--strength-grid) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.18) 65%,transparent);
}

body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background:
    repeating-linear-gradient(
      132deg,
      transparent 0 20px,
      var(--strength-stripe) 20px 21px,
      transparent 21px 42px
    );
  transform:rotate(-1deg);
}

/* Wider main canvas feeling */
.wrap{
  position:relative;
  isolation:isolate;
}

/* Dashboard/header presence */
.top,
.appTopbar,
.header{
  position:relative;
}

.top::after,
.appTopbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--app-accent) 35%,var(--app-line)),
    color-mix(in srgb,var(--app-accent-2) 30%,var(--app-line)),
    transparent
  );
  opacity:.85;
}

/* More powerful cards */
.tile,.panel,.card,.board,.muscleTile,.planTile,.baseCard,.group,.fitnessBox,.healthItem{
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.tile::before,
.panel::before,
.card::before,
.muscleTile::before,
.planTile::before,
.baseCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(135deg,var(--strength-card-edge),transparent 34%);
  opacity:.85;
}

.tile::after,
.card::after,
.panel::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  pointer-events:none;
}

html[data-theme="light"] .tile::after,
html[data-theme="light"] .card::after,
html[data-theme="light"] .panel::after{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(20,40,60,.12),
    transparent
  );
}

.tile.training{
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    0 0 34px color-mix(in srgb,var(--app-accent) 7%,transparent);
}

.tile strong{
  position:relative;
  z-index:1;
  font-weight:900;
}

/* Strength-styled icons */
.icon,.appBrandMark,.muscleIcon{
  position:relative;
}
.icon::after,.appBrandMark::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}

.appBrandMark{
  box-shadow:
    0 8px 22px rgba(0,0,0,.18),
    0 0 20px color-mix(in srgb,var(--app-accent) 14%,transparent);
}

/* Exercise library – muscle group tiles */
.muscleGrid{
  gap:12px !important;
}

.muscleTile{
  min-height:102px !important;
  border-width:1px !important;
}

.muscleTile .muscleIcon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 12%,var(--app-surface-3)),
      var(--app-surface-3)
    );
  font-size:25px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent) 20%,var(--app-surface-3)),
      var(--app-surface-3)
    );
}

/* Professional image treatment */
.groupImage{
  position:relative;
  width:92px !important;
  height:92px !important;
  object-fit:cover !important;
  border-radius:18px !important;
  border:1px solid var(--app-line-strong) !important;
  background:
    linear-gradient(145deg,var(--app-surface-3),var(--app-surface-2));
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);
  filter:saturate(.95) contrast(1.04);
}

.groupHero{
  gap:16px !important;
  align-items:center !important;
}

.groupHero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 5% 50%,color-mix(in srgb,var(--app-accent-2) 7%,transparent),transparent 36%);
}

.baseCard{
  border-radius:16px !important;
}

.variant{
  border-radius:12px !important;
}

/* Training plan button gets a more purposeful CTA look */
.manageExercisesBtn{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 8%,var(--app-surface-3)),
      var(--app-surface-3)
    ) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.manageExercisesBtn::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--app-accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--app-accent) 60%,transparent);
}

/* Form section separation */
.card h2,
.panel h2{
  position:relative;
  padding-bottom:10px;
}

.card h2::after,
.panel h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--app-accent),var(--app-accent-2));
}

/* Buttons with slightly stronger gym feel */
.save,.add{
  box-shadow:
    0 8px 20px color-mix(in srgb,var(--app-accent) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.logout,.secondary,.manageExercisesBtn,.tab{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

/* Better visual depth for warning/status cards */
.healthBanner.warning,
.exerciseHealthNote{
  box-shadow:inset 3px 0 0 var(--app-warn);
}
.healthBanner.stop{
  box-shadow:inset 3px 0 0 var(--app-danger);
}

/* Light mode polish */
html[data-theme="light"] .tile,
html[data-theme="light"] .panel,
html[data-theme="light"] .card,
html[data-theme="light"] .board{
  box-shadow:
    0 12px 28px rgba(45,62,80,.09),
    0 1px 0 rgba(255,255,255,.8) inset;
}

html[data-theme="light"] .groupImage{
  box-shadow:
    0 8px 22px rgba(45,62,80,.12),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* Mobile: keep power look without clutter */
@media(max-width:620px){
  body::before{
    background-size:34px 34px;
    opacity:.72;
  }

  .groupImage{
    width:76px !important;
    height:76px !important;
    border-radius:15px !important;
  }

  .muscleTile{
    min-height:92px !important;
  }
}


/* =========================================================
   STUFE 2.1 – ECHTE GYM-HINTERGRÜNDE
   ========================================================= */

/* Dashboard – Gym Gesamtansicht */
html[data-theme="dark"] body.strengthDashboard{
  background:
    linear-gradient(
      180deg,
      rgba(3,10,18,.72) 0%,
      rgba(3,10,18,.80) 42%,
      rgba(3,10,18,.92) 100%
    ),
    url("assets/backgrounds/dashboard-gym.webp") center center / cover no-repeat fixed !important;
}

/* Trainingsplan – Freihantelbereich */
html[data-theme="dark"] body.strengthTraining{
  background:
    linear-gradient(
      180deg,
      rgba(3,9,16,.70) 0%,
      rgba(3,9,16,.82) 46%,
      rgba(3,9,16,.94) 100%
    ),
    url("assets/backgrounds/training-freeweights.webp") center center / cover no-repeat fixed !important;
}

/* Im Light Mode bleiben die Fotos sichtbar, werden aber stark aufgehellt,
   damit dunkle Schrift lesbar bleibt. */
html[data-theme="light"] body.strengthDashboard{
  background:
    linear-gradient(
      180deg,
      rgba(247,250,252,.72) 0%,
      rgba(247,250,252,.80) 48%,
      rgba(247,250,252,.92) 100%
    ),
    url("assets/backgrounds/dashboard-gym.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="light"] body.strengthTraining{
  background:
    linear-gradient(
      180deg,
      rgba(247,250,252,.74) 0%,
      rgba(247,250,252,.82) 48%,
      rgba(247,250,252,.94) 100%
    ),
    url("assets/backgrounds/training-freeweights.webp") center center / cover no-repeat fixed !important;
}

/* Auf Bildseiten ist die technische Grid-Struktur nur noch sehr dezent. */
body.strengthDashboard::before,
body.strengthTraining::before{
  opacity:.20;
}

/* Karten bekommen etwas stärkeren Glass-Effekt auf Foto-Hintergründen. */
body.strengthDashboard .tile,
body.strengthTraining .panel,
body.strengthTraining .card,
body.strengthTraining .muscleTile,
body.strengthTraining .baseCard{
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
}

html[data-theme="dark"] body.strengthDashboard .tile,
html[data-theme="dark"] body.strengthTraining .panel,
html[data-theme="dark"] body.strengthTraining .card,
html[data-theme="dark"] body.strengthTraining .muscleTile,
html[data-theme="dark"] body.strengthTraining .baseCard{
  background:rgba(8,20,34,.78) !important;
}

html[data-theme="light"] body.strengthDashboard .tile,
html[data-theme="light"] body.strengthTraining .panel,
html[data-theme="light"] body.strengthTraining .card,
html[data-theme="light"] body.strengthTraining .muscleTile,
html[data-theme="light"] body.strengthTraining .baseCard{
  background:rgba(255,255,255,.84) !important;
}

/* Begrüßung und Trainingskopf bleiben auf Fotos klar lesbar. */
html[data-theme="dark"] body.strengthDashboard h1,
html[data-theme="dark"] body.strengthDashboard .sub,
html[data-theme="dark"] body.strengthTraining h1,
html[data-theme="dark"] body.strengthTraining .appTopbar{
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}

/* Mobile Browser: fixed background kann auf iOS ruckeln.
   Deshalb dort scroll statt fixed. */
@media(max-width:820px){
  html[data-theme] body.strengthDashboard,
  html[data-theme] body.strengthTraining{
    background-attachment:scroll !important;
    background-position:center top !important;
  }
}


/* =========================================================
   STUFE 2.2 – LOGIN-HINTERGRUND
   ========================================================= */

html[data-theme="dark"] body.strengthLogin{
  background:
    linear-gradient(
      90deg,
      rgba(3,10,18,.88) 0%,
      rgba(3,10,18,.73) 38%,
      rgba(3,10,18,.45) 70%,
      rgba(3,10,18,.55) 100%
    ),
    url("assets/backgrounds/login-gym.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="light"] body.strengthLogin{
  background:
    linear-gradient(
      90deg,
      rgba(248,250,252,.93) 0%,
      rgba(248,250,252,.82) 42%,
      rgba(248,250,252,.55) 74%,
      rgba(248,250,252,.70) 100%
    ),
    url("assets/backgrounds/login-gym.webp") center center / cover no-repeat fixed !important;
}

body.strengthLogin::before{
  opacity:.10;
}

html[data-theme="dark"] body.strengthLogin .loginCard,
html[data-theme="dark"] body.strengthLogin form{
  background:rgba(8,20,34,.82) !important;
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
}

html[data-theme="light"] body.strengthLogin .loginCard,
html[data-theme="light"] body.strengthLogin form{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(16px) saturate(1.02);
  -webkit-backdrop-filter:blur(16px) saturate(1.02);
}

@media(max-width:820px){
  html[data-theme] body.strengthLogin{
    background-attachment:scroll !important;
    background-position:center top !important;
  }
}


/* =========================================================
   STUFE 2.3 – GLAS-ICONS
   ========================================================= */

:root{
  --glass-icon-bg:rgba(14,30,48,.46);
  --glass-icon-border:rgba(255,255,255,.14);
  --glass-icon-highlight:rgba(255,255,255,.16);
  --glass-icon-shadow:0 10px 28px rgba(0,0,0,.18);
}

html[data-theme="light"]{
  --glass-icon-bg:rgba(255,255,255,.56);
  --glass-icon-border:rgba(30,55,80,.14);
  --glass-icon-highlight:rgba(255,255,255,.82);
  --glass-icon-shadow:0 10px 24px rgba(45,62,80,.10);
}

/* Dashboard + Brand + Muscle icons */
.icon,
.appBrandMark,
.muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--glass-icon-bg) 88%,transparent),
      color-mix(in srgb,var(--glass-icon-bg) 66%,transparent)
    ) !important;
  border:1px solid var(--glass-icon-border) !important;
  box-shadow:
    var(--glass-icon-shadow),
    inset 0 1px 0 var(--glass-icon-highlight),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
}

/* Colored glass accents */
.tile.training .icon,
.muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent) 18%,rgba(12,28,42,.48)),
      color-mix(in srgb,var(--app-accent) 5%,rgba(12,28,42,.42))
    ) !important;
  border-color:color-mix(in srgb,var(--app-accent) 42%,var(--glass-icon-border)) !important;
  box-shadow:
    var(--glass-icon-shadow),
    0 0 22px color-mix(in srgb,var(--app-accent) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.tile:not(.training) .icon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 15%,rgba(12,28,42,.46)),
      color-mix(in srgb,var(--app-accent-2) 4%,rgba(12,28,42,.40))
    ) !important;
  border-color:color-mix(in srgb,var(--app-accent-2) 36%,var(--glass-icon-border)) !important;
}

/* Brand icon gets a subtle dual-color glass look */
.appBrandMark{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 26%,rgba(12,28,42,.48)),
      color-mix(in srgb,var(--app-accent) 22%,rgba(12,28,42,.42))
    ) !important;
  border-color:rgba(255,255,255,.18) !important;
}

/* Keep emoji/glyph crisp above glass */
.icon,
.appBrandMark,
.muscleIcon{
  isolation:isolate;
}
.icon > *,
.appBrandMark > *,
.muscleIcon > *{
  position:relative;
  z-index:2;
}

/* Soft specular highlight */
.icon::before,
.appBrandMark::before,
.muscleTile .muscleIcon::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 28%,
      transparent 54%
    );
  opacity:.72;
}

/* Slightly more premium icon borders on image-backed pages */
body.strengthDashboard .icon,
body.strengthTraining .muscleTile .muscleIcon,
body.strengthLogin .appBrandMark{
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    0 0 18px rgba(68,182,255,.08),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Light mode refinement */
html[data-theme="light"] .icon,
html[data-theme="light"] .appBrandMark,
html[data-theme="light"] .muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.48)
    ) !important;
}

/* Mobile: retain glass effect without over-blurring */
@media(max-width:620px){
  .icon,
  .appBrandMark,
  .muscleTile .muscleIcon{
    backdrop-filter:blur(11px) saturate(1.12);
    -webkit-backdrop-filter:blur(11px) saturate(1.12);
  }
}


/* =========================================================
   STUFE 2.4 – GLAS-ICONS NOCH TRANSPARENTER
   ========================================================= */

:root{
  --glass-icon-bg:rgba(14,30,48,.28);
  --glass-icon-border:rgba(255,255,255,.12);
  --glass-icon-highlight:rgba(255,255,255,.14);
  --glass-icon-shadow:0 10px 28px rgba(0,0,0,.14);
}

html[data-theme="light"]{
  --glass-icon-bg:rgba(255,255,255,.34);
  --glass-icon-border:rgba(30,55,80,.11);
  --glass-icon-highlight:rgba(255,255,255,.88);
  --glass-icon-shadow:0 10px 24px rgba(45,62,80,.08);
}

.icon,
.appBrandMark,
.muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--glass-icon-bg) 72%,transparent),
      color-mix(in srgb,var(--glass-icon-bg) 48%,transparent)
    ) !important;
  border:1px solid var(--glass-icon-border) !important;
  box-shadow:
    var(--glass-icon-shadow),
    inset 0 1px 0 var(--glass-icon-highlight),
    inset 0 -1px 0 rgba(255,255,255,.018) !important;
  backdrop-filter:blur(18px) saturate(1.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.16);
}

.tile.training .icon,
.muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent) 11%,rgba(12,28,42,.28)),
      color-mix(in srgb,var(--app-accent) 3%,rgba(12,28,42,.22))
    ) !important;
  border-color:color-mix(in srgb,var(--app-accent) 30%,var(--glass-icon-border)) !important;
  box-shadow:
    var(--glass-icon-shadow),
    0 0 18px color-mix(in srgb,var(--app-accent) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.tile:not(.training) .icon{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 10%,rgba(12,28,42,.28)),
      color-mix(in srgb,var(--app-accent-2) 3%,rgba(12,28,42,.22))
    ) !important;
  border-color:color-mix(in srgb,var(--app-accent-2) 28%,var(--glass-icon-border)) !important;
}

.appBrandMark{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--app-accent-2) 18%,rgba(12,28,42,.30)),
      color-mix(in srgb,var(--app-accent) 16%,rgba(12,28,42,.24))
    ) !important;
  border-color:rgba(255,255,255,.15) !important;
}

.icon::before,
.appBrandMark::before,
.muscleTile .muscleIcon::before{
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 26%,
      transparent 56%
    );
  opacity:.78;
}

html[data-theme="light"] .icon,
html[data-theme="light"] .appBrandMark,
html[data-theme="light"] .muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.28)
    ) !important;
}

@media(max-width:620px){
  .icon,
  .appBrandMark,
  .muscleTile .muscleIcon{
    backdrop-filter:blur(13px) saturate(1.1);
    -webkit-backdrop-filter:blur(13px) saturate(1.1);
  }
}


/* =========================================================
   STUFE 2.5 – ECHTER GLAS-LOOK FÜR ICONS
   ========================================================= */

/* Sehr transparente Glasflächen */
.icon,
.appBrandMark,
.muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.028)
    ) !important;

  border:1px solid rgba(255,255,255,.15) !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.018) !important;

  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}

/* Primär-Icon: nur noch ein sehr leichter grüner Schimmer */
.tile.training .icon,
.muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(53,214,129,.095),
      rgba(255,255,255,.025)
    ) !important;

  border-color:rgba(91,235,157,.26) !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.11),
    0 0 12px rgba(53,214,129,.075),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

/* Sekundär-Icon: leichter blauer Schimmer */
.tile:not(.training) .icon{
  background:
    linear-gradient(
      145deg,
      rgba(68,182,255,.085),
      rgba(255,255,255,.025)
    ) !important;

  border-color:rgba(92,194,255,.22) !important;
}

/* App-Brand ebenfalls wirklich gläsern */
.appBrandMark{
  background:
    linear-gradient(
      145deg,
      rgba(68,182,255,.09),
      rgba(53,214,129,.065),
      rgba(255,255,255,.025)
    ) !important;

  border-color:rgba(255,255,255,.17) !important;
}

/* Specular highlight – sehr fein */
.icon::before,
.appBrandMark::before,
.muscleTile .muscleIcon::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.13) 0%,
      rgba(255,255,255,.035) 27%,
      transparent 58%
    );

  opacity:.78;
}

/* Weniger dunkle Schatten auf Bildhintergründen */
body.strengthDashboard .icon,
body.strengthTraining .muscleTile .muscleIcon,
body.strengthLogin .appBrandMark{
  box-shadow:
    0 5px 16px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}

/* Light Mode: auch hier transparent statt milchig */
html[data-theme="light"] .icon,
html[data-theme="light"] .appBrandMark,
html[data-theme="light"] .muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.38),
      rgba(255,255,255,.16)
    ) !important;

  border-color:rgba(40,65,90,.12) !important;

  box-shadow:
    0 5px 16px rgba(40,60,80,.07),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* Active Light Mode */
html[data-theme="light"] .tile.training .icon,
html[data-theme="light"] .muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(53,214,129,.13),
      rgba(255,255,255,.18)
    ) !important;

  border-color:rgba(22,154,88,.22) !important;
}

/* Mobile */
@media(max-width:620px){
  .icon,
  .appBrandMark,
  .muscleTile .muscleIcon{
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }
}


/* =========================================================
   STUFE 2.6 – ECHTES GLAS BEI MUSKELGRUPPEN + ICONS
   ========================================================= */

/* Die Muskelgruppen-Karten selbst müssen transparenter werden,
   sonst kann das Icon keinen echten Glas-Effekt zeigen. */
html[data-theme="dark"] body.strengthTraining .muscleTile{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.50),
      rgba(8,20,34,.34)
    ) !important;

  border:1px solid rgba(140,185,225,.18) !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.035) !important;

  backdrop-filter:blur(12px) saturate(1.06);
  -webkit-backdrop-filter:blur(12px) saturate(1.06);
}

/* Hover / aktiv */
html[data-theme="dark"] body.strengthTraining .muscleTile:hover{
  background:
    linear-gradient(
      145deg,
      rgba(10,25,42,.56),
      rgba(8,20,34,.40)
    ) !important;

  border-color:rgba(115,200,255,.28) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile.active{
  background:
    linear-gradient(
      145deg,
      rgba(22,70,52,.40),
      rgba(8,20,34,.34)
    ) !important;

  border-color:rgba(75,230,145,.36) !important;
}

/* Echte transparente Glasfläche für die kleinen Icons */
html[data-theme="dark"] body.strengthTraining .muscleTile .muscleIcon{
  width:54px !important;
  height:54px !important;
  border-radius:16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105) 0%,
      rgba(255,255,255,.045) 45%,
      rgba(255,255,255,.018) 100%
    ) !important;

  border:1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;

  backdrop-filter:blur(18px) saturate(1.12) brightness(1.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.12) brightness(1.06);

  overflow:hidden;
}

/* Glanzkante oben links */
html[data-theme="dark"] body.strengthTraining .muscleTile .muscleIcon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 20%,
      transparent 46%
    ) !important;

  opacity:.72 !important;
}

/* feine Reflexion unten rechts */
html[data-theme="dark"] body.strengthTraining .muscleTile .muscleIcon::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  right:-10px;
  bottom:-12px;
  border-radius:50%;
  pointer-events:none;

  background:radial-gradient(
    circle,
    rgba(90,190,255,.14),
    transparent 70%
  );
}

/* Aktives Icon nur leicht grünlich, weiterhin transparent */
html[data-theme="dark"] body.strengthTraining .muscleTile.active .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(78,235,150,.13),
      rgba(255,255,255,.038)
    ) !important;

  border-color:rgba(95,240,165,.30) !important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.10),
    0 0 16px rgba(53,214,129,.08),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Text bleibt klar */
body.strengthTraining .muscleTile .muscleName{
  color:var(--app-text) !important;
  text-shadow:0 1px 5px rgba(0,0,0,.22);
}

/* Light Mode */
html[data-theme="light"] body.strengthTraining .muscleTile{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.62),
      rgba(255,255,255,.40)
    ) !important;

  border-color:rgba(45,85,120,.14) !important;
}

html[data-theme="light"] body.strengthTraining .muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.60),
      rgba(255,255,255,.25)
    ) !important;

  border-color:rgba(255,255,255,.72) !important;

  box-shadow:
    0 5px 18px rgba(40,60,80,.07),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* Mobil minimal kleiner */
@media(max-width:620px){
  html[data-theme] body.strengthTraining .muscleTile .muscleIcon{
    width:50px !important;
    height:50px !important;
    backdrop-filter:blur(14px) saturate(1.08);
    -webkit-backdrop-filter:blur(14px) saturate(1.08);
  }
}


/* =========================================================
   STUFE 2.7 – ECHTER GLASLOOK + SICHTBARER HINTERGRUND
   ========================================================= */

:root{
  --glass-panel-dark:rgba(8,20,34,.34);
  --glass-panel-dark-2:rgba(8,20,34,.24);
  --glass-border:rgba(255,255,255,.12);
  --glass-highlight:rgba(255,255,255,.08);
}

html[data-theme="light"]{
  --glass-panel-dark:rgba(255,255,255,.56);
  --glass-panel-dark-2:rgba(255,255,255,.42);
  --glass-border:rgba(30,55,80,.12);
  --glass-highlight:rgba(255,255,255,.72);
}

/* Hintergrundbilder stärker sichtbar machen */
html[data-theme="dark"] body.strengthDashboard{
  background:
    linear-gradient(180deg,rgba(3,10,18,.46),rgba(3,10,18,.64)),
    url("assets/backgrounds/dashboard-gym.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="dark"] body.strengthTraining{
  background:
    linear-gradient(180deg,rgba(3,9,16,.44),rgba(3,9,16,.64)),
    url("assets/backgrounds/training-freeweights.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="dark"] body.strengthLogin{
  background:
    linear-gradient(90deg,rgba(3,10,18,.62),rgba(3,10,18,.40)),
    url("assets/backgrounds/login-gym.webp") center center / cover no-repeat fixed !important;
}

/* Echte Glas-Panels */
body.strengthTraining .panel,
body.strengthTraining .card,
body.strengthTraining .group,
body.strengthTraining .baseCard,
body.strengthTraining .healthBanner,
body.strengthTraining .levelInfo,
body.strengthProfile .card,
body.strengthProfile .fitnessBox,
body.strengthProfile .healthItem,
body.strengthAdmin .panel,
body.strengthAdmin .item,
body.strengthDashboard .tile,
body.strengthLogin .loginCard{
  background:
    linear-gradient(145deg,var(--glass-panel-dark),var(--glass-panel-dark-2)) !important;
  border:1px solid var(--glass-border) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.16),
    inset 0 1px 0 var(--glass-highlight) !important;
}

/* Panel-Highlights dezenter */
body.strengthTraining .panel::after,
body.strengthProfile .card::after,
body.strengthDashboard .tile::after{
  opacity:.45 !important;
}

/* Trainings-Muskelgruppen noch gläserner */
html[data-theme="dark"] body.strengthTraining .muscleTile{
  background:
    linear-gradient(145deg,rgba(8,20,34,.28),rgba(8,20,34,.18)) !important;
  border:1px solid rgba(170,210,245,.14) !important;
  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.11),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile:hover{
  background:
    linear-gradient(145deg,rgba(10,24,40,.34),rgba(8,20,34,.22)) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile.active{
  background:
    linear-gradient(145deg,rgba(30,95,68,.24),rgba(8,20,34,.18)) !important;
  border-color:rgba(83,235,150,.30) !important;
}

/* Übungsbibliothek-Platzhalter transparenter */
body.strengthTraining .libraryClosed{
  background:rgba(18,38,60,.22) !important;
  border:1px dashed rgba(145,190,230,.18) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Cardio-Karten */
body.strengthTraining .cardioCard,
body.strengthTraining .cardioCards > *,
body.strengthTraining .cardioGrid > *{
  background:rgba(8,20,34,.26) !important;
  border-color:rgba(150,195,235,.14) !important;
  backdrop-filter:blur(16px) saturate(1.10);
  -webkit-backdrop-filter:blur(16px) saturate(1.10);
}

/* Inputs leicht gläsern */
body.strengthTraining input,
body.strengthTraining select,
body.strengthProfile input,
body.strengthProfile select,
body.strengthProfile textarea,
body.strengthLogin input,
body.strengthAdmin input,
body.strengthAdmin select,
body.strengthAdmin textarea{
  background:rgba(6,18,32,.46) !important;
  border-color:rgba(170,205,235,.14) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Light mode */
html[data-theme="light"] body.strengthTraining .panel,
html[data-theme="light"] body.strengthTraining .card,
html[data-theme="light"] body.strengthProfile .card,
html[data-theme="light"] body.strengthDashboard .tile,
html[data-theme="light"] body.strengthLogin .loginCard{
  background:
    linear-gradient(145deg,rgba(255,255,255,.64),rgba(255,255,255,.46)) !important;
}

/* Login zentriert und kompakt */
body.strengthLogin .loginWrap{
  min-height:100vh !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding:24px !important;
}

body.strengthLogin .loginCard{
  width:min(100%,480px) !important;
  margin:0 !important;
}

body.strengthLogin .loginIntro{
  display:none !important;
}

@media(max-width:820px){
  html[data-theme] body.strengthDashboard,
  html[data-theme] body.strengthTraining,
  html[data-theme] body.strengthLogin{
    background-attachment:scroll !important;
  }
}


/* =========================================================
   STUFE 2.8 – FULL GLASS / HINTERGRUND SICHTBAR
   ========================================================= */

:root{
  --full-glass-a:rgba(8,20,34,.20);
  --full-glass-b:rgba(8,20,34,.10);
  --full-glass-soft:rgba(10,24,40,.14);
  --full-glass-input:rgba(5,16,29,.22);
  --full-glass-border:rgba(255,255,255,.14);
  --full-glass-border-soft:rgba(180,215,245,.12);
  --full-glass-highlight:rgba(255,255,255,.10);
}

html[data-theme="light"]{
  --full-glass-a:rgba(255,255,255,.44);
  --full-glass-b:rgba(255,255,255,.24);
  --full-glass-soft:rgba(255,255,255,.30);
  --full-glass-input:rgba(255,255,255,.34);
  --full-glass-border:rgba(35,65,95,.12);
  --full-glass-border-soft:rgba(35,65,95,.10);
  --full-glass-highlight:rgba(255,255,255,.72);
}

/* ---------------------------------------------------------
   Background overlays: keep images visible
   --------------------------------------------------------- */

html[data-theme="dark"] body.strengthDashboard{
  background:
    linear-gradient(180deg,rgba(2,8,15,.26),rgba(2,8,15,.42)),
    url("assets/backgrounds/dashboard-gym.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="dark"] body.strengthTraining{
  background:
    linear-gradient(180deg,rgba(2,8,15,.24),rgba(2,8,15,.40)),
    url("assets/backgrounds/training-freeweights.webp") center center / cover no-repeat fixed !important;
}

html[data-theme="dark"] body.strengthLogin{
  background:
    linear-gradient(90deg,rgba(2,8,15,.36),rgba(2,8,15,.20)),
    url("assets/backgrounds/login-gym.webp") center center / cover no-repeat fixed !important;
}

/* ---------------------------------------------------------
   Login: only the actual login card
   --------------------------------------------------------- */

body.strengthLogin .wrap{
  min-height:100vh !important;
  max-width:none !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:24px !important;
}

body.strengthLogin .hero{
  display:none !important;
}

body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card{
  width:min(100%,500px) !important;
  min-height:auto !important;
  margin:0 !important;
  padding:30px !important;

  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.22),
      rgba(8,20,34,.10)
    ) !important;

  border:1px solid rgba(255,255,255,.16) !important;

  backdrop-filter:blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.14) !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* ---------------------------------------------------------
   Universal glass surfaces
   --------------------------------------------------------- */

body.strengthDashboard .tile,
body.strengthDashboard .board,

body.strengthTraining .timer,
body.strengthTraining .panel,
body.strengthTraining .group,
body.strengthTraining .baseCard,
body.strengthTraining .activeCard,
body.strengthTraining .variant,
body.strengthTraining .cardioCard,
body.strengthTraining .cardioCards > *,
body.strengthTraining .cardioGrid > *,
body.strengthTraining .planTile,
body.strengthTraining .libraryClosed,
body.strengthTraining .healthBanner,
body.strengthTraining .levelInfo,
body.strengthTraining .exerciseHealthNote,

body.strengthProfile .card,
body.strengthProfile .fitnessBox,
body.strengthProfile .healthItem,
body.strengthProfile .healthStatus,
body.strengthProfile .levelResult,

body.strengthAdmin .panel,
body.strengthAdmin .item,

body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card{
  background:
    linear-gradient(
      145deg,
      var(--full-glass-a),
      var(--full-glass-b)
    ) !important;

  border:1px solid var(--full-glass-border) !important;

  backdrop-filter:blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.12) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.12),
    inset 0 1px 0 var(--full-glass-highlight) !important;
}

/* Board / large wrappers even more transparent */
body.strengthDashboard .board,
body.strengthTraining .panel,
body.strengthProfile .card{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.16),
      rgba(8,20,34,.08)
    ) !important;
}

/* ---------------------------------------------------------
   Muscle groups
   --------------------------------------------------------- */

html[data-theme="dark"] body.strengthTraining .muscleTile{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.16),
      rgba(8,20,34,.07)
    ) !important;

  border:1px solid rgba(185,220,248,.13) !important;

  backdrop-filter:blur(18px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.10) !important;

  box-shadow:
    0 7px 20px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile:hover{
  background:
    linear-gradient(
      145deg,
      rgba(15,32,50,.20),
      rgba(8,20,34,.09)
    ) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile.active{
  background:
    linear-gradient(
      145deg,
      rgba(35,120,78,.18),
      rgba(8,20,34,.07)
    ) !important;
  border-color:rgba(78,235,150,.28) !important;
}

/* Icons: nearly floating glass */
html[data-theme="dark"] body.strengthTraining .muscleTile .muscleIcon,
body.strengthDashboard .icon,
body.strengthDashboard .appBrandMark,
body.strengthLogin .appBrandMark{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025)
    ) !important;

  border:1px solid rgba(255,255,255,.18) !important;

  backdrop-filter:blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.08) !important;

  box-shadow:
    0 5px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* ---------------------------------------------------------
   Inputs / selects / textareas: glass too
   --------------------------------------------------------- */

body.strengthTraining input,
body.strengthTraining select,
body.strengthTraining textarea,

body.strengthProfile input,
body.strengthProfile select,
body.strengthProfile textarea,

body.strengthAdmin input,
body.strengthAdmin select,
body.strengthAdmin textarea,

body.strengthLogin input{
  background:var(--full-glass-input) !important;
  border:1px solid var(--full-glass-border-soft) !important;
  color:var(--app-text) !important;

  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Buttons that cover larger areas: slightly transparent too */
body.strengthTraining .pause,
body.strengthTraining .reset,
body.strengthTraining .manageExercisesBtn,
body.strengthProfile .secondary,
body.strengthAdmin .tab,
body.strengthDashboard .logout{
  background:rgba(10,30,50,.30) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

/* Keep green action buttons readable */
body.strengthTraining .start,
body.strengthTraining .primary,
body.strengthProfile .save,
body.strengthLogin .btn{
  opacity:.94;
}

/* ---------------------------------------------------------
   Light mode glass
   --------------------------------------------------------- */

html[data-theme="light"] body.strengthDashboard .tile,
html[data-theme="light"] body.strengthDashboard .board,

html[data-theme="light"] body.strengthTraining .timer,
html[data-theme="light"] body.strengthTraining .panel,
html[data-theme="light"] body.strengthTraining .baseCard,
html[data-theme="light"] body.strengthTraining .activeCard,
html[data-theme="light"] body.strengthTraining .variant,
html[data-theme="light"] body.strengthTraining .cardioCard,
html[data-theme="light"] body.strengthTraining .planTile,

html[data-theme="light"] body.strengthProfile .card,
html[data-theme="light"] body.strengthProfile .fitnessBox,
html[data-theme="light"] body.strengthProfile .healthItem,

html[data-theme="light"] body.strengthAdmin .panel,
html[data-theme="light"] body.strengthAdmin .item,

html[data-theme="light"] body.strengthLogin .loginOnlyCard{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.50),
      rgba(255,255,255,.24)
    ) !important;
}

/* Mobile: no fixed background, still glass */
@media(max-width:820px){
  html[data-theme] body.strengthDashboard,
  html[data-theme] body.strengthTraining,
  html[data-theme] body.strengthLogin{
    background-attachment:scroll !important;
  }
}


/* =========================================================
   STUFE 2.9 – FULL PAGE GLASS
   Gesamte Trainingsseite transparent/gläsern
   ========================================================= */

/* Weniger dunkler Overlay, damit das Gymbild wirklich sichtbar bleibt */
html[data-theme="dark"] body.strengthTraining{
  background:
    linear-gradient(
      180deg,
      rgba(2,8,15,.18) 0%,
      rgba(2,8,15,.26) 48%,
      rgba(2,8,15,.34) 100%
    ),
    url("assets/backgrounds/training-freeweights.webp")
    center top / cover no-repeat fixed !important;
}

/* Hauptflächen */
body.strengthTraining .timer,
body.strengthTraining .panel,
body.strengthTraining .group,
body.strengthTraining .healthBanner,
body.strengthTraining .levelInfo{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.115),
      rgba(8,20,34,.055)
    ) !important;

  border:1px solid rgba(210,230,248,.13) !important;

  backdrop-filter:blur(16px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.12) !important;

  box-shadow:
    0 8px 26px rgba(0,0,0,.09),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
}

/* Alle inneren Karten */
body.strengthTraining .muscleTile,
body.strengthTraining .planTile,
body.strengthTraining .baseCard,
body.strengthTraining .activeCard,
body.strengthTraining .variant,
body.strengthTraining .cardioCard,
body.strengthTraining .cardioCards > *,
body.strengthTraining .cardioGrid > *,
body.strengthTraining .libraryClosed,
body.strengthTraining .tip,
body.strengthTraining .exerciseHealthNote{
  background:
    linear-gradient(
      145deg,
      rgba(10,24,40,.095),
      rgba(10,24,40,.035)
    ) !important;

  border-color:rgba(200,225,248,.11) !important;

  backdrop-filter:blur(14px) saturate(1.10) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.10) !important;

  box-shadow:
    0 6px 20px rgba(0,0,0,.065),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Übungsbibliothek Platzhalter besonders klar */
body.strengthTraining .libraryClosed{
  border-style:dashed !important;
  border-color:rgba(185,215,242,.14) !important;
}

/* Muskelgruppen noch transparenter */
html[data-theme="dark"] body.strengthTraining .muscleTile{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.085),
      rgba(8,20,34,.025)
    ) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile:hover{
  background:
    linear-gradient(
      145deg,
      rgba(15,34,54,.13),
      rgba(8,20,34,.045)
    ) !important;
}

html[data-theme="dark"] body.strengthTraining .muscleTile.active{
  background:
    linear-gradient(
      145deg,
      rgba(40,145,90,.15),
      rgba(8,20,34,.035)
    ) !important;
  border-color:rgba(90,238,160,.28) !important;
}

/* Icon-Flächen: echtes Glas */
html[data-theme="dark"] body.strengthTraining .muscleTile .muscleIcon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.025)
    ) !important;

  border:1px solid rgba(255,255,255,.18) !important;

  backdrop-filter:blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;

  box-shadow:
    0 5px 16px rgba(0,0,0,.075),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* Inputs, Selects, Textareas */
body.strengthTraining input,
body.strengthTraining select,
body.strengthTraining textarea{
  background:rgba(5,16,29,.14) !important;
  border:1px solid rgba(195,220,244,.11) !important;
  color:var(--app-text) !important;

  backdrop-filter:blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Button-Flächen ebenfalls transparenter */
body.strengthTraining .pause,
body.strengthTraining .reset,
body.strengthTraining .manageExercisesBtn,
body.strengthTraining .add,
body.strengthTraining .remove{
  background:rgba(9,28,47,.20) !important;
  border:1px solid rgba(255,255,255,.10) !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

/* Reset leicht rot, aber weiterhin Glas */
body.strengthTraining .reset,
body.strengthTraining .remove{
  background:rgba(90,20,35,.20) !important;
  color:#ffd8dc !important;
}

/* Start / Speichern dürfen als Primäraktion kräftiger bleiben */
body.strengthTraining .start,
body.strengthTraining .primary{
  background:
    linear-gradient(
      135deg,
      rgba(47,214,123,.92),
      rgba(104,238,169,.92)
    ) !important;
}

/* Badges ebenfalls kein dunkler Vollblock */
body.strengthTraining .badge,
body.strengthTraining .levelBadge{
  background:rgba(20,50,80,.17) !important;
  border:1px solid rgba(170,210,245,.10) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* Oberflächen-Highlights nicht zu milchig */
body.strengthTraining .panel::before,
body.strengthTraining .panel::after,
body.strengthTraining .baseCard::before,
body.strengthTraining .muscleTile::before{
  opacity:.28 !important;
}

/* Überschriften besser lesbar auf stark transparenten Panels */
body.strengthTraining h1,
body.strengthTraining h2,
body.strengthTraining h3,
body.strengthTraining strong,
body.strengthTraining label{
  text-shadow:0 1px 7px rgba(0,0,0,.24);
}

/* ---------------------------------------------------------
   Light Mode
   --------------------------------------------------------- */

html[data-theme="light"] body.strengthTraining{
  background:
    linear-gradient(
      180deg,
      rgba(248,250,252,.50),
      rgba(248,250,252,.68)
    ),
    url("assets/backgrounds/training-freeweights.webp")
    center top / cover no-repeat fixed !important;
}

html[data-theme="light"] body.strengthTraining .timer,
html[data-theme="light"] body.strengthTraining .panel,
html[data-theme="light"] body.strengthTraining .group,
html[data-theme="light"] body.strengthTraining .baseCard,
html[data-theme="light"] body.strengthTraining .activeCard,
html[data-theme="light"] body.strengthTraining .variant,
html[data-theme="light"] body.strengthTraining .cardioCard,
html[data-theme="light"] body.strengthTraining .muscleTile,
html[data-theme="light"] body.strengthTraining .planTile,
html[data-theme="light"] body.strengthTraining .libraryClosed{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.38),
      rgba(255,255,255,.18)
    ) !important;

  border-color:rgba(40,70,100,.10) !important;

  box-shadow:
    0 7px 20px rgba(35,55,75,.06),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}

/* iOS/Android */
@media(max-width:820px){
  html[data-theme] body.strengthTraining{
    background-attachment:scroll !important;
    background-position:center top !important;
  }

  body.strengthTraining .timer,
  body.strengthTraining .panel,
  body.strengthTraining .baseCard,
  body.strengthTraining .activeCard,
  body.strengthTraining .cardioCard,
  body.strengthTraining .muscleTile{
    backdrop-filter:blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
  }
}


/* =========================================================
   STUFE 3.0 – TRAININGSPLÄNE
   ========================================================= */

body.strengthTraining .planEditor,
body.strengthTraining .planExerciseRow{
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.10),
      rgba(8,20,34,.035)
    ) !important;
  border:1px solid rgba(200,225,248,.11) !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.strengthTraining .planAdd,
body.strengthTraining .planAction{
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

html[data-theme="light"] body.strengthTraining .planEditor,
html[data-theme="light"] body.strengthTraining .planExerciseRow{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.38),
      rgba(255,255,255,.16)
    ) !important;
  border-color:rgba(40,70,100,.10) !important;
}


/* =========================================================
   STUFE 3.1 – LETZTE TRAININGSWERTE
   ========================================================= */

body.strengthTraining .lastValue,
body.strengthTraining .lastTrainingBox{
  background:
    linear-gradient(
      145deg,
      rgba(25,85,125,.10),
      rgba(8,20,34,.035)
    ) !important;
  border-color:rgba(100,205,255,.14) !important;
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
}


/* =========================================================
   STUFE 3.2 – DATENSCHUTZ + PROFILBILD
   ========================================================= */
body.strengthProfile .privacyCard,
body.strengthProfile .profileImageActions button,
body.strengthProfile .profileImageActions label{
  background:linear-gradient(145deg,rgba(8,20,34,.11),rgba(8,20,34,.045)) !important;
  border-color:rgba(210,230,248,.12) !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
}
html[data-theme="light"] body.strengthProfile .privacyCard,
html[data-theme="light"] body.strengthProfile .profileImageActions button,
html[data-theme="light"] body.strengthProfile .profileImageActions label{
  background:linear-gradient(145deg,rgba(255,255,255,.40),rgba(255,255,255,.18)) !important;
}


/* =========================================================
   STUFE 3.3 – LINKS MIT ICONS
   ========================================================= */

.linkPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:9px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  color:var(--app-text);
  background:linear-gradient(145deg,rgba(8,20,34,.13),rgba(8,20,34,.05)) !important;
  border:1px solid rgba(210,230,248,.12);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  box-shadow:0 8px 24px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.linkPill:hover{
  transform:translateY(-1px);
  border-color:rgba(120,215,255,.20);
}
.linkPillIcon{
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:14px;
  line-height:1;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.linkPillText{
  display:inline-block;
}
.linkStack{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.linkInlineCenter{
  text-align:center;
  margin-top:14px;
}
.linkDanger{
  color:#ffdce0;
  border-color:rgba(255,120,140,.18);
  background:linear-gradient(145deg,rgba(90,20,35,.18),rgba(50,12,20,.07)) !important;
}
.linkDanger .linkPillIcon{
  border-color:rgba(255,180,190,.18);
}
html[data-theme="light"] .linkPill{
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.18)) !important;
  border-color:rgba(40,70,100,.10);
  color:#15324d;
}
html[data-theme="light"] .linkPillIcon{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,255,255,.40));
  border-color:rgba(40,70,100,.12);
}


/* =========================================================
   STUFE 3.4 – ECHTE SVG-ICONS + APP/PWA ICON
   ========================================================= */

.linkPillIcon img{
  width:15px;
  height:15px;
  display:block;
  object-fit:contain;
}

.linkPillIcon img,
.inlineActionIcon{
  filter:none;
}

.inlineActionIcon{
  width:17px;
  height:17px;
  display:inline-block;
  vertical-align:middle;
  margin-right:7px;
}

html[data-theme="dark"] .linkPillIcon img,
html[data-theme="dark"] .inlineActionIcon{
  filter:brightness(0) invert(1);
  opacity:.92;
}

html[data-theme="light"] .linkPillIcon img,
html[data-theme="light"] .inlineActionIcon{
  filter:none;
  opacity:.82;
}


/* =========================================================
   STUFE 3.5 – AUTOMATISCHE PROGRESSION
   ========================================================= */

body.strengthTraining .progressionHint,
body.strengthTraining .progressionChip{
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
}

body.strengthTraining .progressionHint.up,
body.strengthTraining .progressionChip.up{
  background:
    linear-gradient(
      145deg,
      rgba(35,150,90,.13),
      rgba(8,20,34,.035)
    ) !important;
}

body.strengthTraining .progressionHint.check,
body.strengthTraining .progressionChip.check{
  background:
    linear-gradient(
      145deg,
      rgba(155,95,25,.12),
      rgba(8,20,34,.035)
    ) !important;
}


/* =========================================================
   STUFE 3.6 – ADMIN EDITOR
   ========================================================= */
body.strengthAdmin .editBar,
body.strengthAdmin .editBtn,
body.strengthAdmin .cancelBtn{
  backdrop-filter:blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08) !important;
}
body.strengthAdmin .editBar{
  background:linear-gradient(145deg,rgba(35,145,85,.11),rgba(8,20,34,.035)) !important;
}
body.strengthAdmin .editBtn{
  background:linear-gradient(145deg,rgba(35,110,160,.12),rgba(8,20,34,.035)) !important;
}


/* =========================================================
   STUFE 3.7 – VARIANTEN-ACCORDION
   ========================================================= */

body.strengthTraining .baseToggle{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    ) !important;
  border-color:rgba(210,230,248,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.strengthTraining .baseCard.open{
  border-color:rgba(100,205,255,.18) !important;
}

body.strengthTraining .baseCard.open .baseToggle{
  background:
    linear-gradient(
      145deg,
      rgba(60,180,235,.12),
      rgba(255,255,255,.025)
    ) !important;
  border-color:rgba(100,205,255,.22) !important;
}

html[data-theme="light"] body.strengthTraining .baseToggle{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,.22)
    ) !important;
  border-color:rgba(45,80,110,.10) !important;
}


/* =========================================================
   STUFE 3.8 – AUCTIVUS BRANDING
   ========================================================= */

.brandBlock{
  text-align:center;
  margin-bottom:18px;
}

.brandName{
  font-size:clamp(28px,5vw,44px);
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#53c7ff,#5ee39b);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 8px 28px rgba(60,190,230,.12);
}

.brandClaim{
  margin-top:7px;
  font-size:13px;
  font-weight:750;
  letter-spacing:.03em;
  color:var(--muted);
}

.dashboardBrand{
  width:min(1100px,calc(100% - 28px));
  margin:22px auto 12px;
  text-align:center;
}

.dashboardBrand .brandName{
  font-size:clamp(30px,5.5vw,48px);
}

.dailyMotivation{
  margin-top:10px;
  font-size:14px;
  font-weight:800;
  color:var(--app-text);
  opacity:.92;
}

.profileBrandMini{
  width:min(1100px,calc(100% - 28px));
  margin:12px auto 0;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}

.profileBrandMini strong{
  letter-spacing:.10em;
  font-size:14px;
}

.profileBrandMini span{
  color:var(--muted);
  font-size:12px;
}

html[data-theme="light"] .brandName{
  text-shadow:none;
}


/* =========================================================
   STUFE 3.9 – AUCTIVUS LOGO / MONOGRAMM
   ========================================================= */

.brandLogoWrap{
  display:flex;
  justify-content:center;
  align-items:center;
}

.brandLogo{
  width:88px;
  height:88px;
  display:block;
  filter:drop-shadow(0 12px 28px rgba(62,190,230,.18));
}

.loginLogo{margin-bottom:12px}
.dashboardLogo{margin-bottom:14px}

.profileBrandMini{
  align-items:center !important;
}
.brandMiniLogo{
  width:28px;
  height:28px;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 18px rgba(62,190,230,.14));
}

.trainingPageBrand{
  width:min(1100px,calc(100% - 28px));
  margin:18px auto 8px;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  text-align:center;
  flex-wrap:wrap;
}
.trainingPageBrand strong{
  display:block;
  letter-spacing:.10em;
  font-size:14px;
}
.trainingPageBrand span{
  color:var(--muted);
  font-size:12px;
}
.trainingBrandLogo{
  width:42px;
  height:42px;
  filter:drop-shadow(0 8px 20px rgba(62,190,230,.14));
}

@media(max-width:640px){
  .brandLogo{
    width:74px;
    height:74px;
  }
}


/* =========================================================
   STUFE 3.10 – LOGO ÜBERALL + iPHONE / MOBILE KONSISTENZ
   ========================================================= */

.brandLogoSmall{
  width:46px;
  height:46px;
  border-radius:14px;
  display:block;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 18px rgba(62,190,230,.18));
}
.tileLogo{
  width:30px;
  height:30px;
  display:block;
}
.defaultTileIcon{display:grid;place-items:center;width:100%;height:100%}
.icon.iconLogo{padding:0}
.headerLogo{
  width:54px;
  height:54px;
  border-radius:16px;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(62,190,230,.18));
}
.privacyBrand{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
}
.privacyBrand strong{display:block;font-size:16px;letter-spacing:.08em}
.privacyBrand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.btnInlineIcon{
  width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:8px;opacity:.9
}

/* dashboard / top brand */
body.strengthDashboard .appBrand,
body.strengthAdmin .appBrand,
body.strengthTraining .appBrand{
  display:flex;
  align-items:center;
  gap:12px;
}
body.strengthDashboard .appBrand strong,
body.strengthAdmin .appBrand strong,
body.strengthTraining .appBrand strong{
  letter-spacing:.05em;
}

/* profile header */
body.strengthProfile .header{
  align-items:center;
}
body.strengthProfile .logo,
body.strengthProfile .headerLogo{
  flex:0 0 auto;
}

/* login: single consistent card, desktop and iPhone */
body.strengthLogin.loginMinimal{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
body.strengthLogin.loginMinimal .wrap,
body.strengthLogin.loginMinimal .hero{
  display:none !important;
}
body.strengthLogin.loginMinimal .loginSingleWrap{
  width:min(620px,100%);
}
body.strengthLogin.loginMinimal .loginOnlyCard{
  display:block !important;
  width:100%;
  padding:32px 28px 26px;
  border-radius:30px;
}
body.strengthLogin.loginMinimal .loginBrandHero{
  text-align:center;
  margin-bottom:14px;
}
body.strengthLogin.loginMinimal .loginKicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  color:#cfdcf0;
  margin-bottom:14px;
}
body.strengthLogin.loginMinimal .kickerDot{
  width:10px;height:10px;border-radius:50%;background:#48e2b0;
  box-shadow:0 0 12px rgba(72,226,176,.55);
}
body.strengthLogin.loginMinimal .loginLogo.main{margin-bottom:10px}
body.strengthLogin.loginMinimal .brandName{
  font-size:clamp(40px,8vw,58px);
  font-weight:1000;
  letter-spacing:.10em;
  line-height:1;
  background:linear-gradient(135deg,#59d5ff,#77e7b8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
body.strengthLogin.loginMinimal .brandClaim{
  margin-top:8px;
  color:var(--muted);
  font-size:15px;
  font-weight:700;
}
body.strengthLogin.loginMinimal h2{
  margin:18px 0 8px;
  font-size:clamp(28px,6vw,38px);
  text-align:left;
}
body.strengthLogin.loginMinimal .cardSubtext,
body.strengthLogin.loginMinimal .muted,
body.strengthLogin.loginMinimal p{
  color:var(--muted);
}
body.strengthLogin.loginMinimal .rowRemember{
  align-items:flex-start;
  gap:10px;
}
body.strengthLogin.loginMinimal .rowRemember .rememberHint{
  text-align:right;
}
@media (max-width: 768px){
  body.strengthLogin.loginMinimal{padding:12px}
  body.strengthLogin.loginMinimal .loginOnlyCard{padding:22px 18px 20px;border-radius:24px}
  body.strengthLogin.loginMinimal .brandName{font-size:clamp(34px,10vw,46px)}
}

/* make logo visible on every main page */
body.strengthDashboard .appBrandMark,
body.strengthTraining .appBrandMark,
body.strengthAdmin .appBrandMark,
body.strengthProfile .logo{display:none !important}

/* mobile consistency for dashboard and training */
@media (max-width: 768px){
  body.strengthDashboard .top{
    align-items:flex-start;
  }
  body.strengthDashboard .appBrand{
    align-items:flex-start;
  }
  body.strengthDashboard .tile,
  body.strengthTraining .muscleTile{
    backdrop-filter:blur(12px);
  }
  body.strengthTraining .appTopbar{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  body.strengthTraining .trainingTopActions{
    width:100%;
  }
  body.strengthTraining .manageExercisesBtn{
    width:100%;
    justify-content:center;
  }
  body.strengthTraining h1{
    font-size:clamp(26px,7vw,34px);
  }
  body.strengthTraining .panel,
  body.strengthProfile .card,
  body.strengthAdmin .panel,
  body.strengthDashboard .tile{
    padding:16px;
  }
}


/* =========================================================
   STUFE 3.11 – iPHONE CACHE + SAFE AREA FIX
   ========================================================= */
img.brandLogo,
img.brandLogoSmall,
img.headerLogo,
img.brandMiniLogo,
img.trainingBrandLogo,
img.tileLogo{
  object-fit:contain;
}
@media(max-width:600px){
  img.brandLogo{width:72px !important;height:72px !important}
  img.brandLogoSmall{width:40px !important;height:40px !important}
  img.headerLogo{width:46px !important;height:46px !important}
  body.strengthDashboard,
  body.strengthTraining,
  body.strengthProfile,
  body.strengthAdmin{
    padding-bottom:max(24px, env(safe-area-inset-bottom));
  }
}


/* =========================================================
   STUFE 3.12 – DATENEXPORT / BACKUP
   ========================================================= */

.exportIntro{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  margin:-5px 0 13px;
}

.exportGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.exportBtn{
  min-height:92px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  text-align:left;
  border-radius:16px;
  border:1px solid rgba(185,220,245,.13);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.025)
    );
  color:var(--app-text);
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.exportBtn:hover{
  border-color:rgba(90,205,255,.24);
  transform:translateY(-1px);
}

.exportBtn:disabled{
  opacity:.58;
  cursor:wait;
  transform:none;
}

.exportIcon{
  width:48px;
  height:48px;
  border-radius:14px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(95,220,175,.20);
  background:
    linear-gradient(
      145deg,
      rgba(75,215,165,.13),
      rgba(60,180,235,.07)
    );
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
}

.exportBtn strong{
  display:block;
  font-size:14px;
}

.exportBtn small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  font-weight:600;
}

.exportStatus{
  display:none;
  margin-top:10px;
  padding:9px 11px;
  border-radius:11px;
  font-size:12px;
  border:1px solid rgba(185,220,245,.10);
  background:rgba(10,30,50,.10);
}

.exportStatus.show{display:block}
.exportStatus.okText{
  color:#dfffea;
  border-color:rgba(70,220,140,.18);
}
.exportStatus.errorText{
  color:#ffd9dd;
  border-color:rgba(255,110,130,.18);
}

@media(max-width:620px){
  .exportGrid{grid-template-columns:1fr}
  .exportBtn{min-height:82px}
}


/* =========================================================
   STUFE 3.13 – PROFILBILD-OPTIMIERER
   ========================================================= */

.profileImageOptimizeInfo{
  display:none;
  margin-top:8px;
  padding:8px 10px;
  border-radius:11px;
  font-size:11px;
  line-height:1.4;
  border:1px solid rgba(170,205,235,.10);
  background:rgba(10,30,50,.09);
  color:var(--muted);
}

.profileImageOptimizeInfo.show{display:block}

.profileImageOptimizeInfo.success{
  color:#dbffea;
  border-color:rgba(70,220,140,.17);
  background:rgba(35,145,85,.08);
}

.profileImageOptimizeInfo.warning{
  color:#ffe4b8;
  border-color:rgba(255,190,80,.16);
  background:rgba(145,90,25,.08);
}


/* =========================================================
   STUFE 3.14 – PWA / OFFLINE
   ========================================================= */

.connectionStatusBanner{
  position:fixed;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:9999;
  transform:translate(-50%,20px);
  width:min(620px,calc(100% - 24px));
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,190,80,.24);
  background:rgba(82,55,17,.93);
  color:#fff0ca;
  font-size:12px;
  font-weight:800;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  box-shadow:0 10px 35px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.connectionStatusBanner.show{
  opacity:1;
  transform:translate(-50%,0);
}

.offlinePage{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:
    calc(20px + env(safe-area-inset-top))
    18px
    calc(20px + env(safe-area-inset-bottom));
}

.offlineCard{
  width:min(520px,100%);
  padding:30px 24px;
  text-align:center;
  border-radius:28px;
  border:1px solid rgba(210,230,248,.12);
  background:
    linear-gradient(
      145deg,
      rgba(8,20,34,.56),
      rgba(8,20,34,.24)
    );
  box-shadow:0 18px 55px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.offlineLogo{
  width:82px;
  height:82px;
  display:block;
  margin:0 auto 14px;
}

.offlineCard h1{
  margin:24px 0 10px;
  font-size:30px;
}

.offlineCard p{
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}

.offlineRetry{
  width:100%;
  margin-top:12px;
  padding:13px 16px;
  border:0;
  border-radius:14px;
  font-weight:900;
  background:linear-gradient(135deg,#48d69a,#58cfff);
  color:#06131d;
}


/* =========================================================
   STUFE 3.17 – OFFLINE SESSION
   ========================================================= */

body.strengthDashboard.offlineSession .sub::after{
  content:" · Offline-Modus";
  color:#ffe2a7;
  font-weight:800;
}

html.appOffline body.strengthDashboard .logout{
  opacity:.78;
}

html.appOffline body.strengthTraining .primary,
html.appOffline body.strengthProfile .save,
html.appOffline body.strengthAdmin .save{
  position:relative;
}

/* Rein visuell: Navigation und lokal gecachte Oberfläche bleiben bedienbar.
   Schreibaktionen zeigen weiterhin ihre normalen Netzwerkfehlermeldungen. */


/* =========================================================
   STUFE 3.18 – SMOOTHER UI / SOFTER CORNERS
   ========================================================= */

:root{
  --app-radius:24px;
  --app-radius-lg:32px;
}

/* Hauptflächen / Kacheln */
body.strengthDashboard .tile,
body.strengthTraining .panel,
body.strengthTraining .card,
body.strengthTraining .cardioCard,
body.strengthTraining .cardioCards > *,
body.strengthTraining .cardioGrid > *,
body.strengthProfile .card,
body.strengthAdmin .panel,
body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card,
body.strengthLogin .loginCard,
.panel,.card,.board,.fitnessBox,.healthItem,.group,.baseCard,
.tile,.muscleTile,.planTile{
  border-radius:28px !important;
}

/* Große Hauptbox im Login noch etwas softer */
body.strengthLogin .loginWrap,
body.strengthLogin .wrap,
body.strengthLogin .hero{
  border-radius:32px !important;
}

/* Kleine UI-Elemente */
button,.btn,.logout,.smallBtn,.manageExercisesBtn,.add,
input,select,textarea,
.searchRow input,
.searchRow select,
.exerciseSearch,
.tabBtn,
.backBtn,
.save,
.primary,
.secondary,
.inlineBtn{
  border-radius:18px !important;
}

/* Plan-/Muskelgruppen-Buttons etwas sanfter */
.muscleTile,
.planTile,
.tile.training{
  border-radius:24px !important;
}

/* Gläserne Icons leicht runder */
.icon,
.tile .icon,
.muscleTile .icon,
.planTile .icon,
.appBrandMark{
  border-radius:22px !important;
}

/* Profilbild / Avatare */
.avatar,
.profileAvatar,
.profileImagePreview,
.profilePhoto{
  border-radius:24px !important;
}

/* Tabellen-/Listencontainer etwas weicher */
.tableWrap,
.listWrap,
.historyList,
.exerciseList,
.planList{
  border-radius:24px !important;
}

/* Etwas weicherer Schatten für den neuen Look */
body.strengthDashboard .tile,
body.strengthTraining .panel,
body.strengthTraining .card,
body.strengthProfile .card,
body.strengthAdmin .panel,
body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card,
body.strengthLogin .loginCard{
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}


/* =========================================================
   STUFE 3.19 – ALLE KACHELN GLOBAL RUND
   ========================================================= */

:root{
  --auctivus-card-radius:34px;
  --auctivus-card-radius-small:28px;
  --auctivus-control-radius:20px;
}

/* Große und mittlere Kacheln / Karten */
.tile,
.panel,
.card,
.board,
.group,
.baseCard,
.activeCard,
.variant,
.cardioCard,
.cardioCards > *,
.cardioGrid > *,
.planTile,
.muscleTile,
.libraryClosed,
.healthBanner,
.healthItem,
.healthStatus,
.fitnessBox,
.levelResult,
.exerciseHealthNote,
.item,
.editBar,
.exportBtn,
.exportStatus,
.offlineCard,
.loginOnlyCard,
section.card,
.loginCard,
.timer{
  border-radius:var(--auctivus-card-radius) !important;
  overflow:hidden !important;
}

/* Kleinere Unterkacheln etwas kompakter rund */
.variant,
.item,
.healthItem,
.healthStatus,
.exerciseHealthNote,
.exportStatus,
.editBar{
  border-radius:var(--auctivus-card-radius-small) !important;
}

/* Dashboard wirklich weich */
body.strengthDashboard .tile{
  border-radius:36px !important;
}

/* Login besonders weich */
body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card,
body.strengthLogin .loginCard{
  border-radius:38px !important;
}

/* Profil / Training / Admin große Flächen */
body.strengthProfile .card,
body.strengthTraining .panel,
body.strengthTraining .timer,
body.strengthAdmin .panel{
  border-radius:34px !important;
}

/* Buttons und Eingaben ebenfalls ohne harte Ecken */
button,
.btn,
.logout,
.smallBtn,
.manageExercisesBtn,
.add,
.primary,
.secondary,
.save,
.danger,
.editBtn,
.cancelBtn,
.offlineRetry,
input,
select,
textarea{
  border-radius:var(--auctivus-control-radius) !important;
}

/* Icon-Kacheln */
.icon,
.appBrandMark,
.muscleIcon,
.linkPillIcon,
.exportIcon{
  border-radius:24px !important;
}

/* Pseudo-Elemente dürfen keine eckigen Innenflächen erzeugen */
.tile::before,
.tile::after,
.panel::before,
.panel::after,
.card::before,
.card::after,
.board::before,
.board::after,
.group::before,
.group::after,
.baseCard::before,
.baseCard::after,
.activeCard::before,
.activeCard::after,
.variant::before,
.variant::after,
.cardioCard::before,
.cardioCard::after,
.planTile::before,
.planTile::after,
.muscleTile::before,
.muscleTile::after,
.loginOnlyCard::before,
.loginOnlyCard::after{
  border-radius:inherit !important;
}

/* Falls alte Innenflächen eigene harte Kanten hatten */
.tile > *,
.panel > *,
.card > *,
.board > *,
.group > *,
.baseCard > *,
.activeCard > *,
.variant > *,
.cardioCard > *,
.planTile > *,
.muscleTile > *{
  min-width:0;
}

/* Rundes Profilbild bleibt wirklich rund */
.profileAvatar,
.profileAvatarFallback{
  border-radius:50% !important;
}

/* Pills bleiben Pills */
.linkPill,
.tab,
.badge{
  border-radius:999px !important;
}

/* Mobile: dieselbe Rundung beibehalten */
@media(max-width:620px){
  .tile,
  .panel,
  .card,
  .timer,
  .baseCard,
  .activeCard,
  .cardioCard,
  .healthBanner,
  .fitnessBox,
  .exportBtn,
  .loginOnlyCard{
    border-radius:30px !important;
  }

  body.strengthLogin .loginOnlyCard{
    border-radius:32px !important;
  }
}


/* =========================================================
   STUFE 3.20 – LOGIN-KACHEL ENTFERNT
   ========================================================= */

body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card,
body.strengthLogin .loginCard{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:visible !important;
}

/* Pseudo-Flächen ebenfalls vollständig entfernen */
body.strengthLogin .loginOnlyCard::before,
body.strengthLogin .loginOnlyCard::after,
body.strengthLogin section.card::before,
body.strengthLogin section.card::after,
body.strengthLogin .loginCard::before,
body.strengthLogin .loginCard::after{
  display:none !important;
  content:none !important;
}

/* Inhalte bleiben aufgeräumt und gut lesbar */
body.strengthLogin .loginSingleWrap{
  width:min(560px,100%) !important;
}

body.strengthLogin input{
  background:rgba(5,16,29,.58) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.08) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

body.strengthLogin .btn{
  box-shadow:0 12px 28px rgba(47,214,123,.15) !important;
}

body.strengthLogin .linkPill{
  background:rgba(8,20,34,.20) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

@media(max-width:768px){
  body.strengthLogin .loginOnlyCard,
  body.strengthLogin section.card,
  body.strengthLogin .loginCard{
    padding-left:4px !important;
    padding-right:4px !important;
  }
}


/* =========================================================
   STUFE 3.23 – LOGIN FINAL: KEINE SCHWARZEN FLÄCHEN
   Diese Regeln stehen absichtlich GANZ AM ENDE der theme.css.
   ========================================================= */

/* Keine dunkle Überlagerung mehr vor dem Hintergrundbild */
body.strengthLogin::before{
  display:none !important;
  opacity:0 !important;
}

/* Hintergrund nur mit sehr leichter heller Tönung */
html[data-theme="dark"] body.strengthLogin,
html[data-theme="light"] body.strengthLogin,
body.strengthLogin.loginMinimal{
  background:
    linear-gradient(
      rgba(255,255,255,.035),
      rgba(255,255,255,.055)
    ),
    url("assets/backgrounds/login-gym.webp")
      center center / cover no-repeat fixed !important;
}

/* WICHTIG: alte Dark-Theme-Regel hatte das FORMULAR schwarz gemacht */
html[data-theme="dark"] body.strengthLogin form,
html[data-theme="light"] body.strengthLogin form,
body.strengthLogin form,
body.strengthLogin #loginForm{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Auch die äußere Login-Kachel bekommt keine dunkle Fläche mehr */
html[data-theme="dark"] body.strengthLogin .loginOnlyCard,
html[data-theme="light"] body.strengthLogin .loginOnlyCard,
body.strengthLogin .loginOnlyCard,
body.strengthLogin section.card,
body.strengthLogin .loginCard{
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
  backdrop-filter:blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  border-radius:36px !important;
}

/* Keine dunklen Pseudo-Flächen */
body.strengthLogin .loginOnlyCard::before,
body.strengthLogin .loginOnlyCard::after,
body.strengthLogin section.card::before,
body.strengthLogin section.card::after,
body.strengthLogin .loginCard::before,
body.strengthLogin .loginCard::after{
  display:none !important;
  content:none !important;
}

/* Alles mittig außer Text innerhalb der Eingabefelder */
body.strengthLogin .loginOnlyCard,
body.strengthLogin .loginBrandHero,
body.strengthLogin .loginOnlyCard h2,
body.strengthLogin .loginOnlyCard .sub,
body.strengthLogin .loginOnlyCard .register-row,
body.strengthLogin .loginOnlyCard .linkInlineCenter,
body.strengthLogin .loginOnlyCard .login-tools,
body.strengthLogin .loginOnlyCard .row,
body.strengthLogin .field label{
  text-align:center !important;
}

body.strengthLogin .loginBrandHero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

body.strengthLogin .loginBrandHero .brandLogoWrap{
  margin-left:auto !important;
  margin-right:auto !important;
}

body.strengthLogin .login-tools,
body.strengthLogin .row,
body.strengthLogin .check,
body.strengthLogin .linkInlineCenter{
  justify-content:center !important;
  align-items:center !important;
}

body.strengthLogin .row{
  flex-direction:column !important;
  gap:10px !important;
}

/* Eingabefelder: hell statt schwarz */
html[data-theme="dark"] body.strengthLogin input,
html[data-theme="light"] body.strengthLogin input,
body.strengthLogin input,
body.strengthLogin .field input{
  background:rgba(255,255,255,.88) !important;
  color:#1b2735 !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 7px 20px rgba(30,60,85,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:24px !important;
  text-align:left !important;
}

body.strengthLogin input::placeholder,
body.strengthLogin .field input::placeholder{
  color:#718198 !important;
  opacity:1 !important;
}

body.strengthLogin input:focus,
body.strengthLogin .field input:focus{
  background:rgba(255,255,255,.96) !important;
  border-color:#71e0b3 !important;
  box-shadow:
    0 0 0 4px rgba(113,224,179,.22),
    0 8px 22px rgba(30,60,85,.10) !important;
  outline:none !important;
}

/* Helle Texte vor dem Foto */
body.strengthLogin .field label,
body.strengthLogin .forgot-link,
body.strengthLogin .row,
body.strengthLogin .register-row,
body.strengthLogin .loginOnlyCard .sub,
body.strengthLogin .loginBrandHero .brandClaim,
body.strengthLogin .loginBrandHero .loginKicker{
  color:#f7fbff !important;
}

/* Datenschutz ebenfalls ohne dunkle Pill-Fläche */
body.strengthLogin .linkPill{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  color:#f7fbff !important;
  box-shadow:none !important;
}

/* Checkbox nicht mit schwarzer Fläche */
body.strengthLogin input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  background:#ffffff !important;
  accent-color:#38d38a !important;
  box-shadow:none !important;
}

/* CTA bleibt farbig */
body.strengthLogin .btn{
  width:100% !important;
  border-radius:26px !important;
  box-shadow:0 10px 24px rgba(47,214,123,.16) !important;
}

/* Mobile exakt dieselbe Logik */
@media(max-width:600px){
  html[data-theme="dark"] body.strengthLogin,
  html[data-theme="light"] body.strengthLogin,
  body.strengthLogin.loginMinimal{
    background:
      linear-gradient(
        rgba(255,255,255,.025),
        rgba(255,255,255,.045)
      ),
      url("assets/backgrounds/login-gym.webp")
        center top / cover no-repeat scroll !important;
  }

  body.strengthLogin .loginOnlyCard{
    background:rgba(255,255,255,.065) !important;
    border-radius:32px !important;
  }

  body.strengthLogin .loginOnlyCard .row > span{
    display:block !important;
  }
}


/* =========================================================
   STUFE 3.26 – GLOBAL COMPACT GLASS / KEIN SCHWARZER LOOK
   ========================================================= */

:root{
  --auctivus-glass-a:rgba(255,255,255,.13);
  --auctivus-glass-b:rgba(255,255,255,.07);
  --auctivus-glass-soft:rgba(255,255,255,.09);
  --auctivus-border:rgba(255,255,255,.18);
  --auctivus-border-soft:rgba(255,255,255,.12);
  --auctivus-shadow:0 10px 28px rgba(20,45,68,.13);
  --auctivus-radius:24px;
  --auctivus-radius-small:18px;
  --auctivus-gap:10px;
}

/* ---------------------------------------------------------
   Seitenhintergründe: keine schwarze Überlagerung mehr
   --------------------------------------------------------- */

body.strengthDashboard,
body.strengthProfile{
  background:
    linear-gradient(rgba(255,255,255,.035),rgba(255,255,255,.055)),
    url("assets/backgrounds/dashboard-gym.webp")
      center center / cover no-repeat fixed !important;
}

body.strengthTraining,
body.strengthAdmin,
body.strengthProgress{
  background:
    linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.045)),
    url("assets/backgrounds/training-freeweights.webp")
      center center / cover no-repeat fixed !important;
}

body.strengthLogin{
  background:
    linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.045)),
    url("assets/backgrounds/login-gym.webp")
      center center / cover no-repeat fixed !important;
}

body.offlinePage{
  background:
    radial-gradient(circle at top left,rgba(88,207,255,.20),transparent 42%),
    radial-gradient(circle at bottom right,rgba(72,222,159,.18),transparent 38%),
    linear-gradient(145deg,#264a66,#3f7893) !important;
}

body.strengthDashboard::before,
body.strengthTraining::before,
body.strengthProfile::before,
body.strengthAdmin::before,
body.strengthLogin::before,
body.strengthProgress::before{
  display:none !important;
  opacity:0 !important;
}

/* ---------------------------------------------------------
   Große Karten/Kacheln: kompakter + helles Glas
   --------------------------------------------------------- */

.tile,
.panel,
.card,
.board,
.group,
.baseCard,
.activeCard,
.variant,
.cardioCard,
.cardioCards > *,
.cardioGrid > *,
.planTile,
.muscleTile,
.libraryClosed,
.healthBanner,
.healthItem,
.healthStatus,
.fitnessBox,
.levelResult,
.exerciseHealthNote,
.item,
.editBar,
.exportBtn,
.exportStatus,
.offlineCard,
.loginOnlyCard,
.loginCard,
.timer,
.statCard,
.progressCard,
.prCard,
.roundTimer{
  background:
    linear-gradient(
      145deg,
      var(--auctivus-glass-a),
      var(--auctivus-glass-b)
    ) !important;
  border:1px solid var(--auctivus-border) !important;
  box-shadow:var(--auctivus-shadow) !important;
  backdrop-filter:blur(14px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(145%) !important;
  border-radius:var(--auctivus-radius) !important;
  overflow:hidden !important;
}

/* Inputs/Formulare nie schwarz */
input,
select,
textarea,
body.strengthLogin input,
body.strengthTraining input,
body.strengthTraining select,
body.strengthProfile input,
body.strengthProfile select,
body.strengthProfile textarea,
body.strengthAdmin input,
body.strengthAdmin select,
body.strengthAdmin textarea,
body.strengthProgress select{
  background:rgba(255,255,255,.82) !important;
  color:#1a2937 !important;
  border:1px solid rgba(255,255,255,.80) !important;
  box-shadow:0 5px 16px rgba(27,55,78,.08) !important;
  border-radius:16px !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

input::placeholder,
textarea::placeholder{
  color:#738398 !important;
  opacity:1 !important;
}

select option{
  color:#1a2937 !important;
  background:#ffffff !important;
}

/* ---------------------------------------------------------
   Kompaktere Abstände
   --------------------------------------------------------- */

.tile,
.panel,
.card,
.board,
.group,
.fitnessBox,
.healthBanner,
.timer,
.progressCard,
.offlineCard{
  padding:14px !important;
}

.baseCard,
.activeCard,
.cardioCard,
.planTile,
.muscleTile,
.healthItem,
.healthStatus,
.exerciseHealthNote,
.item,
.editBar,
.prCard,
.statCard,
.exportBtn{
  padding:11px 12px !important;
}

.variant,
.exportStatus{
  padding:9px 10px !important;
}

body.strengthDashboard .tile{
  min-height:auto !important;
}

.statsGrid,
.progressGrid,
.prGrid,
.exportGrid,
.cardioGrid,
.cardioCards,
.plansGrid,
.muscleGrid,
.grid{
  gap:var(--auctivus-gap) !important;
}

/* ---------------------------------------------------------
   Rundungen smooth, aber weniger wuchtig
   --------------------------------------------------------- */

body.strengthDashboard .tile,
body.strengthTraining .panel,
body.strengthProfile .card,
body.strengthAdmin .panel,
body.strengthProgress .progressCard,
body.strengthLogin .loginOnlyCard{
  border-radius:26px !important;
}

.baseCard,
.activeCard,
.planTile,
.muscleTile,
.cardioCard,
.healthBanner,
.fitnessBox,
.statCard,
.prCard,
.roundTimer{
  border-radius:22px !important;
}

.variant,
.item,
.healthItem,
.healthStatus,
.exerciseHealthNote,
.exportBtn,
.exportStatus,
.editBar{
  border-radius:18px !important;
}

/* ---------------------------------------------------------
   Buttons kompakter
   --------------------------------------------------------- */

button,
.btn,
.logout,
.smallBtn,
.manageExercisesBtn,
.add,
.primary,
.secondary,
.save,
.danger,
.editBtn,
.cancelBtn,
.offlineRetry,
.exerciseRestBtn,
.roundTimerPreset,
.roundTimerControl,
.backTraining{
  min-height:38px !important;
  padding:8px 12px !important;
  border-radius:16px !important;
}

body.strengthLogin .btn{
  min-height:48px !important;
  border-radius:20px !important;
}

/* ---------------------------------------------------------
   Icons kompakter
   --------------------------------------------------------- */

.icon,
.appBrandMark,
.muscleIcon,
.linkPillIcon,
.exportIcon{
  border-radius:18px !important;
}

body.strengthDashboard .tile .icon{
  width:52px !important;
  height:52px !important;
}

/* ---------------------------------------------------------
   Typografie kompakter
   --------------------------------------------------------- */

.card h2,
.panel h2,
.progressCard h2{
  margin-bottom:7px !important;
}

.tile strong,
.prName,
.roundTimerTitle{
  line-height:1.2 !important;
}

.sub,
.cardSub,
.muted,
.exerciseRestText{
  line-height:1.35 !important;
}

/* ---------------------------------------------------------
   Training speziell
   --------------------------------------------------------- */

body.strengthTraining .roundTimer{
  margin-top:10px !important;
  padding:13px !important;
}

body.strengthTraining .roundTimerClock{
  margin:12px 0 10px !important;
  font-size:40px !important;
}

body.strengthTraining .roundTimerPresets,
body.strengthTraining .roundTimerControls{
  gap:6px !important;
}

body.strengthTraining .exerciseRestRow{
  padding:7px 9px !important;
  margin-top:7px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.07) !important;
}

body.strengthTraining .variant{
  background:rgba(255,255,255,.07) !important;
}

/* ---------------------------------------------------------
   Fortschritt speziell
   --------------------------------------------------------- */

body.strengthProgress .progressHero{
  padding:16px !important;
  border-radius:26px !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.07)
    ) !important;
  border:1px solid var(--auctivus-border) !important;
  box-shadow:var(--auctivus-shadow) !important;
  backdrop-filter:blur(14px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(145%) !important;
}

body.strengthProgress .chartWrap{
  background:rgba(255,255,255,.07) !important;
  border:1px solid var(--auctivus-border-soft) !important;
  border-radius:18px !important;
  height:220px !important;
}

body.strengthProgress .statValue{
  font-size:22px !important;
}

/* ---------------------------------------------------------
   Login: nur helles Glas, keine dunklen Blöcke
   --------------------------------------------------------- */

body.strengthLogin form,
body.strengthLogin #loginForm{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.strengthLogin .loginOnlyCard{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.17) !important;
  box-shadow:0 10px 28px rgba(20,45,68,.10) !important;
  padding:20px 18px !important;
}

body.strengthLogin .linkPill{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

/* ---------------------------------------------------------
   Mobile: noch kompakter
   --------------------------------------------------------- */

@media(max-width:620px){
  .tile,
  .panel,
  .card,
  .timer,
  .baseCard,
  .activeCard,
  .cardioCard,
  .healthBanner,
  .fitnessBox,
  .progressCard,
  .roundTimer,
  .loginOnlyCard{
    border-radius:22px !important;
  }

  .tile,
  .panel,
  .card,
  .timer,
  .progressCard{
    padding:12px !important;
  }

  .baseCard,
  .activeCard,
  .cardioCard,
  .healthItem,
  .statCard,
  .prCard{
    padding:10px !important;
  }

  body.strengthTraining .roundTimerClock{
    font-size:36px !important;
  }

  body.strengthProgress .chartWrap{
    height:200px !important;
  }
}


/* =========================================================
   STUFE 3.27 – LOGIN-GLASS AUF ALLE KACHELN
   KEINE SCHWARZEN KACHELN MEHR
   ========================================================= */

:root{
  --login-glass-bg:rgba(255,255,255,.075);
  --login-glass-bg-soft:rgba(255,255,255,.055);
  --login-glass-bg-strong:rgba(255,255,255,.11);
  --login-glass-border:rgba(255,255,255,.18);
  --login-glass-border-soft:rgba(255,255,255,.12);
  --login-glass-shadow:0 8px 22px rgba(20,45,68,.10);
  --login-glass-radius:22px;
  --login-glass-radius-small:16px;
}

/* ---------------------------------------------------------
   ALLE Karten/Kacheln: exakt heller Login-Glasstil
   --------------------------------------------------------- */

.tile,
.panel,
.card,
.board,
.group,
.baseCard,
.activeCard,
.variant,
.cardioCard,
.cardioCards > *,
.cardioGrid > *,
.planTile,
.muscleTile,
.libraryClosed,
.healthBanner,
.healthItem,
.healthStatus,
.fitnessBox,
.levelResult,
.exerciseHealthNote,
.item,
.editBar,
.exportBtn,
.exportStatus,
.offlineCard,
.loginOnlyCard,
.loginCard,
.timer,
.statCard,
.progressCard,
.prCard,
.roundTimer,
.exerciseRestRow,
.tableWrap,
.listWrap,
.historyList,
.exerciseList,
.planList,
.message,
.linkPill,
.trainingTopActions > *,
.progressHero,
.chartWrap{
  background:var(--login-glass-bg) !important;
  border:1px solid var(--login-glass-border) !important;
  box-shadow:var(--login-glass-shadow) !important;
  backdrop-filter:blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  color:var(--app-text) !important;
}

/* Unterkacheln noch leichter */
.variant,
.healthItem,
.healthStatus,
.exerciseHealthNote,
.item,
.editBar,
.exportStatus,
.exerciseRestRow,
.chartWrap{
  background:var(--login-glass-bg-soft) !important;
  border-color:var(--login-glass-border-soft) !important;
  box-shadow:none !important;
}

/* WICHTIG: alte Dark-Theme Regeln vollständig überschreiben */
html[data-theme="dark"] .tile,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .board,
html[data-theme="dark"] .group,
html[data-theme="dark"] .baseCard,
html[data-theme="dark"] .activeCard,
html[data-theme="dark"] .variant,
html[data-theme="dark"] .cardioCard,
html[data-theme="dark"] .planTile,
html[data-theme="dark"] .muscleTile,
html[data-theme="dark"] .healthBanner,
html[data-theme="dark"] .healthItem,
html[data-theme="dark"] .fitnessBox,
html[data-theme="dark"] .item,
html[data-theme="dark"] .statCard,
html[data-theme="dark"] .progressCard,
html[data-theme="dark"] .prCard,
html[data-theme="dark"] .roundTimer,
html[data-theme="dark"] body.strengthDashboard .tile,
html[data-theme="dark"] body.strengthTraining .panel,
html[data-theme="dark"] body.strengthTraining .card,
html[data-theme="dark"] body.strengthProfile .card,
html[data-theme="dark"] body.strengthAdmin .panel,
html[data-theme="dark"] body.strengthProgress .progressCard{
  background:var(--login-glass-bg) !important;
  border:1px solid var(--login-glass-border) !important;
  box-shadow:var(--login-glass-shadow) !important;
}

/* ---------------------------------------------------------
   KEINE dunklen Pseudo-Flächen
   --------------------------------------------------------- */

.tile::before,
.tile::after,
.panel::before,
.panel::after,
.card::before,
.card::after,
.board::before,
.board::after,
.group::before,
.group::after,
.baseCard::before,
.baseCard::after,
.activeCard::before,
.activeCard::after,
.variant::before,
.variant::after,
.cardioCard::before,
.cardioCard::after,
.planTile::before,
.planTile::after,
.muscleTile::before,
.muscleTile::after,
.healthBanner::before,
.healthBanner::after,
.fitnessBox::before,
.fitnessBox::after,
.statCard::before,
.statCard::after,
.progressCard::before,
.progressCard::after,
.prCard::before,
.prCard::after,
.roundTimer::before,
.roundTimer::after{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ---------------------------------------------------------
   Kacheln kompakter / kleiner
   --------------------------------------------------------- */

.tile,
.panel,
.card,
.board,
.group,
.healthBanner,
.fitnessBox,
.timer,
.progressCard,
.offlineCard,
.roundTimer{
  padding:11px 12px !important;
  border-radius:var(--login-glass-radius) !important;
}

.baseCard,
.activeCard,
.cardioCard,
.planTile,
.muscleTile,
.healthItem,
.healthStatus,
.exerciseHealthNote,
.item,
.editBar,
.prCard,
.statCard,
.exportBtn{
  padding:9px 10px !important;
  border-radius:18px !important;
}

.variant,
.exportStatus,
.exerciseRestRow{
  padding:7px 8px !important;
  border-radius:14px !important;
}

/* Weniger Höhe / Luft */
body.strengthDashboard .tile,
body.strengthTraining .panel,
body.strengthProfile .card,
body.strengthAdmin .panel,
body.strengthProgress .progressCard{
  min-height:0 !important;
}

.statsGrid,
.progressGrid,
.prGrid,
.exportGrid,
.cardioGrid,
.cardioCards,
.plansGrid,
.muscleGrid,
.grid{
  gap:8px !important;
}

/* ---------------------------------------------------------
   KLEINE ICONS: große dunkle Hintergründe komplett weg
   --------------------------------------------------------- */

.icon,
.tile .icon,
.appBrandMark,
.muscleIcon,
.linkPillIcon,
.exportIcon,
.btnInlineIcon,
.brandLogoWrap,
.loginLogo,
.profileIcon,
.headerLogo,
.brandLogoSmall{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Kleine Icons wirklich klein halten */
.tile .icon,
.icon,
.muscleIcon,
.exportIcon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border-radius:12px !important;
}

/* Markenlogo darf etwas größer bleiben */
.brandLogoWrap,
.appBrandMark{
  width:auto !important;
  height:auto !important;
}

/* ---------------------------------------------------------
   Buttons kompakter, aber smooth
   --------------------------------------------------------- */

button,
.btn,
.logout,
.smallBtn,
.manageExercisesBtn,
.add,
.primary,
.secondary,
.save,
.danger,
.editBtn,
.cancelBtn,
.offlineRetry,
.exerciseRestBtn,
.roundTimerPreset,
.roundTimerControl,
.backTraining{
  min-height:36px !important;
  padding:7px 10px !important;
  border-radius:14px !important;
}

/* CTA darf etwas größer sein */
body.strengthLogin .btn{
  min-height:46px !important;
  border-radius:18px !important;
}

/* ---------------------------------------------------------
   Inputs weiterhin hell, nie schwarz
   --------------------------------------------------------- */

input,
select,
textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:rgba(255,255,255,.88) !important;
  color:#1a2937 !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 4px 12px rgba(27,55,78,.07) !important;
  border-radius:14px !important;
}

input:focus,
select:focus,
textarea:focus{
  background:rgba(255,255,255,.96) !important;
  border-color:#71e0b3 !important;
  box-shadow:0 0 0 3px rgba(113,224,179,.18) !important;
}

/* Checkboxen klein und sauber */
input[type="checkbox"]{
  box-shadow:none !important;
}

/* ---------------------------------------------------------
   Roundtimer explizit kompakter
   --------------------------------------------------------- */

body.strengthTraining .roundTimer{
  margin-top:8px !important;
  padding:10px !important;
  border-radius:20px !important;
}

body.strengthTraining .roundTimerClock{
  margin:8px 0 !important;
  font-size:34px !important;
}

body.strengthTraining .roundTimerPresets,
body.strengthTraining .roundTimerControls{
  gap:5px !important;
}

body.strengthTraining .roundTimerPreset,
body.strengthTraining .roundTimerControl{
  min-height:34px !important;
  padding:6px 8px !important;
  border-radius:13px !important;
}

/* ---------------------------------------------------------
   Fortschritt kompakter
   --------------------------------------------------------- */

body.strengthProgress .progressHero{
  padding:12px !important;
  border-radius:22px !important;
}

body.strengthProgress .chartWrap{
  height:185px !important;
  border-radius:16px !important;
}

body.strengthProgress .statValue{
  font-size:20px !important;
}

/* ---------------------------------------------------------
   Profil / Admin / Training Listen kompakter
   --------------------------------------------------------- */

body.strengthProfile .card,
body.strengthAdmin .panel,
body.strengthTraining .panel{
  margin-bottom:8px !important;
}

/* ---------------------------------------------------------
   Mobile noch kompakter
   --------------------------------------------------------- */

@media(max-width:620px){
  .tile,
  .panel,
  .card,
  .timer,
  .baseCard,
  .activeCard,
  .cardioCard,
  .healthBanner,
  .fitnessBox,
  .progressCard,
  .roundTimer,
  .loginOnlyCard{
    padding:9px 10px !important;
    border-radius:20px !important;
  }

  .baseCard,
  .activeCard,
  .cardioCard,
  .statCard,
  .prCard,
  .healthItem{
    padding:8px !important;
    border-radius:16px !important;
  }

  body.strengthTraining .roundTimerClock{
    font-size:31px !important;
  }

  body.strengthProgress .chartWrap{
    height:170px !important;
  }

  .tile .icon,
  .icon,
  .muscleIcon,
  .exportIcon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}


/* =========================================================
   AUCTIVUS 3.28 – KEIN SCHWARZ MEHR + TEXTE SAUBER EINGERÜCKT
   Basis: 3.27
   Ziel:
   - wirklich keine schwarzen Kacheln mehr
   - Profil + Training + Progress + Admin + Dashboard im hellen Glasstil
   - Texte/Labels in iPhone-Ansicht sauber eingerückt
   ========================================================= */

:root{
  --auct-glass-main:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  --auct-glass-soft:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  --auct-glass-accent:linear-gradient(145deg,rgba(76,224,170,.18),rgba(255,255,255,.08));
  --auct-glass-blue:linear-gradient(145deg,rgba(95,195,255,.16),rgba(255,255,255,.07));
  --auct-glass-border:rgba(255,255,255,.22);
  --auct-glass-border-soft:rgba(255,255,255,.14);
  --auct-glass-shadow:0 12px 30px rgba(12,20,30,.10);
  --auct-card-pad:14px;
}

/* ---------- Grundflächen ---------- */

body.strengthProfile .card,
body.strengthTraining .panel,
body.strengthTraining .timer,
body.strengthTraining .baseCard,
body.strengthTraining .activeCard,
body.strengthTraining .cardioCard,
body.strengthTraining .healthBanner,
body.strengthTraining .planEditor,
body.strengthTraining .libraryClosed,
body.strengthProgress .progressCard,
body.strengthProgress .progressHero,
body.strengthAdmin .panel,
body.strengthDashboard .tile,
body.strengthOffline .offlineCard,
body.strengthPrivacy .card{
  background:var(--auct-glass-main) !important;
  border:1px solid var(--auct-glass-border) !important;
  box-shadow:var(--auct-glass-shadow) !important;
  backdrop-filter:blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
  color:var(--app-text) !important;
}

/* Kompakte, saubere Innenabstände */
body.strengthProfile .card,
body.strengthTraining .panel,
body.strengthTraining .timer,
body.strengthTraining .baseCard,
body.strengthTraining .activeCard,
body.strengthTraining .cardioCard,
body.strengthTraining .planEditor,
body.strengthProgress .progressCard,
body.strengthAdmin .panel,
body.strengthDashboard .tile{
  padding-left:var(--auct-card-pad) !important;
  padding-right:var(--auct-card-pad) !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
  border-radius:24px !important;
}

/* ---------- Unterelemente / kleine Kacheln ---------- */

body.strengthProfile .choice label,
body.strengthProfile .healthItem,
body.strengthProfile .fitnessBox,
body.strengthProfile .healthStatus,
body.strengthProfile .bmi,
body.strengthTraining .muscleTile,
body.strengthTraining .planTile,
body.strengthTraining .variant,
body.strengthTraining .manageExercisesBtn,
body.strengthTraining .planExerciseRow,
body.strengthTraining .planAction,
body.strengthTraining .lastValue,
body.strengthTraining .lastTrainingBox,
body.strengthTraining .progressionHint,
body.strengthTraining .progressionChip,
body.strengthTraining .levelBadge,
body.strengthTraining .levelInfo,
body.strengthTraining .exerciseHealthNote,
body.strengthTraining .baseToggle,
body.strengthTraining .exerciseRestRow,
body.strengthTraining .roundTimerPreset,
body.strengthTraining .roundTimerControl,
body.strengthProgress .statCard,
body.strengthProgress .prCard,
body.strengthAdmin .item,
body.strengthAdmin .editBar,
body.strengthAdmin .linkPill,
body.strengthProfile .profileImageActions button,
body.strengthProfile .profileImageActions label{
  background:var(--auct-glass-soft) !important;
  border:1px solid var(--auct-glass-border-soft) !important;
  box-shadow:none !important;
  backdrop-filter:blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%) !important;
  color:var(--app-text) !important;
}

/* grün/blau getönte aktive Zustände – aber nie schwarz */
body.strengthProfile .choice input:checked + label,
body.strengthTraining .muscleTile.active,
body.strengthTraining .planTile.active,
body.strengthTraining .roundTimerPreset.active,
body.strengthTraining .planAction.primaryPlan,
body.strengthTraining .progressionHint.up,
body.strengthTraining .progressionChip.up{
  background:var(--auct-glass-accent) !important;
  border-color:rgba(90,235,175,.42) !important;
  color:#f5fffb !important;
}

body.strengthTraining .manageExercisesBtn,
body.strengthTraining .planAction,
body.strengthTraining .levelInfo,
body.strengthTraining .lastValue,
body.strengthTraining .lastTrainingBox,
body.strengthTraining .progressionHint,
body.strengthTraining .progressionChip{
  background:var(--auct-glass-blue) !important;
}

body.strengthTraining .planAction.dangerPlan{
  background:linear-gradient(145deg,rgba(255,120,135,.16),rgba(255,255,255,.07)) !important;
  border-color:rgba(255,155,165,.28) !important;
}

/* ---------- alte dunkle Flächen restlos entfernen ---------- */

body.strengthProfile .choice label,
body.strengthProfile .healthItem.open,
body.strengthTraining .baseCard,
body.strengthTraining .activeCard,
body.strengthTraining .variant,
body.strengthTraining .cardioCard,
body.strengthTraining .healthBanner,
body.strengthTraining .manageExercisesBtn,
body.strengthTraining .planAction,
body.strengthTraining .tip,
body.strengthTraining .levelBadge,
body.strengthTraining .baseToggle,
body.strengthTraining .roundTimer,
body.strengthTraining .roundTimerPreset,
body.strengthTraining .roundTimerControl,
body.strengthTraining .exerciseRestRow,
body.strengthTraining .muscleTile,
body.strengthTraining .planTile,
body.strengthTraining .bmi,
body.strengthProgress .chartWrap,
body.strengthAdmin .item{
  background-color:transparent !important;
}

/* Dann explizit wieder Glas drauf, damit wirklich nichts schwarz bleibt */
body.strengthTraining .roundTimer{
  background:var(--auct-glass-main) !important;
  border:1px solid var(--auct-glass-border) !important;
  box-shadow:var(--auct-glass-shadow) !important;
  border-radius:26px !important;
}

body.strengthTraining .tip{
  background:var(--auct-glass-soft) !important;
  border:1px solid rgba(120,205,255,.20) !important;
  border-left:3px solid rgba(95,195,255,.48) !important;
}

body.strengthTraining .badge{
  background:var(--auct-glass-blue) !important;
  border:1px solid rgba(135,210,255,.18) !important;
  color:#eff8ff !important;
}

/* ---------- Inputs / selects / textareas ---------- */

body.strengthProfile input:not([type="checkbox"]):not([type="radio"]),
body.strengthProfile select,
body.strengthProfile textarea,
body.strengthTraining input:not([type="checkbox"]):not([type="radio"]),
body.strengthTraining select,
body.strengthTraining textarea,
body.strengthAdmin input:not([type="checkbox"]):not([type="radio"]),
body.strengthAdmin select,
body.strengthAdmin textarea,
body.strengthProgress input:not([type="checkbox"]):not([type="radio"]),
body.strengthProgress select,
body.strengthProgress textarea{
  background:rgba(255,255,255,.88) !important;
  color:#162433 !important;
  border:1px solid rgba(255,255,255,.92) !important;
  border-radius:16px !important;
  box-shadow:0 4px 12px rgba(18,40,60,.06) !important;
  padding-left:14px !important;
  padding-right:14px !important;
}

body.strengthProfile textarea,
body.strengthTraining textarea,
body.strengthAdmin textarea,
body.strengthProgress textarea{
  padding-top:12px !important;
  padding-bottom:12px !important;
}

body.strengthProfile input:focus,
body.strengthProfile select:focus,
body.strengthProfile textarea:focus,
body.strengthTraining input:focus,
body.strengthTraining select:focus,
body.strengthTraining textarea:focus,
body.strengthAdmin input:focus,
body.strengthAdmin select:focus,
body.strengthAdmin textarea:focus,
body.strengthProgress input:focus,
body.strengthProgress select:focus,
body.strengthProgress textarea:focus{
  background:rgba(255,255,255,.95) !important;
  border-color:#72e3b6 !important;
  box-shadow:0 0 0 3px rgba(114,227,182,.18) !important;
}

/* ---------- Checkboxen für iPhone heller ---------- */

body.strengthProfile input[type="checkbox"],
body.strengthTraining input[type="checkbox"],
body.strengthAdmin input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 3px 10px rgba(20,45,65,.06) !important;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
body.strengthProfile input[type="checkbox"]::after,
body.strengthTraining input[type="checkbox"]::after,
body.strengthAdmin input[type="checkbox"]::after{
  content:"";
  width:7px;
  height:12px;
  border:solid transparent;
  border-width:0 3px 3px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .12s ease;
}
body.strengthProfile input[type="checkbox"]:checked,
body.strengthTraining input[type="checkbox"]:checked,
body.strengthAdmin input[type="checkbox"]:checked{
  background:#49db9f !important;
  border-color:#49db9f !important;
}
body.strengthProfile input[type="checkbox"]:checked::after,
body.strengthTraining input[type="checkbox"]:checked::after,
body.strengthAdmin input[type="checkbox"]:checked::after{
  border-color:#072115;
  transform:rotate(45deg) scale(1);
}

/* Radios aus dem Profil sauber darstellen */
body.strengthProfile input[type="radio"]{
  accent-color:#49db9f;
}

/* ---------- Texte / Einrückung / abgeschnittene Labels ---------- */

body.strengthProfile .card h2,
body.strengthTraining .panel h2,
body.strengthTraining .groupTitle h2,
body.strengthProgress .progressHero h2,
body.strengthAdmin .panel h2{
  margin-left:2px !important;
  margin-right:2px !important;
}

body.strengthProfile label,
body.strengthTraining label,
body.strengthAdmin label,
body.strengthProgress label{
  text-indent:0 !important;
  padding-left:3px !important;
  padding-right:3px !important;
  line-height:1.35 !important;
  margin-bottom:6px !important;
}

/* Grid-Inhalt leicht einrücken, damit iPhone nichts links abschneidet */
body.strengthProfile .grid > div,
body.strengthProfile .goalGrid > .choice,
body.strengthProfile .healthTop > div,
body.strengthProfile .healthOptions > .healthItem,
body.strengthTraining .cardioGrid > div,
body.strengthTraining .cardioCards > div,
body.strengthTraining .planGrid > .planTile,
body.strengthTraining .muscleGrid > .muscleTile,
body.strengthTraining .planEditorList > .planExerciseRow{
  min-width:0;
  padding-left:3px !important;
  padding-right:3px !important;
  overflow:visible !important;
}

body.strengthTraining .cardioGrid label,
body.strengthTraining .cardioCards label,
body.strengthTraining .sethead div,
body.strengthTraining .setrow .nr,
body.strengthTraining .exerciseRestText,
body.strengthTraining .baseHead h3,
body.strengthTraining .focus,
body.strengthTraining .reco,
body.strengthTraining .variant strong,
body.strengthTraining .variant span,
body.strengthTraining .cardioCard h3,
body.strengthTraining .cardioCard p,
body.strengthProfile .choice strong,
body.strengthProfile .choice span,
body.strengthProfile .note,
body.strengthProfile .healthItem label{
  padding-left:2px !important;
  padding-right:2px !important;
}

body.strengthTraining .cardioGrid > div,
body.strengthTraining .cardioCards > div{
  display:block;
}

/* Verhindert abgeschnittene Texte in einigen Safari-Situationen */
body.strengthTraining .panel,
body.strengthProfile .card,
body.strengthProgress .progressCard,
body.strengthAdmin .panel{
  overflow:visible !important;
}
body.strengthTraining .baseCard{
  overflow:hidden !important;
}

/* ---------- Kleine Icon-Hintergründe weg ---------- */

body .icon,
body .tile .icon,
body .muscleIcon,
body .exportIcon,
body .linkPillIcon,
body .brandLogoWrap,
body .appBrandMark,
body .profileIcon{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ---------- Mobile Feinschliff ---------- */

@media(max-width:680px){
  :root{ --auct-card-pad:12px; }

  body.strengthProfile .card,
  body.strengthTraining .panel,
  body.strengthTraining .timer,
  body.strengthTraining .baseCard,
  body.strengthTraining .activeCard,
  body.strengthTraining .cardioCard,
  body.strengthProgress .progressCard,
  body.strengthAdmin .panel{
    border-radius:22px !important;
    padding-top:11px !important;
    padding-bottom:11px !important;
  }

  body.strengthTraining .cardioGrid > div,
  body.strengthProfile .grid > div,
  body.strengthProfile .goalGrid > .choice,
  body.strengthProfile .healthTop > div,
  body.strengthProfile .healthOptions > .healthItem{
    padding-left:5px !important;
    padding-right:5px !important;
  }

  body.strengthTraining label,
  body.strengthProfile label{
    font-size:13px !important;
  }

  body.strengthTraining .roundTimerClock{
    font-size:40px !important;
  }
}



/* =========================================================
   AUCTIVUS 3.29 – iPHONE CHECKBOX FIX
   Native Checkbox statt selbst gezeichnetem Haken.
   ========================================================= */

body.strengthProfile input[type="checkbox"],
body.strengthTraining input[type="checkbox"],
body.strengthAdmin input[type="checkbox"],
body.strengthLogin input[type="checkbox"]{
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:4px !important;
  background:transparent !important;
  box-shadow:none !important;
  accent-color:#49db9f !important;
  vertical-align:middle !important;
  display:inline-block !important;
}

/* Alten künstlichen Haken vollständig deaktivieren */
body.strengthProfile input[type="checkbox"]::after,
body.strengthTraining input[type="checkbox"]::after,
body.strengthAdmin input[type="checkbox"]::after,
body.strengthLogin input[type="checkbox"]::after{
  content:none !important;
  display:none !important;
}

/* Checkbox + Text sauber ausrichten */
body.strengthProfile .healthItem label,
body.strengthProfile .check,
body.strengthTraining .check,
body.strengthAdmin .check,
body.strengthLogin .check{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


/* =========================================================
   AUCTIVUS 3.31 – BACKUP WIEDERHERSTELLEN
   ========================================================= */

.restoreDivider{
  height:1px;
  margin:16px 0;
  background:rgba(255,255,255,.15);
}

.restoreBox{
  display:grid;
  gap:10px;
}

.restoreBox > strong{
  font-size:15px;
}

.restoreBox > small{
  color:var(--app-muted);
  font-size:11px;
  line-height:1.45;
}

.restoreFileInput{
  display:none;
}

.restoreFileLabel,
.restoreBackupBtn{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9px 12px;
  border-radius:16px;
  font-weight:900;
}

.restoreFileLabel{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.09);
  color:var(--app-text);
}

.restorePreview{
  display:grid;
  gap:3px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--app-muted);
  font-size:11px;
  line-height:1.4;
}

.restorePreview strong{
  color:var(--app-text);
  font-size:12px;
}

.restorePreview span{
  display:block;
}

.restoreConfirmLabel{
  margin:2px 0 0 !important;
}

.restoreBackupBtn{
  width:100%;
  cursor:pointer;
  border:1px solid rgba(255,190,80,.26) !important;
  background:
    linear-gradient(
      135deg,
      rgba(255,190,80,.24),
      rgba(255,255,255,.10)
    ) !important;
  color:var(--app-text) !important;
}

.restoreBackupBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

/* =========================================================
   AUCTIVUS 3.32 – UI Sammelkorrekturen
   ========================================================= */
body.strengthProfile .choice label,
body.strengthProfile .healthItem,
body.strengthProfile .fitnessBox,
body.strengthProfile .healthStatus,
body.strengthProfile .bmi{
  background:rgba(255,255,255,.09) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
body.strengthProfile .choice input:checked + label{
  background:rgba(76,224,165,.16) !important;
  border-color:rgba(76,224,165,.44) !important;
}
body.strengthProfile #birth_date{
  text-align:left !important;
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
}
body.strengthProfile #birth_date::-webkit-date-and-time-value{
  text-align:left !important;
}
body.strengthDashboard .grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}


/* ============================================================
   AUCTIVUS 3.45 – einheitlicher App-Header + dunkle Schrift
   ============================================================ */
.auctivusUnifiedHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:10px 12px;
  border-radius:22px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
}
.auctivusUnifiedBrand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.auctivusUnifiedBrand img{
  width:44px;
  height:44px;
  flex:0 0 44px;
  object-fit:contain;
}
.auctivusUnifiedBrandCopy{
  min-width:0;
}
.auctivusUnifiedBrandName{
  display:block;
  color:#07111f !important;
  font-size:20px;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
}
.auctivusUnifiedBrandClaim{
  display:block;
  margin-top:4px;
  color:#334155 !important;
  font-size:9px;
  line-height:1.2;
  letter-spacing:.10em;
  white-space:nowrap;
}
.auctivusUnifiedBack{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:15px;
  border:1px solid rgba(7,17,31,.18);
  background:rgba(255,255,255,.18);
  color:#07111f !important;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.auctivusPageHeading{
  margin:8px 2px 12px;
}
.auctivusPageHeading h1{
  margin:0;
  color:#07111f !important;
}
.auctivusPageHeading p,
.auctivusPageHeading .muted{
  margin:4px 0 0;
  color:#334155 !important;
}

/* Haupt-Appseiten: Text konsequent dunkel */
.strengthDashboard,
.strengthTraining,
.strengthProfile,
.strengthSettings,
.strengthProgress,
.strengthAdmin,
.strengthNutrition,
.strengthDelete{
  color:#07111f !important;
}
.strengthDashboard h1,.strengthDashboard h2,.strengthDashboard h3,.strengthDashboard strong,.strengthDashboard label,
.strengthTraining h1,.strengthTraining h2,.strengthTraining h3,.strengthTraining strong,.strengthTraining label,
.strengthProfile h1,.strengthProfile h2,.strengthProfile h3,.strengthProfile strong,.strengthProfile label,
.strengthSettings h1,.strengthSettings h2,.strengthSettings h3,.strengthSettings strong,.strengthSettings label,
.strengthProgress h1,.strengthProgress h2,.strengthProgress h3,.strengthProgress strong,.strengthProgress label,
.strengthAdmin h1,.strengthAdmin h2,.strengthAdmin h3,.strengthAdmin strong,.strengthAdmin label,
.strengthNutrition h1,.strengthNutrition h2,.strengthNutrition h3,.strengthNutrition strong,.strengthNutrition label,
.strengthDelete h1,.strengthDelete h2,.strengthDelete h3,.strengthDelete strong,.strengthDelete label{
  color:#07111f !important;
}
.strengthDashboard .muted,.strengthDashboard .sub,.strengthDashboard small,
.strengthTraining .muted,.strengthTraining .sub,.strengthTraining small,
.strengthProfile .muted,.strengthProfile .lead,.strengthProfile small,
.strengthSettings .muted,.strengthSettings .settingsNote,.strengthSettings small,
.strengthProgress .muted,.strengthProgress p,.strengthProgress small,
.strengthAdmin .muted,.strengthAdmin .adminHelp,.strengthAdmin small,
.strengthNutrition .muted,.strengthNutrition small,
.strengthDelete .muted,.strengthDelete .note,.strengthDelete small{
  color:#334155 !important;
}

/* Glasflächen und Navigations-/Sekundärbuttons behalten den dunklen Text */
.strengthDashboard a,.strengthDashboard button,
.strengthTraining a,.strengthTraining button,
.strengthProfile a,.strengthProfile button,
.strengthSettings a,.strengthSettings button,
.strengthProgress a,.strengthProgress button,
.strengthAdmin a,.strengthAdmin button,
.strengthNutrition a,.strengthNutrition button,
.strengthDelete a,.strengthDelete button{
  color:#07111f;
}

@media(max-width:560px){
  .auctivusUnifiedHeader{
    padding:9px 10px;
    border-radius:20px;
  }
  .auctivusUnifiedBrand img{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .auctivusUnifiedBrandName{
    font-size:18px;
  }
  .auctivusUnifiedBrandClaim{
    font-size:8px;
  }
  .auctivusUnifiedBack{
    padding:8px 10px;
    font-size:11px;
  }
}


/* ============================================================
   AUCTIVUS 3.46 – weiße Schrift im gesamten App-Inhaltsbereich
   ============================================================ */
.auctivusUnifiedBrandName,
.auctivusUnifiedBrandClaim,
.auctivusUnifiedBack,
.auctivusPageHeading h1,
.auctivusPageHeading p,
.auctivusPageHeading .muted{
  color:#fff !important;
}

.strengthDashboard,
.strengthTraining,
.strengthProfile,
.strengthSettings,
.strengthProgress,
.strengthAdmin,
.strengthNutrition,
.strengthDelete{
  color:#fff !important;
}

.strengthDashboard h1,.strengthDashboard h2,.strengthDashboard h3,.strengthDashboard strong,.strengthDashboard label,
.strengthTraining h1,.strengthTraining h2,.strengthTraining h3,.strengthTraining strong,.strengthTraining label,
.strengthProfile h1,.strengthProfile h2,.strengthProfile h3,.strengthProfile strong,.strengthProfile label,
.strengthSettings h1,.strengthSettings h2,.strengthSettings h3,.strengthSettings strong,.strengthSettings label,
.strengthProgress h1,.strengthProgress h2,.strengthProgress h3,.strengthProgress strong,.strengthProgress label,
.strengthAdmin h1,.strengthAdmin h2,.strengthAdmin h3,.strengthAdmin strong,.strengthAdmin label,
.strengthNutrition h1,.strengthNutrition h2,.strengthNutrition h3,.strengthNutrition strong,.strengthNutrition label,
.strengthDelete h1,.strengthDelete h2,.strengthDelete h3,.strengthDelete strong,.strengthDelete label{
  color:#fff !important;
}

.strengthDashboard .muted,.strengthDashboard .sub,.strengthDashboard small,
.strengthTraining .muted,.strengthTraining .sub,.strengthTraining small,
.strengthProfile .muted,.strengthProfile .lead,.strengthProfile small,
.strengthSettings .muted,.strengthSettings .settingsNote,.strengthSettings small,
.strengthProgress .muted,.strengthProgress p,.strengthProgress small,
.strengthAdmin .muted,.strengthAdmin .adminHelp,.strengthAdmin small,
.strengthNutrition .muted,.strengthNutrition small,
.strengthDelete .muted,.strengthDelete .note,.strengthDelete small{
  color:rgba(255,255,255,.74) !important;
}

.strengthDashboard a,.strengthDashboard button,
.strengthTraining a,.strengthTraining button,
.strengthProfile a,.strengthProfile button,
.strengthSettings a,.strengthSettings button,
.strengthProgress a,.strengthProgress button,
.strengthAdmin a,.strengthAdmin button,
.strengthNutrition a,.strengthNutrition button,
.strengthDelete a,.strengthDelete button{
  color:#fff;
}

/* Helle Formularfelder brauchen weiterhin dunkle Eingabeschrift */
.strengthDashboard input,.strengthDashboard select,.strengthDashboard textarea,
.strengthTraining input,.strengthTraining select,.strengthTraining textarea,
.strengthProfile input,.strengthProfile select,.strengthProfile textarea,
.strengthSettings input,.strengthSettings select,.strengthSettings textarea,
.strengthProgress input,.strengthProgress select,.strengthProgress textarea,
.strengthAdmin input,.strengthAdmin select,.strengthAdmin textarea,
.strengthNutrition input,.strengthNutrition select,.strengthNutrition textarea,
.strengthDelete input,.strengthDelete select,.strengthDelete textarea{
  color:#172534 !important;
}

/* Primäre grüne Aktionsflächen bleiben mit dunklem Text besser lesbar */
.strengthTraining .start,
.strengthTraining .roundTimerControl.main,
.strengthNutrition .nutritionPrimaryBtn,
.strengthNutrition #calculateNutritionBtn{
  color:#061710 !important;
}


/* ============================================================
   AUCTIVUS 3.47 – Mobile-Kontrast für weiße Schrift
   Auf kleinen Displays bleiben Bild + Glasflächen bewusst dunkel,
   auch wenn iOS/System das Light-Theme aktiviert.
   ============================================================ */
@media(max-width:700px){
  html[data-theme="light"] body.strengthDashboard,
  html[data-theme="light"] body.strengthTraining,
  html[data-theme="light"] body.strengthProfile,
  html[data-theme="light"] body.strengthSettings,
  html[data-theme="light"] body.strengthProgress,
  html[data-theme="light"] body.strengthAdmin,
  html[data-theme="light"] body.strengthNutrition,
  html[data-theme="light"] body.strengthDelete,
  html[data-theme="system"] body.strengthDashboard,
  html[data-theme="system"] body.strengthTraining,
  html[data-theme="system"] body.strengthProfile,
  html[data-theme="system"] body.strengthSettings,
  html[data-theme="system"] body.strengthProgress,
  html[data-theme="system"] body.strengthAdmin,
  html[data-theme="system"] body.strengthNutrition,
  html[data-theme="system"] body.strengthDelete{
    color:#fff !important;
    background-color:#07111f !important;
  }

  html[data-theme="light"] body.strengthDashboard::after,
  html[data-theme="light"] body.strengthTraining::after,
  html[data-theme="light"] body.strengthProfile::after,
  html[data-theme="light"] body.strengthSettings::after,
  html[data-theme="light"] body.strengthProgress::after,
  html[data-theme="light"] body.strengthAdmin::after,
  html[data-theme="light"] body.strengthNutrition::after,
  html[data-theme="light"] body.strengthDelete::after,
  html[data-theme="system"] body.strengthDashboard::after,
  html[data-theme="system"] body.strengthTraining::after,
  html[data-theme="system"] body.strengthProfile::after,
  html[data-theme="system"] body.strengthSettings::after,
  html[data-theme="system"] body.strengthProgress::after,
  html[data-theme="system"] body.strengthAdmin::after,
  html[data-theme="system"] body.strengthNutrition::after,
  html[data-theme="system"] body.strengthDelete::after{
    background:rgba(3,12,22,.48) !important;
  }

  html[data-theme="light"] body.strengthDashboard .tile,
  html[data-theme="light"] body.strengthTraining .panel,
  html[data-theme="light"] body.strengthTraining .card,
  html[data-theme="light"] body.strengthTraining .trainingTimerHub,
  html[data-theme="light"] body.strengthTraining .trainingTimerSection,
  html[data-theme="light"] body.strengthProfile .card,
  html[data-theme="light"] body.strengthSettings .settingsCard,
  html[data-theme="light"] body.strengthProgress .progressHero,
  html[data-theme="light"] body.strengthProgress .progressCard,
  html[data-theme="light"] body.strengthAdmin .card,
  html[data-theme="light"] body.strengthNutrition .card,
  html[data-theme="light"] body.strengthNutrition .nutritionBrandBar,
  html[data-theme="light"] body.strengthDelete .card,
  html[data-theme="system"] body.strengthDashboard .tile,
  html[data-theme="system"] body.strengthTraining .panel,
  html[data-theme="system"] body.strengthTraining .card,
  html[data-theme="system"] body.strengthTraining .trainingTimerHub,
  html[data-theme="system"] body.strengthTraining .trainingTimerSection,
  html[data-theme="system"] body.strengthProfile .card,
  html[data-theme="system"] body.strengthSettings .settingsCard,
  html[data-theme="system"] body.strengthProgress .progressHero,
  html[data-theme="system"] body.strengthProgress .progressCard,
  html[data-theme="system"] body.strengthAdmin .card,
  html[data-theme="system"] body.strengthNutrition .card,
  html[data-theme="system"] body.strengthNutrition .nutritionBrandBar,
  html[data-theme="system"] body.strengthDelete .card{
    background:rgba(9,25,39,.72) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#fff !important;
    box-shadow:none !important;
  }

  html[data-theme="light"] .auctivusUnifiedHeader,
  html[data-theme="system"] .auctivusUnifiedHeader{
    background:rgba(9,25,39,.78) !important;
    border-color:rgba(255,255,255,.20) !important;
  }

  html[data-theme="light"] .auctivusUnifiedBack,
  html[data-theme="system"] .auctivusUnifiedBack{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#fff !important;
  }

  html[data-theme="light"] body.strengthSettings .settingsAction,
  html[data-theme="light"] body.strengthSettings .restorePreview,
  html[data-theme="light"] body.strengthSettings .status.show,
  html[data-theme="system"] body.strengthSettings .settingsAction,
  html[data-theme="system"] body.strengthSettings .restorePreview,
  html[data-theme="system"] body.strengthSettings .status.show{
    background:rgba(255,255,255,.075) !important;
    border-color:rgba(255,255,255,.16) !important;
    color:#fff !important;
  }

  html[data-theme="light"] body.strengthSettings .dangerAction,
  html[data-theme="system"] body.strengthSettings .dangerAction{
    background:rgba(255,95,115,.12) !important;
    border-color:rgba(255,130,145,.26) !important;
  }

  /* Weiße Formularfelder bleiben bewusst hell und lesbar. */
  html[data-theme="light"] body.strengthDashboard input,
  html[data-theme="light"] body.strengthTraining input,
  html[data-theme="light"] body.strengthProfile input,
  html[data-theme="light"] body.strengthSettings input,
  html[data-theme="light"] body.strengthProgress input,
  html[data-theme="light"] body.strengthAdmin input,
  html[data-theme="light"] body.strengthNutrition input,
  html[data-theme="light"] body.strengthDelete input,
  html[data-theme="system"] body.strengthDashboard input,
  html[data-theme="system"] body.strengthTraining input,
  html[data-theme="system"] body.strengthProfile input,
  html[data-theme="system"] body.strengthSettings input,
  html[data-theme="system"] body.strengthProgress input,
  html[data-theme="system"] body.strengthAdmin input,
  html[data-theme="system"] body.strengthNutrition input,
  html[data-theme="system"] body.strengthDelete input{
    background:rgba(255,255,255,.94) !important;
    color:#172534 !important;
  }

  /* Settings-Seite aus dem Screenshot gezielt absichern. */
  body.strengthSettings{
    background:
      linear-gradient(rgba(3,12,22,.55),rgba(3,12,22,.64)),
      url("assets/backgrounds/dashboard-gym.webp") center center/cover fixed !important;
  }
  body.strengthSettings .settingsCard{
    background:rgba(9,25,39,.74) !important;
  }
  body.strengthSettings .settingsNote,
  body.strengthSettings .restoreBox small,
  body.strengthSettings .restorePreview{
    color:rgba(255,255,255,.72) !important;
  }
}


/* ============================================================
   AUCTIVUS 3.47.4 – iPhone Safari / PWA Viewport Fix
   - keine doppelte Safe-Area
   - Header nie unter der Statusleiste
   - kein übergroßer Leerraum oberhalb des Headers
   ============================================================ */

html{
  min-height:100%;
  background:#07111f;
}

body{
  min-height:100vh;min-height:100dvh;
  padding-top:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Normale Browseransicht: Safari verwaltet die obere Browser-/Statusleiste selbst. */
@media not all and (display-mode: standalone){
  body.strengthDashboard > .wrap,
  body.strengthTraining > .wrap,
  body.strengthProfile > .wrap,
  body.strengthSettings > .settingsWrap,
  body.strengthProgress > .progressWrap,
  body.strengthAdmin > .wrap,
  body.strengthNutrition > .wrap,
  body.strengthDelete > .deleteWrap{
    padding-top:16px !important;
  }
}

/* Installierte PWA: nur EINMAL den tatsächlichen iPhone-Safe-Area-Abstand ergänzen. */
@media (display-mode: standalone){
  body.strengthDashboard > .wrap,
  body.strengthTraining > .wrap,
  body.strengthProfile > .wrap,
  body.strengthSettings > .settingsWrap,
  body.strengthProgress > .progressWrap,
  body.strengthAdmin > .wrap,
  body.strengthNutrition > .wrap,
  body.strengthDelete > .deleteWrap{
    padding-top:max(12px, env(safe-area-inset-top)) !important;
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
    padding-bottom:max(28px, env(safe-area-inset-bottom)) !important;
  }

  .auctivusUnifiedHeader,
  body.strengthNutrition .nutritionBrandBar{
    margin-top:0 !important;
  }
}

/* iOS Home-Screen-Webapps erkennen zusätzlich dieses Apple-Medium. */
@media (display-mode: standalone) and (max-width:700px){
  .auctivusUnifiedHeader{
    position:relative !important;
    top:auto !important;
    transform:none !important;
  }

  .auctivusPageHeading{
    margin-top:14px !important;
  }
}

/* Verhindert Scroll-/Anchor-Reste beim erneuten Öffnen der Profilseite. */
body.strengthProfile .wrap{
  scroll-margin-top:0 !important;
}

/* Kein Element darf künstlich über den oberen Viewport hinausragen. */
.auctivusUnifiedHeader,
.auctivusUnifiedBrand,
.auctivusUnifiedBack{
  translate:none !important;
}

/* Mobile health warning: opaque surface and readable text over the gym photo. */
@media(max-width:700px){
  body.strengthTraining #healthBanner.warning{
    background:#172534 !important;
    border-color:#93a7c1 !important;
    color:#ffffff !important;
  }
  body.strengthTraining #healthBanner.warning strong,
  body.strengthTraining #healthBanner.warning .healthList,
  body.strengthTraining #healthBanner.warning .healthList li{
    color:#ffffff !important;
  }
}

/* Mobile dashboard greeting: readable over the bright background photo. */
@media(max-width:700px){
  body.strengthDashboard .auctivusPageHeading{
    background:#172534 !important;
    border-radius:12px;
    padding:10px 12px;
  }
  body.strengthDashboard .auctivusPageHeading h1,
  body.strengthDashboard .auctivusPageHeading p{
    color:#ffffff !important;
  }
}

/* Keep the existing two-column dashboard readable on narrow phones. */
@media(max-width:360px){
  body.strengthDashboard .tile{
    padding:8px !important;
    gap:6px !important;
  }
  body.strengthDashboard .tile strong{
    font-size:12px !important;
    min-width:0;
    overflow-wrap:anywhere;
  }
}

/* AUCTIVUS visual refresh: presentation only; existing behavior and assets retained. */
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin){
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin:0;
  --modern-surface:#122332;
  --modern-surface-raised:#1a3041;
  --modern-text:#f5f8fa;
  --modern-muted:#bdcbd6;
  background-color:#142230 !important;
  background-blend-mode:multiply !important;
  color:var(--modern-text) !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.auctivusUnifiedHeader,.nutritionBrandBar){
  background:rgba(12,25,37,.96) !important;
  border-color:rgba(182,208,224,.18) !important;
  border-radius:20px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.16) !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) .auctivusPageHeading{
  background:transparent !important;
  padding:12px 4px !important;
  margin:12px 2px 18px !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.auctivusPageHeading h1,.auctivusPageHeading p){
  color:var(--modern-text) !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.card,.panel,.settingsCard,.progressCard,.progressHero,.prCard,.tile,.baseCard,.activeCard,.cardioCard,.trainingTimerHub,.nutritionCalculatorCard,.nutritionHistoryCard,.mealBuilderCard){
  background:var(--modern-surface) !important;
  border:1px solid rgba(182,208,224,.18) !important;
  border-radius:20px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.14) !important;
  color:var(--modern-text) !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.muted,.sub,.cardSub,.settingsNote,.adminHelp,.nutritionStatus,.nutritionCalcNote,.groupMeta,.planHint,.statLabel,.chartEmpty,.progressHero p){
  color:var(--modern-muted) !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.muscleTile,.planTile,.statCard,.variant,.mealEntry,.builderItem,.templateCard,.foodResult,.trainingTimerSection,.roundTimerSection){
  background:var(--modern-surface-raised) !important;
  border-color:rgba(182,208,224,.18) !important;
  border-radius:16px !important;
  color:var(--modern-text) !important;
}
html:root body.strengthTraining :is(.muscleTile.active,.planTile.active){
  background:#193d34 !important;
  border-color:#66dca7 !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.card,.panel,.settingsCard,.progressCard){
  padding:18px !important;
  margin-bottom:14px !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.btn,.secondary,.nutritionSecondaryBtn,.nutritionSmallBtn,.roundTimerPreset,.roundTimerControl,.planAction){
  border-radius:12px !important;
}
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(a,button,input,select,textarea):focus-visible{
  outline:3px solid #66dca7 !important;
  outline-offset:3px;
}
html:root body.strengthDashboard .grid{
  gap:14px !important;
}
html:root body.strengthDashboard .tile{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start !important;
  justify-content:flex-start;
  gap:0 !important;
  min-height:180px !important;
  padding:20px !important;
  text-align:left;
  position:relative;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
html:root body.strengthDashboard .tile .icon{
  width:52px !important;
  height:52px !important;
  margin-bottom:20px;
  border-radius:14px !important;
  background:#213a4b !important;
}
html:root body.strengthDashboard .tile strong{
  font-size:18px !important;
  line-height:1.25 !important;
  overflow-wrap:normal;
}
html:root body.strengthDashboard .tile::before{
  display:none !important;
}
html:root body.strengthDashboard .tile::after{
  content:'→';
  position:absolute;
  top:18px;
  right:18px;
  font-size:20px;
  color:#bdcbd6;
  background:none !important;
  width:auto;
  height:auto;
  left:auto;
  bottom:auto;
}
html:root body.strengthDashboard .tile.training{
  background:#153c32 !important;
  border-color:rgba(102,220,167,.42) !important;
}
html:root body.strengthDashboard .tile.training .icon{
  background:#214c3f !important;
}
html:root body.strengthDashboard .tile .dashboardTileHint{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  color:var(--modern-muted) !important;
}
@media(hover:hover){
  html:root body.strengthDashboard .tile:hover{
    transform:translateY(-3px);
    border-color:#66dca7 !important;
  }
}
@media(max-width:700px){
  html:root body.strengthDashboard .grid{gap:12px !important;}
  html:root body.strengthDashboard .tile{
    min-height:174px !important;
    padding:16px !important;
  }
  html:root body.strengthDashboard .tile strong{font-size:16px !important;}
  html:root body.strengthDashboard .tile .icon{margin-bottom:18px;}
  html:root body:is(.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.card,.panel,.settingsCard,.progressCard){
    padding:14px !important;
  }
}
@media(max-width:360px){
  html:root body.strengthDashboard .tile{padding:12px !important;}
  html:root body.strengthDashboard .tile strong{font-size:14px !important;}
  html:root body.strengthDashboard .tile .dashboardTileHint{font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
  html:root body.strengthDashboard .tile{transition:none !important;}
  html:root body.strengthDashboard .tile:hover{transform:none !important;}
}

/* Clear text contrast for existing secondary actions and timer controls. */
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(.btn,.secondary,.nutritionSecondaryBtn,.nutritionSmallBtn,.roundTimerPreset,.roundTimerControl,.roundCustomApply,.manageExercisesBtn,.profileImagePick,.profileImageBtn){
  background:#213b4b !important;
  color:#f5f8fa !important;
  border-color:rgba(182,208,224,.24) !important;
}
html:root body.strengthTraining .roundTimerPreset.active{
  background:#193d34 !important;
  border-color:#66dca7 !important;
}

html:root body.strengthProgress .statLabel{
  font-size:12px;
  line-height:1.4;
}

/* Consistent readable fields, including calculator fields outside nutritionForm. */
html:root body:is(.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
  font-size:16px !important;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px !important;
}
html:root body.strengthNutrition .nutritionFormGrid > label{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  font-size:13px;
  color:#f5f8fa !important;
}
html:root body.strengthNutrition .nutritionFormGrid > label :is(input,select,textarea){
  width:100%;
}
html:root body.strengthNutrition :is(.nutritionCalcNote,.nutritionWeightGoalMeta,.weightGoalTrendMeta){
  color:#bdcbd6 !important;
}

/* Local muscle and equipment illustrations; existing selection behavior retained. */
html:root body.strengthTraining .muscleGrid{
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr)) !important;
  gap:12px !important;
}
html:root body.strengthTraining .muscleTile{
  min-height:170px !important;
  padding:14px 10px !important;
  gap:10px;
}
html:root body.strengthTraining .muscleTile .muscleIcon{
  display:block;
  width:70px !important;
  height:106px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  font-size:0;
}
html:root body.strengthTraining .muscleIllustration{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
html:root body.strengthTraining .muscleName{
  font-size:13px !important;
  line-height:1.35;
  color:#f5f8fa !important;
}
html:root body.strengthTraining .baseVisual{
  width:46px;
  height:76px;
  flex:0 0 46px;
}
html:root body.strengthTraining .baseHeadMain{min-width:0;}
html:root body.strengthTraining .variantWithIllustration{
  grid-template-columns:48px minmax(0,1fr) auto !important;
  gap:12px !important;
}
html:root body.strengthTraining .variantVisual{
  width:48px;
  height:56px;
  align-self:start;
  padding:4px;
  border-radius:12px;
  background:#213b4b;
}
html:root body.strengthTraining .equipmentIllustration{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media(max-width:420px){
  html:root body.strengthTraining .muscleGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html:root body.strengthTraining .variantWithIllustration{
    grid-template-columns:38px minmax(0,1fr) auto !important;
    gap:8px !important;
  }
  html:root body.strengthTraining .variantVisual{width:38px;height:46px;}
}

/* Figure choice changes illustration assets only. */
html:root body.strengthTraining .figureControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
html:root body.strengthTraining .figureControls .figureLabel{color:#c6d5df;font-size:14px;margin-right:4px}
html:root body.strengthTraining .figureControls button{background:#1a3041;color:#f5f8fa;border:1px solid #40576a;border-radius:12px;padding:10px 14px;min-height:44px;font-size:14px;cursor:pointer}
html:root body.strengthTraining .figureControls button[aria-pressed="true"]{background:#284b40;border-color:#66dca7;color:#b4f6d8}
html:root body.strengthTraining .figureControls button:focus-visible{outline:2px solid #66dca7;outline-offset:3px}
@media(max-width:420px){html:root body.strengthTraining .figureControls{gap:6px}html:root body.strengthTraining .figureControls .figureLabel{flex-basis:100%}html:root body.strengthTraining .figureControls button{flex:1;padding:10px 8px}}

/* Muscle details stay behind their tile; native dialog handles focus and Escape. */
html:root body.strengthTraining.muscleDetailsOpen{overflow:hidden}
html:root body.strengthTraining .muscleDetails{width:min(840px,calc(100% - 40px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:0;border:1px solid #40576a;border-radius:22px;background:#122332;color:#f5f8fa;box-shadow:0 24px 80px #0009;overflow:auto}
html:root body.strengthTraining .muscleDetails::backdrop{background:rgba(4,12,19,.8)}
html:root body.strengthTraining .muscleDetailsHeader{display:flex;align-items:center;gap:18px;padding:16px 20px;position:sticky;top:0;z-index:2;background:#122332;border-bottom:1px solid #40576a}
html:root body.strengthTraining .muscleDetailsHeader h2{margin:0;min-width:0;font-size:22px}
html:root body.strengthTraining .muscleDetailsBack{min-height:44px;padding:10px 14px;border:1px solid #40576a;border-radius:12px;background:#1a3041;color:#f5f8fa;flex-shrink:0;cursor:pointer}
html:root body.strengthTraining .muscleDetailsBody{padding:16px 20px 24px}
html:root body.strengthTraining .muscleDetailsStatus{color:#b4f6d8;margin:0 0 12px}
html:root body.strengthTraining .muscleDetailsStatus:empty{display:none}
@media(max-width:600px){
 html:root body.strengthTraining .muscleDetails{position:fixed;inset:0;margin:0;width:100%;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border:0;border-radius:0}
 html:root body.strengthTraining .muscleDetailsHeader{padding:calc(12px + env(safe-area-inset-top)) 14px 12px;gap:12px}
 html:root body.strengthTraining .muscleDetailsHeader h2{font-size:20px}
 html:root body.strengthTraining .muscleDetailsBody{padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
}
/* Keep the compact detail content readable within the existing palette. */
html:root body.strengthTraining .muscleDetails .group{margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
html:root body.strengthTraining .muscleDetails .groupImage,
html:root body.strengthTraining .muscleDetails .groupTitle h2{display:none}
html:root body.strengthTraining .muscleDetails :is(.groupMeta,.focus,.reco,.baseAccordionHint,.lastValue,.variant span){color:#c6d5df !important;line-height:1.5}
html:root body.strengthTraining .muscleDetails .exerciseHealthNote{color:#f2dcaf !important;background:#302d26 !important;border:1px solid #695b3b !important;line-height:1.5}
@media(max-width:600px){
 html:root body.strengthTraining .muscleDetails .baseHead{display:grid;grid-template-columns:40px minmax(0,1fr) 42px;gap:10px}
 html:root body.strengthTraining .muscleDetails .baseVisual{width:40px;flex-basis:40px}
 html:root body.strengthTraining .muscleDetails .baseHeadMeta .badge{display:none}
 html:root body.strengthTraining .muscleDetails .baseHeadMeta{gap:0}
}

/* More legible equipment previews in the exercise variants. */
html:root body.strengthTraining .variantWithIllustration{grid-template-columns:64px minmax(0,1fr) auto !important}
html:root body.strengthTraining .variantVisual{width:64px;height:72px;padding:4px;background:#1a3041;border:1px solid #40576a}
@media(max-width:420px){html:root body.strengthTraining .variantWithIllustration{grid-template-columns:52px minmax(0,1fr) auto !important}html:root body.strengthTraining .variantVisual{width:52px;height:60px}}

/* Optional video links stay inside each opened exercise variant. */
html:root body.strengthTraining .exerciseVideo{margin:10px 0}
html:root body.strengthTraining .exerciseVideoLink{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #66dca7;background:#234a3c;color:#b4f6d8 !important;font-size:13px;font-weight:700;text-decoration:none;line-height:1.4;max-width:100%;box-sizing:border-box}
html:root body.strengthTraining .muscleDetails .exerciseVideoLink span{display:inline;margin:0;color:inherit !important;font-size:inherit}
html:root body.strengthTraining .exerciseVideo small{display:block;margin-top:5px;color:#c6d5df;font-size:11px;line-height:1.45}
html:root body.strengthTraining .exerciseVideoLink:focus-visible{outline:2px solid #66dca7;outline-offset:3px}

/* Training surfaces remain dark in the refreshed palette, including empty states. */
html:root body.strengthTraining :is(.lastValue,.lastTrainingBox,.progressionHint,.progressionChip){
  color:#d7e5ef !important;
  font-size:12px;
  line-height:1.5;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}
html:root body.strengthTraining :is(.progressionHint.up,.progressionChip.up){color:#dcffea !important}
html:root body.strengthTraining :is(.progressionHint.check,.progressionChip.check){color:#ffe7ba !important}
html:root body.strengthTraining :is(.add,.baseToggle){color:#b4f6d8 !important;background:#1a3041 !important}
html:root body.strengthTraining :is(.add,.baseToggle):focus-visible{outline:3px solid #66dca7 !important;outline-offset:3px}

/* Keep inherited text tokens aligned with the dark app surfaces in every section. */
html:root body:is(.strengthDashboard,.strengthTraining,.strengthProfile,.strengthSettings,.strengthProgress,.strengthNutrition,.strengthAdmin){
  --app-text:#f5f8fa;
  --app-muted:#bdcbd6;
  --text:#f5f8fa;
  --muted:#bdcbd6;
}