:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  background: #171819;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
button:disabled { cursor: wait; opacity: .65; }

.scene {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: #181a1b url('/batcave-original.png') center center / cover no-repeat;
}
.scene::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.scene.is-locked { background: #151618; }
.scene.is-locked::before {
  content: '';
  position: absolute;
  inset: -20px;
  z-index: -1;
  background: url('/batcave-original.png') center center / cover no-repeat;
  filter: blur(15px) brightness(.83);
}
.scene.is-locked::after { background: rgba(25,27,29,.16); }

.login-shell {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px;
}
.login-area { position: relative; width: min(315px, 100%); }
.login-form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 53px;
  background: rgba(28, 29, 31, .4);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  backdrop-filter: blur(18px);
}
.login-form input {
  flex: 1;
  width: 0;
  height: 100%;
  padding: 0 15px;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  letter-spacing: .12em;
  font-size: 15px;
}
.login-form input::placeholder { color: rgba(255,255,255,.83); letter-spacing: .02em; }
.login-submit {
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
}
.login-message {
  min-height: 25px;
  margin: 10px 0 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 0 1px 4px #000;
}
.preview-entry {
  display: block;
  margin: 14px auto 0;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,.36);
  font-size: 12px;
}

.dashboard-shell { position: relative; min-height: 100svh; }
.site-title {
  position: absolute;
  z-index: 1;
  top: 10.1%; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  color: #171717;
  font-family: "American Typewriter", "Courier New", "Liberation Mono", monospace;
  font-weight: 800;
  letter-spacing: -.018em;
  font-size: clamp(26px, 2.6vw, 43px);
  line-height: 1.15;
}
.top-actions { position: absolute; top: 18px; right: 23px; display: flex; gap: 8px; z-index: 3; }
.subtle-button {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  padding: 9px 13px;
  background: rgba(17,18,20,.48);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 12px;
}
.subtle-button:hover { background: rgba(17,18,20,.75); }

.widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(15px, 1.4vw, 21px);
  width: clamp(190px, 22vw, 325px);
  min-height: 119px;
  color: #f9f9f9;
  background: rgba(22,24,26,.57);
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 13px;
  box-shadow: 0 5px 18px rgba(0,0,0,.10);
  backdrop-filter: blur(12px);
}
.widget h2 { margin: 0; font-size: clamp(13px, 1vw, 16px); font-weight: 600; letter-spacing: .02em; }
.widget .empty { margin: 0; font-size: clamp(29px, 2.5vw, 39px); line-height: 1; font-weight: 300; }
.widget .status { margin: 0; color: rgba(255,255,255,.78); font-size: 11px; letter-spacing: .015em; }
.widget--nutrition { top: 24%; left: 5.8%; }
.widget--calendar { top: 24%; left: 50%; transform: translateX(-50%); }
.widget--training { top: 24%; right: 5.8%; }
.widget--reminders { bottom: 9.5%; left: 12%; }
.widget--projects { bottom: 9.5%; right: 12%; }

.shortcut-hint {
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.46);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
}
.preview-note {
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 3;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.68);
  padding: 8px 12px;
  border-radius: 6px;
}

