:root {
  --bg: #F5F5F7;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --muted: #86868B;
  --border: #D2D2D7;
  --accent: #0071E3;
  --accent-hover: #0077ED;
  --danger: #FF3B30;
  --danger-bg: #FFF5F4;
  --success: #1D8348;
  --success-bg: #EAF7EF;
  --radius: 18px;
  --radius-input: 12px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.1em 0.35em;
  border-radius: 6px;
}

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px;
}

.page-home {
  max-width: 880px;
  padding-top: 40px;
  padding-bottom: 80px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
  padding: 44px 40px;
  width: min(480px, 100%);
}

.hero.card {
  width: 100%;
  max-width: 560px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 7vw, 44px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.section-heading {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}


.section-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.section-toolbar .eyebrow {
  margin-bottom: 8px;
}

.section-toolbar .section-heading {
  margin-bottom: 0;
}

.lock-form {
  margin: 4px 0 0;
  flex-shrink: 0;
}


.sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.47;
  max-width: 36em;
}

.form { display: grid; gap: 8px; }

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder { color: var(--muted); }
.input:focus {
  border-color: rgba(0, 113, 227, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.input-file {
  height: auto;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--bg);
}

.btn {
  margin-top: 12px;
  appearance: none;
  border: none;
  border-radius: 980px;
  min-height: 46px;
  padding: 0 22px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

.btn:hover { background: var(--accent-hover); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}
.btn:active { transform: scale(0.98); }

.btn-ghost {
  margin-top: 0;
  background: transparent;
  color: var(--accent);
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 12px;
}

.btn-ghost:hover { background: rgba(0, 113, 227, 0.08); }

.error,
.success {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  font-size: 14px;
  font-weight: 500;
}

.error {
  background: var(--danger-bg);
  color: var(--danger);
}

.success {
  background: var(--success-bg);
  color: var(--success);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 16px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 980px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.85);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: 0;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.14),
    0 1px 3px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  color: #1d1d1f;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.brand::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.brand:hover {
  color: var(--accent);
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.brand:hover::after { left: 130%; }
.brand:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .brand, .brand::after { transition: none; }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  max-width: fit-content;
  margin-inline: auto;
}

.nav-link {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 980px;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  white-space: nowrap;
  z-index: 1;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.18);
}

.nav-link.is-active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.nav-link.is-active:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}

.logout-form { flex-shrink: 0; margin: 0; }

.nav-link-persoenlich {
  flex-shrink: 0;
  opacity: 0.35;
  color: var(--muted);
  font-weight: 500;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.nav-link-persoenlich:hover,
.nav-link-persoenlich:focus-visible {
  opacity: 0.85;
  color: var(--text);
}

.nav-link-persoenlich.is-active {
  opacity: 0.7;
  background: transparent;
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.topbar-actions .nav-link-persoenlich {
  margin-right: 0;
  padding-right: 8px;
}

.topbar-actions .admin-entry {
  padding-left: 8px;
}

.topbar-actions .logout-form {
  margin-left: 6px;
}

.admin-entry {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.35;
  padding: 7px 14px;
  border-radius: 980px;
  transition: opacity 0.15s, color 0.15s;
}

.admin-entry:hover,
.admin-entry:focus-visible {
  opacity: 0.85;
  color: var(--text);
  outline: none;
}

.admin-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 113, 227, 0.1);
  padding: 3px 8px;
  border-radius: 980px;
}

.admin-logout-form { margin: 0; }

.admin-exit {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  opacity: 0.7;
}

.admin-exit:hover,
.admin-exit:focus-visible {
  opacity: 1;
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

.admin-back {
  margin: 18px 0 0;
  font-size: 14px;
  text-align: center;
}

.admin-back a {
  color: var(--muted);
  text-decoration: none;
}

.admin-back a:hover { color: var(--accent); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 980px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 28px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.content-section {
  padding: 8px 0 16px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px;
  margin-bottom: 28px;
}

.panel-flex { margin-bottom: 0; }

.panel-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.panel-text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.upload-panel .panel-text { margin-bottom: 16px; }

.upload-panel .panel-text {
  display: none;
}

.upload-panel.is-upload-open .panel-text {
  display: block;
}


.upload-form {
  display: grid;
  gap: 8px;
  max-width: 420px;
}

.upload-form .btn {
  justify-self: start;
  margin-top: 8px;
}

.upload-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-chosen {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-form {
  position: relative;
}


.block-title {
  margin: 8px 0 16px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.intro-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}

.intro-row .portrait { margin: 0; }

.intro-row .portrait .photo-frame {
  aspect-ratio: 3 / 4;
}

.intro-row .portrait .photo-frame img {
  object-fit: cover;
  object-position: center 18%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.link-card:hover {
  border-color: rgba(0, 113, 227, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.link-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

.link-card-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.link-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.photo-placeholder { margin: 0; }

.photo-frame {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background:
    linear-gradient(145deg, #E8E8ED 0%, #D2D2D7 48%, #E5E5EA 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.photo-frame:not(.has-image)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(0, 113, 227, 0.08), transparent 50%);
  pointer-events: none;
}

.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.photo-frame img.is-missing {
  display: none;
}

.photo-hint {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.photo-frame:has(img:not(.is-missing)) .photo-hint {
  display: none;
}

.photo-frame:has(img:not(.is-missing))::after {
  display: none;
}

.photo-placeholder figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding-inline: 2px;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.note-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
}

.note-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.note-text {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.project-list {
  display: grid;
  gap: 14px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 24px;
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.project-date {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.project-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.project-text {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 42em;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-active {
  background: var(--success-bg);
  color: var(--success);
}

.badge-planned {
  background: #EEF3FB;
  color: var(--accent);
}

.badge-note {
  background: #F5F5F7;
  color: var(--muted);
}


/* Deals */
.deals-updated {
  margin: -4px 0 22px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.deal-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  opacity: 0;
  animation: deal-fade-in 0.4s ease forwards;
  animation-delay: calc(var(--deal-i, 0) * 50ms);
}

@keyframes deal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .deal-card {
    opacity: 1;
    animation: none;
    transition: none;
  }
}

.deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #c7c7cc;
}

.deal-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28);
}

.deal-category {
  align-self: flex-start;
  margin-bottom: 4px;
}

.deal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--text);
}

.deal-price {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.deal-note {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
  flex: 1;
}

.deal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.deal-source {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.deal-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.deal-card:hover .deal-cta {
  color: var(--accent-hover);
}

.site-footer {
  text-align: center;
  padding: 24px 16px 48px;
  color: var(--muted);
  font-size: 13px;
}

.site-footer p { margin: 0; }

@media (max-width: 720px) {
  .card-grid,
  .card-grid-4,
  .notes-grid,
  .deal-grid {
    grid-template-columns: 1fr;
  }

  .photo-grid {
    grid-template-columns: 1fr;
  }

  .intro-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .intro-row .portrait {
    width: min(42vw, 160px);
    max-width: 160px;
  }

  .intro-row .panel-flex {
    width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 2px;
  }

  .nav-link {
    font-size: 13px;
    padding: 5px 10px;
  }
}

@media (max-width: 520px) {
  .card { padding: 32px 24px; }
  .page { padding: 32px 16px; }
  .page-home { padding-top: 28px; }
  .topbar { padding-inline: 16px; }
  .panel { padding: 22px 20px; }
  .project-card { padding: 20px 18px; }
  .deal-card { padding: 18px 16px 16px; }
}

.fitness-meta {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.fitness-grid {
  margin-bottom: 28px;
}

.file-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.file-name {
  font-size: 15px;
  font-weight: 500;
  word-break: break-all;
}

.file-meta {
  font-size: 13px;
  color: var(--muted);
}

.file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.file-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 980px;
  transition: background 0.15s;
}

.file-link:hover {
  background: rgba(0, 113, 227, 0.08);
}

.file-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.empty-hint {
  margin: 0 0 28px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}


.photo-download {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 18px;
}

.photo-download:hover .photo-frame.has-image {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28);
  transform: translateY(-1px);
}

.photo-download:focus-visible {
  outline: none;
}

.photo-download:focus-visible .photo-frame.has-image {
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.45);
}


/* Admin-only media delete (visible in edit-mode / when form is rendered) */
.media-delete-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.photo-placeholder .media-delete-form {
  display: block;
  margin-top: 6px;
  text-align: center;
}

.btn-delete {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--danger);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}

.btn-delete:hover,
.btn-delete:focus-visible {
  opacity: 1;
  background: var(--danger-bg);
  outline: none;
}

body:not(.edit-mode) .media-delete-form {
  display: none;
}

/* -------------------------------------------------------------------------- */
/* Inline Edit Mode (active after site login; no toggle button)                 */
/* -------------------------------------------------------------------------- */

.edit-mode [data-edit-key] {
  outline: 1px dashed transparent;
  border-radius: 4px;
  transition: outline-color 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: text;
  white-space: pre-wrap;
}

.edit-mode [data-edit-key]:hover {
  outline-color: rgba(0, 113, 227, 0.35);
  background: rgba(0, 113, 227, 0.04);
}

.edit-mode [data-edit-key]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: rgba(0, 113, 227, 0.06);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.edit-mode [data-edit-key].is-saving {
  opacity: 0.7;
}

.edit-mode [data-edit-key].is-saved {
  outline-color: var(--success);
  background: var(--success-bg);
}

/* Keep link cards navigable, but allow text edit without always navigating */
.edit-mode .link-card [data-edit-key] {
  display: block;
  pointer-events: auto;
}

.edit-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 9999;
  padding: 10px 18px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(29, 29, 31, 0.88);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.edit-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.edit-toast-ok {
  background: rgba(29, 131, 72, 0.95);
}

.edit-toast-error {
  background: rgba(255, 59, 48, 0.95);
}


.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, width, height;
}

.nav .nav-link.is-active {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill {
    transition: none;
  }
}


/* Daily plan (Persönlich) */
.daily-plan {
  margin: 8px 0 36px;
}

.daily-plan-heading {
  margin-bottom: 4px;
}

.daily-plan-date {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.daily-plan-updated {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.daily-plan .empty-hint {
  margin-bottom: 0;
}

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  margin-bottom: 14px;
}

.plan-card-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
}

.plan-card-sub {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

.plan-table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.plan-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 10px 4px;
  border-bottom: 1px solid var(--border);
}

.plan-table td {
  padding: 12px 10px 12px 4px;
  vertical-align: top;
  border-bottom: 1px solid #EBEBED;
  color: var(--text);
}

.plan-table tr:last-child td {
  border-bottom: none;
  padding-bottom: 4px;
}

.plan-ex-name {
  font-weight: 560;
  letter-spacing: -0.01em;
  min-width: 40%;
}

.plan-ex-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.plan-ex-detail {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.plan-meals {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.plan-meal-card {
  margin-bottom: 0;
  padding: 18px 20px;
}

.plan-meal-slot {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan-meal-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.plan-meal-macros {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.plan-hint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}

.plan-hint-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 720px) {
  .plan-ex-detail {
    white-space: normal;
  }
  .plan-card {
    padding: 18px 16px 14px;
  }
}


/* Withings (Persönlich) */
.withings {
  margin: 8px 0 36px;
}

.withings-heading {
  margin-bottom: 4px;
}

.withings-updated {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.withings .empty-hint {
  margin-bottom: 0;
}

.withings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
  margin-bottom: 14px;
}

.withings-hero {
  padding: 26px 22px 22px;
}

.withings-weight-value {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.withings-weight-unit {
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.withings-weight-meta {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.withings-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.withings-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.withings-metric-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.withings-metric-value {
  font-size: 16px;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.withings-card-title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.withings-table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
}

.withings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.withings-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 10px 4px;
  border-bottom: 1px solid var(--border);
}

.withings-table td {
  padding: 12px 10px 12px 4px;
  vertical-align: top;
  border-bottom: 1px solid #EBEBED;
  color: var(--text);
}

.withings-table tr:last-child td {
  border-bottom: none;
  padding-bottom: 4px;
}

.withings-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .withings-weight-value {
    font-size: 40px;
  }

  .withings-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .withings-card {
    padding: 18px 16px 14px;
  }

  .withings-hero {
    padding: 22px 16px 18px;
  }
}


/* ——— Persönlich dashboard tabs (Jessie) ——— */
.dash-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 4px;
  margin: 8px 0 28px;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  max-width: 100%;
  width: fit-content;
}

.dash-tabs-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04);
  pointer-events: none;
  will-change: transform, width, height;
}

.dash-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 980px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.dash-tab:hover {
  color: var(--text);
}

.dash-tab.is-active {
  color: var(--text);
  font-weight: 600;
}

.dash-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.dash-panel {
  margin-bottom: 8px;
}

.dash-panel[hidden] {
  display: none !important;
}

.dash-date-eyebrow {
  margin-bottom: 12px;
}

.dash-hero-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.dash-hero-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: grid;
  place-items: center;
  line-height: 1;
}

.dash-hero-body {
  min-width: 0;
  flex: 1;
}

.dash-hero-title {
  margin: 2px 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.2;
}

.dash-hero-focus {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.45;
}

.dash-hero-cta {
  display: inline-flex;
  text-decoration: none;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.dash-metric-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
  min-width: 0;
}

.dash-metric-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.dash-metric-value {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dash-metric-foot {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.dash-metric-ico {
  color: var(--accent);
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  transform-origin: center;
}

@keyframes dash-metric-breathe {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

@keyframes wo-icon-tilt {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .dash-metric-ico {
    animation: dash-metric-breathe 2.8s ease-in-out infinite alternate;
    transition: transform 180ms ease;
  }
  .dash-metric-card:hover .dash-metric-ico,
  .dash-metric-card:focus-within .dash-metric-ico {
    transform: scale(1.06);
  }

  .wo-icon {
    transform-origin: center;
    animation: wo-icon-tilt 3.2s ease-in-out infinite alternate;
  }
  .dash-workout-icon {
    transition: transform 180ms ease;
  }
  .dash-workout-card:hover .wo-icon,
  .dash-workout-card:focus-within .wo-icon {
    animation-play-state: paused;
  }
  .dash-workout-card:hover .dash-workout-icon,
  .dash-workout-card:focus-within .dash-workout-icon {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-metric-ico,
  .wo-icon,
  .dash-workout-icon {
    animation: none !important;
    transition: none !important;
  }
}

.dash-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.dash-card-head {
  margin-bottom: 12px;
}

.dash-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dash-card-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.dash-chart-wrap {
  width: 100%;
  margin: 4px 0 8px;
}

.dash-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
}

.dash-weight-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dash-panel.is-active {
    animation: dashPanelIn 180ms ease;
  }
  .dash-weight-line {
    animation: dashDrawLine 520ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
  .dash-ring-arc {
    animation: dashRingIn 500ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }
}

@keyframes dashPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashDrawLine {
  from { stroke-dashoffset: 1200; }
  to { stroke-dashoffset: 0; }
}

@keyframes dashRingIn {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-tab,
  .dash-tabs-pill,
  .dash-panel,
  .dash-weight-line,
  .dash-ring-arc {
    transition: none !important;
    animation: none !important;
  }
}

.dash-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  justify-items: center;
  padding: 8px 0 4px;
}

.dash-ring {
  position: relative;
  width: 112px;
  height: 112px;
}

.dash-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dash-ring-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-ring-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.dash-range {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 980px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
}

.dash-range-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  padding: 6px 12px;
  border-radius: 980px;
  cursor: pointer;
}

.dash-range-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dash-range-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-stat-value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dash-activity-chart.is-empty .dash-chart-svg {
  opacity: 0.25;
}

.dash-workouts {
  margin-top: 16px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.dash-workouts .dash-card-head-row {
  margin-bottom: 12px;
}

.dash-workouts .dash-card-meta {
  margin: 0;
}

.dash-workout-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-workout-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dash-workout-card {
    transition: box-shadow 160ms ease;
  }
  .dash-workout-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  }
}

.dash-workout-accent {
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: #D2D2D7;
}

.dash-workout-kind-walk .dash-workout-accent { background: #34C759; }
.dash-workout-kind-run .dash-workout-accent { background: #FF9F0A; }
.dash-workout-kind-strength .dash-workout-accent { background: #0071E3; }
.dash-workout-kind-cardio .dash-workout-accent { background: #AF52DE; }
.dash-workout-kind-fallback .dash-workout-accent { background: #D2D2D7; }

.dash-workout-kind-walk .dash-workout-icon { color: #34C759; }
.dash-workout-kind-run .dash-workout-icon { color: #FF9F0A; }
.dash-workout-kind-strength .dash-workout-icon { color: #0071E3; }
.dash-workout-kind-cardio .dash-workout-icon { color: #AF52DE; }
.dash-workout-kind-fallback .dash-workout-icon { color: #0071E3; }

.dash-workout-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0071E3;
}

.dash-workout-svg {
  width: 22px;
  height: 22px;
  display: block;
}

.dash-workout-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-workout-name {
  font-size: 15px;
  font-weight: 600;
  color: #1D1D1F;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-workout-date {
  font-size: 13px;
  font-weight: 500;
  color: #86868B;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-workout-stats {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.dash-workout-duration {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1D1D1F;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.dash-workout-kcal {
  font-size: 13px;
  font-weight: 500;
  color: #86868B;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.dash-workout-more {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 560;
  color: var(--accent);
  text-decoration: none;
}

.dash-workout-more:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.dash-workout-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
  border-radius: 6px;
}

@media (max-width: 720px) {
  .dash-tabs {
    width: 100%;
    justify-content: stretch;
  }
  .dash-tab {
    flex: 1;
    text-align: center;
    padding: 7px 8px;
    font-size: 13px;
  }
  .dash-metrics {
    grid-template-columns: 1fr;
  }
  .dash-hero-card {
    padding: 18px 16px;
  }
  .dash-hero-title {
    font-size: 20px;
  }
  .dash-rings {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dash-stats {
    grid-template-columns: 1fr;
  }
  .dash-card {
    padding: 18px 16px;
  }
  .dash-metric-value {
    font-size: 24px;
  }
}


/* ——— Day switcher (Überblick + Aktivität) ——— */
.dash-day-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 0 18px;
  padding: 2px;
  min-height: 40px;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  vertical-align: middle;
}

.dash-day-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -4px 0;
  border-radius: 980px;
  color: var(--text);
  text-decoration: none;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.dash-day-nav:hover {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
}

.dash-day-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);
}

.dash-day-nav.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.dash-day-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.dash-day-content.is-fading {
  opacity: 0;
  transition: opacity 150ms ease;
}

.dash-day-content.is-fading.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .dash-day-content.is-fading {
    opacity: 1;
    transition: none;
  }
  .dash-day-nav {
    transition: none;
  }
}

/* ---------- Apple News (öffentlich) ---------- */
.news-section { max-width: 960px; }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
@media (min-width: 720px) { .news-grid { grid-template-columns: 1fr 1fr; } }
.news-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px; background: #FFFFFF; border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  color: #1D1D1F; text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.news-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); }
.news-card:focus-visible { outline: none; box-shadow: 0 0 0 3px #0071E3, 0 2px 12px rgba(0, 0, 0, 0.08); }
.news-thumb { flex: 0 0 88px; width: 88px; height: 88px; object-fit: cover; border-radius: 12px; background: #F5F5F7; }
.news-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news-date { font-size: 13px; color: #86868B; }
.news-title { font-size: 18px; font-weight: 600; line-height: 1.3; color: #1D1D1F; }
.news-teaser {
  font-size: 15px; line-height: 1.47; color: #86868B;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.news-empty { margin-top: 24px; padding: 24px; background: #FFFFFF; border: 1px solid #D2D2D7; border-radius: 18px; color: #86868B; }
@media (prefers-reduced-motion: reduce) { .news-card { transition: none; } }

/* ——— Deals: Alle | Nur Apple (server-side links, static active pill) ——— */
.deals-filter {
  margin: 4px 0 24px;
}

.deals-filter .dash-tab {
  text-decoration: none;
  display: inline-block;
}

.deals-filter .dash-tab.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Schritte pro Tag – Liste */
.dash-steps-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid rgba(0,0,0,0.06); max-height: 280px; overflow-y: auto; }
.dash-steps-row { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 14px; color: #1D1D1F; }
.dash-steps-date { color: #6E6E73; }
.dash-steps-val { font-variant-numeric: tabular-nums; font-weight: 500; }
.dash-steps-row.is-goal .dash-steps-val { color: #0071E3; }
.dash-steps-row.is-today { font-weight: 600; }
.dash-steps-row.is-today .dash-steps-date { color: #1D1D1F; }

/* Shimmer + Lift fuer alle Buttons (wie Logo) */
.btn, .btn-ghost, .btn-delete, .admin-entry, .admin-exit, .link-card, .dash-range-btn, .nav-link {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, background 0.25s ease, color 0.25s ease;
}
.btn::after, .btn-ghost::after, .btn-delete::after, .admin-entry::after, .admin-exit::after, .link-card::after, .dash-range-btn::after, .nav-link::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.btn:hover::after, .btn-ghost:hover::after, .btn-delete:hover::after, .admin-entry:hover::after, .admin-exit:hover::after, .link-card:hover::after, .dash-range-btn:hover::after, .nav-link:hover::after { left: 130%; }
.btn:hover, .btn-ghost:hover, .btn-delete:hover, .admin-entry:hover, .admin-exit:hover, .dash-range-btn:hover {
  transform: translateY(-1px) scale(1.03);
}
.link-card:hover { transform: translateY(-3px); }
.btn:active, .btn-ghost:active, .btn-delete:active, .admin-entry:active, .admin-exit:active, .dash-range-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-ghost, .btn-delete, .admin-entry, .admin-exit, .link-card, .dash-range-btn, .nav-link,
  .btn::after, .btn-ghost::after, .btn-delete::after, .admin-entry::after, .admin-exit::after, .link-card::after, .dash-range-btn::after, .nav-link::after { transition: none; }
}

/* Klares Glas fuer alle Buttons */
.topbar-actions .nav-link-persoenlich, .btn-ghost, .btn-delete, .admin-entry, .admin-exit, .link-card, .dash-range-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%),
    rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.btn {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 60%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 6px 20px rgba(0, 113, 227, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.topbar-actions .nav-link-persoenlich:hover, .btn-ghost:hover, .btn-delete:hover, .admin-entry:hover, .admin-exit:hover, .link-card:hover, .dash-range-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 100%),
    rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.13),
    0 2px 6px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.dash-range-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Gleitende Glas-Pille fuer Button-Gruppen (slide-pill.js) */
.slide-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  border-radius: 980px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.04);
  pointer-events: none;
  will-change: transform, width, height, opacity;
}
.has-slide-pill > .dash-range-btn,
.has-slide-pill > .dash-range-btn.is-active {
  background: transparent;
  box-shadow: none;
}
.card-grid-4.has-slide-pill > .slide-pill {
  margin: -4px;
  padding: 4px;
  box-sizing: content-box;
}
@media (prefers-reduced-motion: reduce) {
  .slide-pill { transition: none !important; }
}

/* Shimmer auch fuer alle weiteren Buttons */
.dash-tab, a.dash-day-nav, button, .button {
  position: relative;
  overflow: hidden;
}
.dash-tab::after, a.dash-day-nav::after, button::after, .button::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.dash-tab:hover::after, a.dash-day-nav:hover::after, button:hover::after, .button:hover::after { left: 130%; }
a.dash-day-nav:hover { transform: translateY(-1px) scale(1.05); }
a.dash-day-nav:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  .dash-tab::after, a.dash-day-nav::after, button::after, .button::after { transition: none; }
  a.dash-day-nav:hover, a.dash-day-nav:active { transform: none; }
}
a.dash-day-nav { transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1), background 0.2s ease, color 0.2s ease, opacity 0.2s ease; }

@media (max-width: 640px) {
  .brand { padding: 3px 9px; font-size: 13px; }
}

/* Einheitliche Groesse Kopfzeilen-Buttons (wie Logo) */
.topbar .brand,
.topbar-actions .nav-link,
.topbar-actions .admin-entry,
.topbar-actions .admin-exit,
.topbar-actions .admin-badge,
.topbar-actions .btn,
.topbar-actions .btn-ghost {
  padding: 4px 11px;
  font-size: 14px;
  line-height: 1.2;
  min-height: 0;
  height: auto;
  border-radius: 980px;
}
@media (max-width: 640px) {
  .topbar .brand,
  .topbar-actions .nav-link,
  .topbar-actions .admin-entry,
  .topbar-actions .admin-exit,
  .topbar-actions .admin-badge,
  .topbar-actions .btn,
  .topbar-actions .btn-ghost { padding: 3px 9px; font-size: 13px; }
}

.topbar-actions { gap: 6px; }
.topbar-actions .nav-link-persoenlich.is-active { color: var(--accent, #0071e3); }

/* Aktive Seite immer sichtbar */
.nav .nav-link.is-active,
.topbar-actions .nav-link-persoenlich.is-active,
.has-slide-pill .is-active {
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 100%);
  border-radius: 980px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 0 #fff;
  font-weight: 600;
}

/* Leichter Blau-Schimmer wie Abmelden fuer alle Buttons */
.brand, .nav-link, .btn-ghost, .btn-delete, .admin-entry, .admin-exit, .admin-badge, .dash-range-btn,
.has-slide-pill button, .has-slide-pill a { color: var(--accent, #0071e3); }
.brand, .topbar-actions .nav-link-persoenlich, .btn-ghost, .admin-entry, .admin-exit, .dash-range-btn,
.nav .nav-link.is-active, .has-slide-pill .is-active, .nav-pill {
  background-color: rgba(0, 113, 227, 0.07);
}
.brand:hover, .nav-link:hover, .btn-ghost:hover, .admin-entry:hover, .admin-exit:hover, .dash-range-btn:hover {
  background-color: rgba(0, 113, 227, 0.12);
}
.btn-delete { color: #d70015; }

/* ---- Fitnessplan-Generator ---- */
.pg-plan { margin-bottom: 28px; }
.pg-form { margin: 10px 0 16px; }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pg-stat { padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pg-stat span { display: block; font-size: 12px; color: #6e6e73; }
.pg-stat strong { font-size: 17px; }
.pg-stat small { display: block; font-size: 11px; color: #6e6e73; }
.pg-list { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
.pg-var, .pg-cue { font-size: 12px; color: #6e6e73; margin-top: 2px; }
.pg-table td { vertical-align: top; }
.pg-week { display: grid; gap: 6px; }
.pg-day { border-radius: 14px; background: rgba(0,113,227,0.05); padding: 8px 12px; }
.pg-day.is-today { background: rgba(0,113,227,0.13); box-shadow: inset 0 0 0 1px rgba(0,113,227,0.25); }
.pg-day.is-rest { opacity: 0.8; }
.pg-day summary { display: grid; grid-template-columns: 30px 50px 1fr auto; gap: 8px; cursor: pointer; list-style: none; align-items: center; }
.pg-day summary::-webkit-details-marker { display: none; }
.pg-wd { font-weight: 600; color: #0071e3; }
.pg-dt, .pg-min { font-size: 13px; color: #6e6e73; }
.pg-day-body { padding: 6px 0 2px; font-size: 14px; }
.pg-prog { margin-top: 10px; }
.pg-prog summary { cursor: pointer; color: #0071e3; }
@media (max-width: 640px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-day summary { grid-template-columns: 26px 44px 1fr auto; font-size: 14px; }
}

/* Logo: schillernder Glas-Schriftzug (Variante A), ohne Button */
.topbar .brand, .topbar .brand:hover {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 4px;
}
.topbar .brand::after { display: none; }
.topbar .brand {
  font-family: "SF Pro Rounded", ui-rounded, "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  background-image: linear-gradient(110deg, #9ad7ff 0%, #d7b8ff 22%, #ffc6e6 40%, #c6f3ff 58%, #b9ffe0 76%, #a9c8ff 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: 0.6px rgba(120, 150, 200, 0.55);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.9)) drop-shadow(0 3px 6px rgba(0, 60, 140, 0.18));
  transition: background-position 1.2s ease, transform 0.3s ease;
}
.topbar .brand:hover { background-position: 100% 0 !important; transform: translateY(-1px); }
@media (max-width: 640px) { .topbar .brand { font-size: 19px; } }

/* Logo: klares hellblaues Glas (Wunsch Sebastian) */
.topbar .brand {
  background-image: linear-gradient(180deg, #f4fbff 0%, #cfe6fb 35%, #a9cdf0 55%, #dceefe 80%, #ffffff 100%) !important;
  background-size: 100% 100% !important;
  -webkit-text-stroke: 1px rgba(110, 160, 215, 0.75);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,1)) drop-shadow(0 4px 6px rgba(70, 130, 200, 0.22));
}
.topbar .brand:hover { background-position: 0 0 !important; }

.topbar .brand, .topbar .brand:hover { outline: none !important; overflow: visible; border-radius: 0; }

/* Logo Variante D: duenn, grau, Kleinbuchstaben blau */
.topbar .brand, .topbar .brand:hover {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  color: #6e6e73 !important;
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 200;
  font-size: 24px;
  letter-spacing: 0.01em;
}
.topbar .brand .lc { color: #0071e3; }
.topbar .brand:hover { transform: none; color: #1d1d1f !important; }
@media (max-width: 640px) { .topbar .brand { font-size: 20px; } }

/* Logo: gleiche Schrift/Groesse wie Buttons */
.topbar .brand, .topbar .brand:hover { font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; padding: 4px 4px; }
@media (max-width: 640px) { .topbar .brand { font-size: 13px; } }

/* Seitenuebergaenge (View Transitions, Safari 18.2+/Chrome) */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
::view-transition-group(topbar) { animation-duration: 0s; }
::view-transition-old(root) { animation: vt-slide-out .38s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-slide-in .45s cubic-bezier(.16,1,.3,1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-slide-out-r .38s cubic-bezier(.4,0,.2,1) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-slide-in-l .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes vt-slide-out { to { opacity: 0; transform: translateX(-30%); } }
@keyframes vt-slide-in { from { opacity: 0; transform: translateX(40%); } }
@keyframes vt-slide-out-r { to { opacity: 0; transform: translateX(30%); } }
@keyframes vt-slide-in-l { from { opacity: 0; transform: translateX(-40%); } }
html:active-view-transition-type(tile)::view-transition-old(root) { animation: vt-fade-out .3s ease both; }
html:active-view-transition-type(tile)::view-transition-new(root) { animation: vt-fade-in .4s .15s ease both; }
::view-transition-group(hero) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16,1,.3,1); border-radius: 22px; overflow: hidden; }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@supports not (view-transition-name: none) {
  main, .page, .container { animation: vt-fade-in .5s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  main, .page, .container { animation: none; }
}

/* Fix: aktiver Zeitraum-Button lesbar */
.dash-range-btn.is-active, .has-slide-pill > .dash-range-btn.is-active { color: var(--accent, #0071e3); font-weight: 600; }

/* Login-Benutzerfeld (iOS Passwortmanager) + Passwörter ändern */
.input-username { color: var(--muted); background: rgba(0,113,227,0.05); cursor: default; }
.input-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, #6e6e73 50%), linear-gradient(135deg, #6e6e73 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
a.admin-badge { text-decoration: none; }

/* Web-App (Home-Bildschirm): Platz für Notch/Statusleiste */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); padding-left: max(env(safe-area-inset-left, 0px), 12px); padding-right: max(env(safe-area-inset-right, 0px), 12px); }
}

/* ===== iOS-style red badge counters (nav + home tiles) ===== */
.nav-link.has-badge, .tile.has-badge { position: relative; overflow: visible; }
.nav-badge {
  position: absolute; top: -6px; right: -6px; z-index: 5;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #ff3b30; color: #fff;
  font: 700 11px/18px -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  text-align: center; letter-spacing: 0; white-space: nowrap; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(255,59,48,.35);
  animation: nav-badge-pop .42s cubic-bezier(.34,1.56,.64,1) both;
}
.tile .nav-badge { top: 12px; right: 12px; min-width: 22px; height: 22px; line-height: 22px; border-radius: 11px; font-size: 12px; }
@keyframes nav-badge-pop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav-badge { animation: none; } }

/* ===== Strom: Tages-Detail-Sheet ===== */
.energy-day-card { position: relative; cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.energy-day-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.energy-day-card:active { transform: scale(.97); }
.energy-day-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.35); }
.energy-day-chev { position: absolute; top: 14px; right: 16px; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .25s ease, color .25s ease; }
.energy-day-card:hover .energy-day-chev { transform: translateX(3px); color: var(--accent); }
html.esheet-lock, html.esheet-lock body { overflow: hidden; }
.esheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.esheet[hidden] { display: none; }
.esheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.esheet-card { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); color: var(--text); border-radius: 26px; padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; transform: scale(.92) translateY(16px); transition: transform .42s cubic-bezier(.2,.9,.25,1.1), opacity .25s ease; outline: none; }
.esheet.is-open .esheet-backdrop { opacity: 1; }
.esheet.is-open .esheet-card { opacity: 1; transform: none; }
.esheet-grab { display: none; width: 36px; height: 5px; border-radius: 3px; background: var(--border); margin: -12px auto 12px; }
.esheet-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(120,120,128,.16); color: var(--muted); transition: background .2s, transform .2s; }
.esheet-close:hover { background: rgba(120,120,128,.26); transform: scale(1.06); }
.esheet-kicker { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.esheet-title { margin: 2px 0 18px; font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.esheet-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.esheet-stat { background: rgba(120,120,128,.08); border-radius: 16px; padding: 12px; min-width: 0; }
.esheet-stat span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.esheet-stat strong { display: block; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esheet-stat small { display: block; font-size: 11px; color: var(--muted); }
.esheet-chart { margin: 4px 0 6px; }
.esheet-bars { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.esheet-bar { flex: 1 1 0; min-width: 1px; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #64D2FF, var(--accent));
  transform-origin: bottom; transform: scaleY(0); }
.esheet.is-open .esheet-bar { animation: esheet-grow .6s cubic-bezier(.2,.9,.25,1) forwards; animation-delay: calc(.12s + var(--i)); }
@keyframes esheet-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.esheet-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.esheet-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.esheet-cmps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.esheet-cmp { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(120,120,128,.08); font-size: 15px; }
.esheet-cmp span { flex: 1; color: var(--muted); }
.esheet-cmp small { color: var(--muted); font-size: 12px; }
.esheet-cmp.is-up strong { color: #FF9500; }
.esheet-cmp.is-down strong { color: #34C759; }
.esheet-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .esheet { align-items: flex-end; padding: 0; }
  .esheet-card { max-width: none; border-radius: 26px 26px 0 0; max-height: 88vh; padding: 24px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(100%); opacity: 1; transition: transform .45s cubic-bezier(.2,.9,.25,1); }
  .esheet-grab { display: block; }
  .esheet-title { font-size: 26px; }
  .esheet-stat strong { font-size: 16px; }
  .esheet-bars { height: 140px; gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .esheet-card, .esheet-backdrop, .energy-day-card { transition: none; }
  .esheet.is-open .esheet-bar { animation: none; transform: none; }
}

/* Strom-Sheet: Health-Kurve */
.ec-wrap { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.ec-svg { display: block; width: 100%; height: 200px; overflow: visible; }
.ec-grid { stroke: rgba(120,120,128,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ec-grid-h { stroke-dasharray: 2 4; }
.ec-base { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ec-lab { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.ec-stop1 { stop-color: var(--accent); stop-opacity: .38; }
.ec-stop2 { stop-color: var(--accent); stop-opacity: 0; }
.ec-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.ec-area { opacity: 0; }
.esheet.is-open .ec-line { animation: ec-draw 1.1s cubic-bezier(.45,.05,.25,1) .15s forwards; }
.esheet.is-open .ec-area { animation: ec-fade .7s ease .7s forwards; }
@keyframes ec-draw { to { stroke-dashoffset: 0; } }
@keyframes ec-fade { to { opacity: 1; } }
.ec-cursor { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .15s; }
.ec-wrap.is-scrub .ec-cursor { opacity: .6; }
.ec-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface), 0 1px 4px rgba(0,0,0,.25); pointer-events: none; }
.ec-dot[hidden] { display: none; }
.ec-peak { background: #FF9500; opacity: 0; transform: scale(.4); }
.esheet.is-open .ec-peak { animation: ec-pop .4s cubic-bezier(.2,.9,.3,1.4) 1.2s forwards; }
@keyframes ec-pop { to { opacity: 1; transform: scale(1); } }
.ec-peak-lab { position: absolute; transform: translate(-50%, -150%); font-size: 11px; font-weight: 600; color: #FF9500; pointer-events: none; opacity: 0; white-space: nowrap; }
.esheet.is-open .ec-peak-lab { animation: ec-fade .3s ease 1.3s forwards; }
.ec-wrap.is-scrub .ec-peak-lab { visibility: hidden; }
.ec-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 6px 10px; border-radius: 10px; text-align: center; white-space: nowrap; pointer-events: none;
  background: var(--surface); box-shadow: 0 4px 16px rgba(0,0,0,.16), 0 0 0 1px rgba(120,120,128,.14); font-variant-numeric: tabular-nums; }
.ec-tip[hidden] { display: none; }
.ec-tip strong { display: block; font-size: 14px; }
.ec-tip span { display: block; font-size: 11px; color: var(--muted); }
.esheet-chart.ec-wrap { margin-top: 28px; }
@media (max-width: 640px) { .ec-svg { height: 170px; } }
@media (prefers-reduced-motion: reduce) {
  .esheet.is-open .ec-line, .esheet.is-open .ec-area, .esheet.is-open .ec-peak, .esheet.is-open .ec-peak-lab { animation: none; }
  .ec-line { stroke-dashoffset: 0; } .ec-area, .ec-peak, .ec-peak-lab { opacity: 1; transform: none; }
}
@media (prefers-color-scheme: dark) {
  .ec-tip { background: #2C2C2E; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
  .ec-peak { background: #FF9F0A; } .ec-peak-lab { color: #FF9F0A; }
  .ec-stop1 { stop-opacity: .45; }
}

/* Strom-Sheet: Vergleichskurve */
.ec-cmp-line { fill: none; stroke: #C7C7CC; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; }
.ec-cmp-area { fill: rgba(142,142,147,.08); stroke: none; opacity: 0; }
.esheet.is-open .ec-cmp-line, .esheet.is-open .ec-cmp-area { animation: ec-fade .5s ease .05s forwards; }
.ec-legend { display: flex; gap: 14px; justify-content: flex-end; margin: 18px 0 -18px; font-size: 12px; color: var(--muted); }
.ec-leg { display: inline-flex; align-items: center; gap: 6px; }
.ec-leg::before { content: ""; width: 14px; height: 0; border-top: 2.5px solid var(--accent); border-radius: 2px; }
.ec-leg-cmp::before { border-top: 2.5px solid #C7C7CC; }
.ec-tip em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.ec-tip em[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .ec-cmp-line { stroke: #48484A; }
  .ec-leg-cmp::before { border-top-color: #48484A; }
  .ec-cmp-area { fill: rgba(142,142,147,.07); }
}
@media (prefers-reduced-motion: reduce) { .ec-cmp-line, .ec-cmp-area { opacity: 1; } .esheet.is-open .ec-cmp-line, .esheet.is-open .ec-cmp-area { animation: none; } }

/* Strom: Balken mit Achse + Tooltip */
svg.energy-bars { touch-action: pan-y; cursor: crosshair; overflow: visible; }
.eb-grid { stroke: rgba(120,120,128,.16); stroke-width: 1; stroke-dasharray: 2 4; }
.eb-grid-0 { stroke: var(--border); stroke-dasharray: none; }
.eb-ylab, .eb-xlab { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.eb-unit { font-size: 10px; font-weight: 600; }
.eb-val { fill: var(--text); font-size: 11px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; opacity: .75; pointer-events: none; }
.eb-bar { transition: opacity .15s ease, filter .15s ease; }
svg.has-hot .eb-bar { opacity: .4; }
svg.has-hot .eb-bar.is-hot { opacity: 1; filter: brightness(1.12) drop-shadow(0 2px 4px rgba(0,113,227,.35)); }
.eb-tip { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 10px)) scale(.92); opacity: 0; pointer-events: none;
  padding: 7px 12px; border-radius: 12px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 6px 20px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); transition: opacity .15s ease, transform .2s cubic-bezier(.2,.9,.3,1.2); }
.eb-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
.eb-tip span { display: block; font-size: 11px; color: var(--muted); }
.eb-tip strong { display: block; font-size: 15px; color: var(--text); }
.eb-tip em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .eb-val { display: none; } .eb-ylab, .eb-xlab { font-size: 15px; } }
.ec-ylab { position: absolute; left: 2px; transform: translateY(-120%); font-size: 10px; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.ec-yunit { top: 0; transform: translateY(-110%); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .eb-tip { background: rgba(44,44,46,.88); box-shadow: 0 6px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
  svg.has-hot .eb-bar.is-hot { filter: brightness(1.2) drop-shadow(0 2px 6px rgba(10,132,255,.5)); }
}

/* Strom: Zählerstandsgang */
.energy-reading .dash-metric-label { margin-top: 6px; }
.er-current { margin: 0; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); }
.er-current span { font-size: 18px; font-weight: 600; color: var(--muted); }
.er-chart { margin-top: 18px; }
.er-wrap { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.er-svg { display: block; width: 100%; height: auto; overflow: visible; }
.er-wrap .ec-line { animation: none; }
.er-wrap.is-drawn .ec-line { animation: ec-draw 1s cubic-bezier(.45,.05,.25,1) forwards; }
.er-wrap.is-drawn .ec-area { animation: ec-fade .6s ease .5s forwards; }
.er-wrap.is-scrub .ec-cursor { opacity: .6; }
.er-tip { transform: translate(-50%, calc(-100% - 14px)) scale(.92); }
.er-tip.is-on { transform: translate(-50%, calc(-100% - 14px)); }
@media (max-width: 520px) { .er-current { font-size: 32px; } .energy-reading .dash-card-head-row { flex-wrap: wrap; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .er-wrap.is-drawn .ec-line, .er-wrap.is-drawn .ec-area { animation: none; } .er-wrap .ec-line { stroke-dashoffset: 0; } .er-wrap .ec-area { opacity: 1; } }

/* ===== Dark Mode (folgt der Geräte-Einstellung) ===== */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --text: #F5F5F7;
    --muted: #98989D;
    --border: #38383A;
    --accent: #0A84FF;
    --accent-hover: #409CFF;
    --danger: #FF453A;
    --danger-bg: rgba(255, 69, 58, 0.14);
    --success: #30D158;
    --success-bg: rgba(48, 209, 88, 0.14);
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  }
  code { background: rgba(255, 255, 255, 0.08); }
  .input { background-color: #1C1C1E; color: var(--text); border-color: var(--border); }
  .input::placeholder { color: #636366; }
  .input-username { background: rgba(10, 132, 255, 0.10); }

  /* Topbar + Glas */
  .topbar { background: rgba(22, 22, 24, 0.72); border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 16px rgba(0, 0, 0, 0.4); }
  .topbar .brand, .topbar .brand:hover { color: #AEAEB2 !important; }
  .topbar .brand:hover { color: #F5F5F7 !important; }
  .topbar .brand .lc { color: var(--accent); }
  .nav, .dash-tabs, .dash-day-switcher {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(44, 44, 46, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
  .nav-pill, .dash-tabs-pill, .slide-pill, .has-slide-pill .is-active, .deals-filter .dash-tab.is-active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.09) 100%) !important;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  .nav .nav-link.is-active, .nav-pill { background-color: rgba(10, 132, 255, 0.14); }
  .nav-link { color: var(--text); }
  .nav-link:hover { background: rgba(255, 255, 255, 0.08); }
  .topbar-actions .nav-link-persoenlich, .btn-ghost, .btn-delete, .admin-entry, .admin-exit, .link-card, .dash-range-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%), rgba(44, 44, 46, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }
  .topbar-actions .nav-link-persoenlich:hover, .btn-ghost:hover, .btn-delete:hover, .admin-entry:hover, .admin-exit:hover, .link-card:hover, .dash-range-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(58, 58, 60, 0.6);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
  .brand:hover, .nav-link:hover, .btn-ghost:hover, .admin-entry:hover, .admin-exit:hover, .dash-range-btn:hover { background-color: rgba(10, 132, 255, 0.16); }
  .btn { box-shadow: 0 6px 20px rgba(10, 132, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.2); }
  .btn::after, .btn-ghost::after, .btn-delete::after, .admin-entry::after, .admin-exit::after, .link-card::after, .dash-range-btn::after, .nav-link::after,
  .dash-tab::after, a.dash-day-nav::after, button::after, .button::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
  .btn-delete { color: #FF453A; }
  .admin-badge { background: rgba(10, 132, 255, 0.18); }
  .admin-exit:focus-visible { background: rgba(255, 255, 255, 0.08); }
  .dash-day-nav:hover { background: rgba(255, 255, 255, 0.10); }
  .push-bell { color: var(--text); }
  .nav-badge { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(255, 69, 58, 0.4); background: #FF453A; }

  /* Bereichsschalter 7/14/30 */
  .dash-range { background: rgba(118, 118, 128, 0.24); border-color: transparent; }
  .dash-range-btn.is-active, .has-slide-pill > .dash-range-btn.is-active { color: var(--accent); }

  /* Karten & Listen */
  .link-card:hover { border-color: rgba(10, 132, 255, 0.45); }
  .deal-card:hover { border-color: #48484A; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
  .badge-planned { background: rgba(10, 132, 255, 0.16); }
  .badge-note { background: #2C2C2E; }
  .plan-table td, .withings-table td { border-bottom-color: #2C2C2E; }
  .dash-workout-card { background: #1C1C1E; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
  .dash-workout-name, .dash-workout-duration { color: var(--text); }
  .dash-workout-date, .dash-workout-kcal { color: var(--muted); }
  .dash-workout-accent, .dash-workout-kind-fallback .dash-workout-accent { background: #48484A; }
  .dash-workout-kind-strength .dash-workout-accent { background: #0A84FF; }
  .dash-workout-icon, .dash-workout-kind-strength .dash-workout-icon, .dash-workout-kind-fallback .dash-workout-icon { color: #0A84FF; }
  .dash-steps-list, .dash-steps-row { border-color: rgba(255, 255, 255, 0.08); }
  .dash-steps-row, .dash-steps-row.is-today .dash-steps-date { color: var(--text); }
  .dash-steps-date { color: var(--muted); }
  .dash-steps-row.is-goal .dash-steps-val { color: var(--accent); }
  .news-card { background: #1C1C1E; color: var(--text); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
  .news-card:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6); }
  .news-thumb { background: #2C2C2E; }
  .news-title { color: var(--text); }
  .news-date, .news-teaser { color: var(--muted); }
  .news-empty { background: #1C1C1E; border-color: var(--border); color: var(--muted); }
  .pg-stat { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
  .pg-stat span, .pg-stat small, .pg-var, .pg-cue, .pg-dt, .pg-min { color: var(--muted); }
  .pg-day { background: rgba(10, 132, 255, 0.10); }
  .pg-day.is-today { background: rgba(10, 132, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(10, 132, 255, 0.4); }
  .pg-wd, .pg-prog summary { color: var(--accent); }
  .edit-mode [data-edit-key]:hover { background: rgba(10, 132, 255, 0.10); }
  .energy-day-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }

  /* Diagramme (SVG aus PHP/JS: Attribut-Farben ueberschreiben) */
  svg [fill="#86868B"], svg [fill="#6E6E73"] { fill: #98989D; }
  svg [fill="#1D1D1F"] { fill: #F5F5F7; }
  svg [stroke="#0071E3"] { stroke: #0A84FF; }
  svg [fill="#0071E3"] { fill: #0A84FF; }
  svg [stop-color="#0071E3"] { stop-color: #0A84FF; }
  svg [stroke="#E8E8ED"] { stroke: #2C2C2E; }
  svg [fill="#D2D2D7"] { fill: #3A3A3C; }
  svg [fill="#5AC8FA"] { fill: #64D2FF; }

  /* Detail-Sheet */
  .esheet-backdrop { background: rgba(0, 0, 0, 0.55); }
  .esheet-card { background: #1C1C1E; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .esheet-cmp.is-up strong { color: #FF9F0A; }
  .esheet-cmp.is-down strong { color: #30D158; }
}

/* "Persönlich sperren": kleine Glas-Pille */
.lock-form { display: inline-flex; }
.btn.btn-lock { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 0; padding: 6px 14px; font-size: 13px; font-weight: 500; line-height: 1.2; border-radius: 980px; color: var(--accent); }
.btn.btn-lock svg { opacity: .8; flex: none; }

/* =====================================================================
   Einheitliche Design-Sprache (Typo-Skala + Button-Größen)
   ===================================================================== */
:root {
  --fs-page-title: clamp(30px, 6vw, 40px);   /* Seitentitel (h1) */
  --fw-page-title: 700;
  --fs-section: clamp(24px, 4.5vw, 30px);     /* Abschnittsüberschrift */
  --fw-section: 700;
  --fs-card-title: 19px;                       /* Karten-/Kacheltitel */
  --fw-card-title: 600;
  --fs-body: 16px;                             /* Fließtext */
  --fs-subhead: 14px;                          /* Sekundärtext, Beschreibungen */
  --fs-caption: 13px;                          /* Labels, Meta, Datum */
  --fw-caption: 500;
  --fs-micro: 11px;                            /* Achsen, Badges */
  --fs-metric: 28px;                           /* große Kennzahl */
  --fw-metric: 650;
  --btn-sm-h: 28px;                            /* kleine Pille: Kopfzeile, Nav, Tabs, Bereich, Sperren, Glocke */
  --btn-sm-px: 12px;
  --btn-sm-fs: 13px;
  --btn-h: 44px;                               /* Standard-Button */
  --btn-px: 22px;
  --btn-fs: 16px;
  --btn-radius: 980px;
}
@media (max-width: 640px) {
  :root { --fs-card-title: 18px; --fs-metric: 24px; --btn-sm-px: 10px; }
}

/* Typografie */
h1 { font-size: var(--fs-page-title); font-weight: var(--fw-page-title); }
.section-heading { font-size: var(--fs-section); font-weight: var(--fw-section); }
.panel-title, .block-title, .project-title, .deal-title, .note-title, .news-title, .plan-card-title,
.withings-card-title, .dash-card-title, .dash-hero-title, .link-card-label, .dash-workout-name {
  font-size: var(--fs-card-title); font-weight: var(--fw-card-title); }
body, .sub, .panel-text, .project-text, .plan-card-sub, .dash-hero-focus, .file-name, .empty-hint,
.plan-meal-body, .daily-plan-date, .input { font-size: var(--fs-body); }
.news-teaser, .link-card-desc, .note-text, .deal-note, .withings-weight-meta, .file-link, .upload-chosen,
.plan-table, .withings-table, .dash-day-label, .pg-day-body, .success, .error { font-size: var(--fs-subhead); }
.eyebrow, .label, .deals-updated, .deal-source, .project-date, .withings-updated, .daily-plan-updated,
.dash-metric-label, .dash-metric-foot, .dash-card-meta, .news-date, .file-meta, .site-footer,
.withings-metric-label, .dash-stat-label, .dash-ring-name, .plan-table th, .withings-table th,
.photo-placeholder figcaption, .plan-meal-slot, .plan-meal-macros, .plan-hint-text, .dash-workout-date,
.dash-workout-kcal, .esheet-kicker, .pg-dt, .pg-min { font-size: var(--fs-caption); }
.dash-metric-label, .withings-metric-label, .dash-stat-label { font-weight: 600; }
.badge, .admin-badge, .photo-hint, .fitness-meta, .plan-ex-note { font-size: var(--fs-micro); }
.dash-metric-value, .dash-stat-value, .deal-price, .dash-workout-duration {
  font-size: var(--fs-metric); font-weight: var(--fw-metric); letter-spacing: -0.02em; }

/* Kleine Pille: gleiche Höhe/Polsterung/Radius überall */
.topbar .brand, .topbar .brand:hover,
.nav-link, .topbar-actions .nav-link, .topbar-actions .admin-entry, .topbar-actions .admin-exit,
.topbar-actions .admin-badge, .topbar-actions .btn, .topbar-actions .btn-ghost,
.admin-entry, .admin-exit, .admin-back, .dash-tab, .dash-range-btn, .btn-ghost, .btn-delete,
.deal-cta, .dash-workout-more, .btn.btn-lock, .push-bell {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-sm-h); min-height: 0; margin-top: 0;
  padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); font-weight: 500; line-height: 1;
  border-radius: var(--btn-radius); white-space: nowrap; box-sizing: border-box; }
.topbar .brand, .topbar .brand:hover { font-size: var(--btn-sm-fs) !important; }
@media (max-width: 640px) {
  .topbar .brand, .topbar-actions .nav-link, .topbar-actions .admin-entry, .topbar-actions .admin-exit,
  .topbar-actions .admin-badge, .topbar-actions .btn, .topbar-actions .btn-ghost, .nav-link {
    padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); }
}
.dash-range { padding: 2px; }
.dash-range .dash-range-btn { height: calc(var(--btn-sm-h) - 4px); }
.admin-badge { height: 22px; padding: 0 8px; font-size: var(--fs-micro); }

/* "Persönlich sperren": wirklich klein */
.lock-form { display: inline-flex; align-items: center; align-self: center; margin: 0; flex: none; }
.btn.btn-lock { width: auto; color: var(--accent); }
.btn.btn-lock svg { width: 12px; height: 12px; }

/* Standard-Button */
.btn:not(.btn-ghost):not(.btn-lock):not(.btn-delete) {
  min-height: var(--btn-h); padding: 0 var(--btn-px); font-size: var(--btn-fs); font-weight: 500;
  border-radius: var(--btn-radius); }
.topbar-actions .btn:not(.btn-ghost) { min-height: 0; height: var(--btn-sm-h); padding: 0 var(--btn-sm-px); font-size: var(--btn-sm-fs); }

/* Strom: Tarif bearbeiten */
.er-tarif { margin: 4px 0 14px; }
.er-tarif > summary { list-style: none; }
.er-tarif > summary::-webkit-details-marker { display: none; }
.er-tarif-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--btn-sm-h, 28px); padding: 0 var(--btn-sm-px, 12px);
  font-size: var(--btn-sm-fs, 13px); font-weight: 500; line-height: 1; color: var(--accent); cursor: pointer; border-radius: 980px; white-space: nowrap; max-width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 100%), rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.85); box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-tap-highlight-color: transparent; transition: transform .2s ease; }
.er-tarif-pill span { overflow: hidden; text-overflow: ellipsis; }
.er-tarif-pill:active { transform: scale(.97); }
.er-tarif-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.3); }
.er-tarif-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 10px; padding: 14px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); animation: er-tarif-in .3s cubic-bezier(.2,.9,.3,1); }
@keyframes er-tarif-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.er-tarif-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; }
.er-tarif-field .label { margin: 0; }
.er-tarif-input { position: relative; display: block; }
.er-tarif-input .input { width: 100%; height: 36px; padding: 0 70px 0 12px; font-size: 16px; border-radius: 10px; }
.er-tarif-input em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: var(--fs-caption, 13px); color: var(--muted); pointer-events: none; }
.er-tarif-save { flex: none; }
.er-tarif .error { margin: 8px 0 0; }
.er-tarif-ok { margin: -6px 0 12px; color: var(--success); }
@media (max-width: 520px) { .er-tarif-save { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .er-tarif-form { animation: none; } }
@media (prefers-color-scheme: dark) {
  .er-tarif-pill { background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%), rgba(44,44,46,.55);
    border-color: rgba(255,255,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.10); }
}

/* ===== Mobiler Header (Variante 2): Logo · Glocke · Sperren · ⋯ ===== */
.m-act, .m-sheet { display: none; }
@media (max-width: 700px) {
  .topbar.topbar-compact { flex-wrap: nowrap; gap: 6px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar-compact .nav,
  .topbar-compact .topbar-actions > .nav-link, .topbar-compact .topbar-actions > .admin-badge, .topbar-compact .topbar-actions > .admin-entry,
  .topbar-compact .topbar-actions > form.admin-logout-form, .topbar-compact .topbar-actions > form.logout-form { display: none !important; }
  .topbar-compact .brand { margin-right: auto; }
  .topbar-compact .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .topbar-compact .push-bell, .m-ico { width: var(--btn-sm-h, 28px); height: var(--btn-sm-h, 28px); padding: 0 !important; border-radius: 50%; }
  .m-act { display: inline-flex; align-items: center; justify-content: center; position: relative; appearance: none; cursor: pointer; color: var(--accent); flex: none;
    background: linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.12) 100%), rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.85); box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.95);
    -webkit-tap-highlight-color: transparent; transition: transform .2s ease; }
  .m-act:active { transform: scale(.94); }
  .m-act:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.35); }
  #m-more.has-dot::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px var(--bg); }
  /* In-Page "Persönlich sperren" -> im Header als Schloss */
  .section-toolbar .lock-form { display: none; }

  /* Sheet */
  .m-sheet { display: flex; position: fixed; inset: 0; z-index: 2000; flex-direction: column; justify-content: flex-end; }
  .m-sheet[hidden] { display: none; }
  .m-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.3); opacity: 0; transition: opacity .3s ease; }
  .m-sheet-card { position: relative; margin: 8px; margin-bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px; border-radius: 22px; outline: none;
    max-height: calc(100vh - 60px); overflow-y: auto;
    background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateY(110%); transition: transform .38s cubic-bezier(.2,.9,.25,1); }
  .m-sheet.is-open .m-sheet-bg { opacity: 1; }
  .m-sheet.is-open .m-sheet-card { transform: none; }
  .m-sheet-title { margin: 8px 12px 4px; font-size: var(--fs-micro, 11px); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .msheet-link { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent;
    font: inherit; font-size: var(--fs-body, 16px); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .msheet-link:hover, .msheet-link:focus-visible { background: rgba(118,118,128,.12); outline: none; }
  .msheet-link.is-current { color: var(--accent); font-weight: 600; }
  .msheet-link.is-danger { color: #ff3b30; }
  .msheet-link.m-done { justify-content: center; font-weight: 600; color: var(--accent); }
  .msheet-link .nav-badge { position: static; margin-left: auto; box-shadow: none; }
  .m-sheet-card hr { border: 0; border-top: 1px solid rgba(118,118,128,.2); margin: 4px 12px; }
  html.m-lock, html.m-lock body { overflow: hidden; }

  /* Persönlich-Tabs als iOS-Segmented-Control, seitlich scrollbar */
  .dash-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    max-width: 100%; width: 100%; border-radius: 10px; padding: 2px; gap: 0;
    background: rgba(118,118,128,.12) !important; border: 0 !important; box-shadow: none !important; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tabs .dash-tab { flex: 1 0 auto; height: 28px; padding: 0 12px; border-radius: 8px; font-size: 13px; scroll-snap-align: center; }
  .dash-tabs .dash-tab.is-active { color: var(--text); font-weight: 600; }
  .dash-tabs-pill { border-radius: 8px !important; background: var(--surface) !important; border: 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04) !important; }
}
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  .m-act { background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%), rgba(44,44,46,.55);
    border-color: rgba(255,255,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.10); }
  .m-sheet-bg { background: rgba(0,0,0,.5); }
  .m-sheet-card { background: rgba(44,44,46,.9); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
  .msheet-link.is-danger { color: #ff453a; }
  #m-more.has-dot::after { background: #ff453a; }
  .dash-tabs { background: rgba(118,118,128,.24) !important; }
  .dash-tabs-pill { background: #636366 !important; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { .m-sheet-card, .m-sheet-bg { transition: none; } }

/* Admin-Einstieg unten auf Persönlich */
.admin-foot { display: flex; justify-content: center; margin: 40px 0 8px; }

/* ===== Hauptnavigation einzeilig (Variante 3) ===== */
.topbar .nav { flex-wrap: nowrap; min-width: 0; flex: 0 1 auto; overflow: visible; position: relative; }
.topbar .nav .nav-link { flex: none; }
.topbar .nav .nav-link[hidden] { display: none !important; }
.topbar .nav.nav-tight { gap: 0; }
.topbar .nav.nav-tight .nav-link { padding-left: 8px; padding-right: 8px; }
.nav-more { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center; height: var(--btn-sm-h, 28px); min-width: var(--btn-sm-h, 28px); padding: 0 8px;
  border-radius: 980px; color: var(--accent); -webkit-tap-highlight-color: transparent; transition: background .2s ease; }
.nav-more[hidden] { display: none; }
.nav-more:hover, .nav-more[aria-expanded="true"] { background: rgba(0,113,227,.12); }
.nav-more:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,.3); }
.nav-more.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px var(--bg); }
.nav-drop { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border-radius: 16px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
  transform-origin: top right; transform: scale(.94); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .15s ease, visibility 0s .22s; }
.nav-drop.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .15s ease; }
.nav-drop-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: var(--fs-subhead, 14px); font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav-drop-item:hover, .nav-drop-item:focus-visible { background: rgba(118,118,128,.12); outline: none; }
.nav-drop-item .nav-badge { position: static; margin-left: auto; box-shadow: none; }
@media (max-width: 720px) { .topbar .nav { flex: 1 1 100%; } }
@media (prefers-color-scheme: dark) {
  .nav-more:hover, .nav-more[aria-expanded="true"] { background: rgba(10,132,255,.2); }
  .nav-more.has-dot::after { background: #ff453a; }
  .nav-drop { background: rgba(44,44,46,.92); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion: reduce) { .nav-drop, .nav-drop.is-open { transition: none; } }

/* Strom: Monate blättern */
.em-nav { display: inline-flex; align-items: center; gap: 6px; }
.em-nav .em-btn { min-width: 28px; padding: 0 8px; font-size: 16px; line-height: 1; }
.em-nav .em-btn:disabled { opacity: .35; cursor: default; }
.em-label { min-width: 118px; text-align: center; font-size: var(--fs-body, 15px); font-weight: 600; font-variant-numeric: tabular-nums; }
.energy-months .em-month[hidden] { display: none; }

/* Überblick · "Plan für den Tag": kleinere Buttons + kleineres Buchstaben-Icon (nur dieser Bereich) */
#panel-overview .dash-hero-icon { width: 34px; height: 34px; font-size: 15px; }
#panel-overview .dash-hero-card { gap: 12px; }
#panel-overview .dash-hero-cta.btn { height: 28px !important; min-height: 0 !important; padding: 0 12px !important; font-size: 13px !important; line-height: 28px; border-radius: 980px; }
#panel-overview .dash-day-switcher { min-height: 28px; padding: 1px; }
#panel-overview .dash-day-nav { width: 30px; height: 30px; margin: -2px 0; font-size: 16px; }
#panel-overview .dash-day-label { font-size: 13px; padding: 0 6px; }