.drawer-overlay { position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,.42); }
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 90vw);
  padding: 29px 24px;
  background: rgba(20,21,23,.95);
  border-left: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(25px);
  overflow: auto;
}
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.drawer-header h2 { margin: 0; font-size: 18px; font-weight: 500; }
.drawer-close { background: transparent; border: 0; color: white; font-size: 23px; }
.module-list { display: grid; gap: 6px; }
.module-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  font-size: 13px;
}
.module-link:hover { background: rgba(255,255,255,.13); }
.module-index { width: 26px; font-family: ui-monospace, monospace; color: rgba(255,255,255,.72); }
.module-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 32px;
}
.module-panel {
  width: min(550px, 100%);
  padding: 34px 38px;
  color: white;
  background: rgba(20,22,24,.72);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  backdrop-filter: blur(20px);
}
.module-panel p { color: rgba(255,255,255,.8); line-height: 1.6; }
.module-panel h1 { font-size: 27px; font-weight: 500; margin-bottom: 6px; }
.link-back { color: #fff; font-size: 13px; }

@media (max-width: 1150px) and (min-width: 780px) {
  .widget { width: 26vw; padding: 14px; }
  .widget--nutrition { left: 3%; }
  .widget--training { right: 3%; }
  .widget--reminders { left: 7%; }
  .widget--projects { right: 7%; }
}
@media (max-height: 740px) and (min-width: 780px) {
  .widget { min-height: 93px; gap: 6px; padding: 12px 17px; }
  .widget--nutrition, .widget--training, .widget--calendar { top: 25%; }
  .widget--reminders, .widget--projects { bottom: 7.7%; }
  .site-title { top: 9.5%; }
}
/* Mobile isn't being designed yet; this is solely a safe, readable fallback. */
@media (max-width: 779px) {
  .scene { overflow: auto; background-position: center; }
  .dashboard-shell { padding: 75px 16px 70px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .site-title { position: static; transform: none; font-size: clamp(18px, 4.9vw, 32px); margin: 0 0 20px; }
  .widget { position: static; transform: none; width: min(100%, 440px); min-height: 110px; }
  .top-actions { top: 12px; right: 14px; }
  .shortcut-hint { bottom: 12px; }
  .preview-note { top: 13px; left: 12px; max-width: 35%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Freigegebene Flächen: oben mittig, unten links; Stand 29.10.2026. */
.status-row { position:absolute; top:9%; left:7%; right:7%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,36px); }
.status-card { display:flex; flex-direction:column; min-width:0; min-height:180px; padding:clamp(18px,1.9vw,30px); color:#f3f1ed; text-decoration:none; background:rgba(24,26,27,.48); border:1px solid rgba(255,255,255,.23); border-radius:15px; backdrop-filter:blur(14px); box-shadow:0 8px 28px rgba(0,0,0,.08); transition:background .15s; }
.status-card:hover { background:rgba(24,26,27,.59); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card-heading h2 { margin:0; font-size:13px; font-weight:500; letter-spacing:.04em; }
.demo-label { color:rgba(255,255,255,.68); font-size:10px; letter-spacing:.05em; }
.calorie-value { margin-top:21px; font-size:clamp(25px,2.4vw,38px); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.045em; }
.calorie-value>span { font-size:12px; letter-spacing:0; color:rgba(255,255,255,.73); }
.progress-track { height:4px; background:rgba(255,255,255,.15); border-radius:4px; margin:17px 0 16px; overflow:hidden; }
.progress-track>span { display:block; height:100%; background:#d39865; border-radius:inherit; }
.card-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-top:auto; color:rgba(255,255,255,.75); font-size:11px; }
.training-name { margin-top:23px; font-size:clamp(23px,2.1vw,33px); letter-spacing:-.025em; }
.training-details { display:flex; align-items:center; gap:8px; font-size:12px; margin:13px 0 19px; color:rgba(255,255,255,.82); }
.orange-dot { width:6px; height:6px; background:#d39865; border-radius:50%; }
.habit-content { display:flex; align-items:center; gap:18px; margin-top:20px; flex:1; }
.habit-ring { flex-shrink:0; width:86px; height:86px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#d39865 0 66%,rgba(255,255,255,.15) 66% 100%); position:relative; }
.habit-ring::before { content:''; position:absolute; inset:5px; border-radius:50%; background:#454746; }
.habit-ring>span { position:relative; font-size:28px; font-variant-numeric:tabular-nums; }
.habit-ring>span>span { font-size:13px; margin-left:2px; }
.habit-caption { font-size:12px; line-height:1.5; }
.habit-secondary { margin-top:7px; font-size:11px; color:rgba(255,255,255,.7); line-height:1.5; }
.floor-row { position:absolute; left:4.5%; width:58%; bottom:5.4%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.floor-row .widget { position:static; width:auto; min-width:0; transform:none; min-height:130px; background:rgba(24,26,27,.43); }
@media(min-width:780px) and (max-height:740px) { .status-card { min-height:160px; padding:16px 20px; } .calorie-value,.training-name { margin-top:16px; } .habit-ring { width:72px; height:72px; } .habit-content { margin-top:14px; gap:12px; } .floor-row .widget { min-height:110px; } }
@media(max-width:1000px) and (min-width:780px) { .status-row { left:5%;right:5%;gap:14px; } .status-card { padding:16px; } .habit-content { gap:10px; } .habit-ring { width:65px;height:65px; } }
@media(max-width:779px) { .dashboard-v2 { padding:30px 18px; } .status-row,.floor-row { position:static; width:100%; display:grid;grid-template-columns:1fr;gap:16px; } .status-card { min-height:180px; } .floor-row .widget { width:100%; } }

/* Kompakte obere Anzeigen: keine Flächen, mehr Abstand, leuchtendes Orange. */
.status-row { grid-template-columns:repeat(3,minmax(0,250px)); justify-content:space-between; gap:clamp(28px,5vw,80px); }
.status-row .status-card { --status-orange:#ff8c1f; background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; color:var(--status-orange); padding:10px 4px; min-height:124px; text-shadow:0 1px 2px rgba(80,42,6,.14); }
.status-row .status-card:hover { background:transparent; }
.status-row .card-heading h2 { color:#ed7b12; font-size:12px; font-weight:600; }
.status-row .demo-label { color:#bd681f; font-size:10px; }
.status-row .calorie-value,.status-row .training-name { color:var(--status-orange); font-size:26px; font-weight:500; margin-top:13px; }
.status-row .calorie-value>span { font-size:11px; }
.status-row .calorie-value>span,.status-row .card-foot,.status-row .training-details,.status-row .habit-caption,.status-row .habit-secondary { color:#d87516; }
.status-row .card-foot { font-size:11px; gap:6px 12px; }
.status-row .progress-track { background:rgba(255,140,31,.22); height:3px; margin:12px 0; }
.status-row .progress-track>span,.status-row .orange-dot { background:var(--status-orange); }
.status-row .training-details { margin:10px 0 13px; font-size:11px; }
.status-row .habit-content { margin-top:12px; gap:12px; flex:0; }
.status-row .habit-ring { width:58px; height:58px; background:none; }
.status-row .habit-ring::before { display:none; }
.status-row .habit-ring::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--status-orange) 0 66%,rgba(255,140,31,.22) 66% 100%); mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px)); pointer-events:none; }
.status-row .habit-ring>span { color:var(--status-orange); font-size:22px; }
.status-row .habit-ring>span>span { font-size:11px; }
.status-row .habit-caption,.status-row .habit-secondary { font-size:11px; }
.status-row .habit-secondary { margin-top:4px; }
@media(max-width:1000px) and (min-width:780px) { .status-row { left:6%;right:6%;gap:28px; } .status-row .calorie-value,.status-row .training-name { font-size:23px; } .status-row .habit-content { gap:8px; } }
@media(max-width:779px) { .status-row { grid-template-columns:minmax(0,250px); justify-content:center; gap:26px; } }

/* Kleine Glasflächen für lesbare Statusanzeigen; Mittelpunkte bleiben erhalten. */
.status-row .status-card { width:220px; max-width:100%; justify-self:center; min-height:116px; padding:12px 14px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(25,29,31,.46); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:0 3px 12px rgba(0,0,0,.06); text-shadow:none; }
.status-row .status-card:hover { background:rgba(25,29,31,.52); }
.status-row .card-heading h2 { color:#ffac54; font-size:11px; }
.status-row .demo-label { color:rgba(255,231,205,.7); }
.status-row .calorie-value,.status-row .training-name { font-size:23px; margin-top:10px; color:#ff982f; }
.status-row .calorie-value>span,.status-row .card-foot,.status-row .training-details,.status-row .habit-caption,.status-row .habit-secondary { color:#ffd3a3; }
.status-row .card-foot { font-size:11px; gap:4px 8px; }
.status-row .progress-track { margin:9px 0; }
.status-row .training-details { margin:8px 0 10px; }
.status-row .habit-content { margin-top:10px; gap:10px; }
.status-row .habit-ring { width:50px; height:50px; }
.status-row .habit-ring>span { font-size:20px; }
@media(min-width:780px) and (max-width:1000px) { .status-row .status-card { padding:10px; } }

/* Weiße statt grauer Glasflächen, ausdrücklich vom Nutzer gewünscht. */
.status-row .status-card { background:rgba(255,255,255,.78); border-color:rgba(255,255,255,.86); }
.status-row .status-card:hover { background:rgba(255,255,255,.86); }
.status-row .demo-label { color:#87613e; }
.status-row .calorie-value>span,.status-row .card-foot,.status-row .training-details,.status-row .habit-caption,.status-row .habit-secondary { color:#a65312; }