/* Zentrale - gemeinsame Gestaltung für Login, Einladung und Dashboard.
   Tresorgrün und gebürstetes Gold: Gold wie das Metall, Grün wie die steigende Kerze. */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Anthrazit, Champagner, Elfenbein - wie iamleogs.de */
  --vault: #0c0d0f;
  --vault-2: #111215;
  --vault-3: #16181b;
  --vault-4: #202226;
  --line: rgba(236, 231, 221, 0.09);
  --line-strong: rgba(205, 184, 138, 0.3);
  --gold: #cdb88a;
  --gold-hi: #f1e7d0;
  --gold-lo: #8f7d5a;
  --paper: #ece7dd;
  --sage: #9b968d;
  --mute: #66625c;
  --up: #8cc4a5;
  --down: #e0917f;
  --warn: #d9b26a;
  --on-gold: #0c0d0f;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --metal: linear-gradient(100deg, #8f7d5a 0%, #cdb88a 22%, #f6efdc 38%, #cdb88a 52%, #a8946a 70%, #f1e7d0 86%, #cdb88a 100%);
  --radius-l: 10px;
  --radius-m: 8px;
  --radius-s: 6px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow: none;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--vault);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Leichtes Korn und ein langsam wandernder Goldschimmer im Hintergrund */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(45% 40% at 18% 0%, rgba(205, 184, 138, 0.06), transparent 70%),
    radial-gradient(40% 35% at 90% 100%, rgba(236, 231, 221, 0.035), transparent 70%);
  animation: drift 26s var(--ease) infinite alternate;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

@keyframes drift {
  to {
    transform: translate3d(6%, 4%, 0) rotate(8deg);
  }
}

a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}
::selection {
  background: var(--gold);
  color: var(--on-gold);
}
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Metall */

.metal {
  background: var(--metal);
  background-size: 250% 100%;
  background-position: var(--sheen, 0%) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metal--sweep {
  animation: sweep 2.6s var(--ease) 0.2s both;
}
@keyframes sweep {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

/* Monogramm: ein L in einem Ring, der sich beim Laden zeichnet */
.mark {
  width: 44px;
  height: 44px;
  flex: none;
}
.mark circle {
  fill: none;
  stroke: url(#markGold);
  stroke-width: 1.6;
}
.mark--draw circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.4s var(--ease) 0.1s forwards;
}
.mark path {
  fill: url(#markGold);
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ----------------------------------------------------------- Knöpfe */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(236, 231, 221, 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease), border-color 0.4s, transform 0.25s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border-radius: 50% 50% 0 0;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease), border-radius 0.55s var(--ease);
}
/* Nur mit Maus: auf dem iPhone bleibt :hover nach dem Antippen „kleben“ – der Knopf wäre dann hell gefüllt, bis
   man woanders hintippt. Rückmeldung beim Tippen gibt :active. */
@media (hover: hover) {
  .btn:hover {
    color: var(--on-gold);
    border-color: var(--paper);
  }
  .btn:hover::before {
    transform: none;
    border-radius: 0;
  }
}
.btn:active {
  transform: scale(0.97);
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn--gold {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 550;
}
.btn--gold::before {
  background: var(--gold-hi);
}
@media (hover: hover) {
  .btn--gold:hover {
    border-color: var(--gold-hi);
  }
}
.btn--ghost {
  border-color: var(--line);
}
.btn--danger {
  border-color: rgba(224, 145, 127, 0.45);
  color: #f0b4a6;
}
.btn--danger::before {
  background: var(--down);
}
@media (hover: hover) {
  .btn--danger:hover {
    border-color: var(--down);
  }
}
.btn--small {
  min-height: 34px;
  padding: 0 13px;
  font-size: 13.5px;
}
.btn--icon {
  width: 40px;
  min-height: 40px;
  padding: 0;
}
.btn .spin {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------ Felder */

.field {
  display: grid;
  gap: 6px;
  align-content: start;
}
.field > span {
  color: var(--sage);
  font-size: 13px;
  font-weight: 520;
}
.field small {
  color: var(--mute);
  font-size: 12.5px;
}
.input,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(236, 231, 221, 0.14);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, 0.025);
  color: var(--paper);
  transition: border-color 0.3s, background-color 0.3s;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d9b45a' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  /* nur die Farbe: „background“ würde den Pfeil der Auswahlfelder löschen */
  background-color: rgba(255, 255, 255, 0.04);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--mute);
}

/* Passwort anzeigen: Auge rechts im Feld */
.pw {
  position: relative;
  display: block;
}
.pw > input {
  padding-right: 48px;
}
.pw__eye {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--mute);
  transform: translateY(-50%);
  transition: color 0.2s;
}
.pw__eye:hover,
.pw__eye[aria-pressed='true'] {
  color: var(--gold);
}
.pw__eye:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -4px;
}
.pw__eye .icon {
  width: 18px;
  height: 18px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sage);
  cursor: pointer;
  user-select: none;
}
.check input {
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(5, 6, 8, 0.6);
  display: grid;
  place-items: center;
  transition: background-color 0.2s, border-color 0.2s;
}
.check input::after {
  content: '';
  width: 10px;
  height: 6px;
  border: 2px solid var(--on-gold);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.25s var(--ease-spring);
  margin-top: -2px;
}
.check input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.check input:checked::after {
  transform: rotate(-45deg) scale(1);
}

/* Schalter. Safari/iOS dehnt eine Checkbox nicht über inset:0 – daher feste Maße am input. */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  min-width: 50px;
  height: 30px;
  flex: none;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
/* Tippfläche auf 44 px Höhe vergrößern, ohne das Layout zu verschieben */
.switch::before {
  content: '';
  position: absolute;
  inset: -7px -4px;
}
.switch input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 30px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--vault-4);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease-spring), background-color 0.25s;
}
.switch input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.switch input:checked {
  background: rgba(205, 184, 138, 0.35);
  border-color: var(--gold);
}
.switch input:checked::after {
  transform: translateX(20px);
  background: var(--gold-hi);
}

.form-error {
  min-height: 1.4em;
  margin: 0;
  color: #f0b4a6;
  font-size: 14px;
}
.shake {
  animation: shake 0.45s var(--ease);
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-7px);
  }
  40%,
  80% {
    transform: translateX(7px);
  }
}

/* ======================================================= Login / Einladung */

.gate {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 520px);
}
.gate__art {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 48px;
  border-right: 1px solid var(--line);
}
.gate__gold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gate__brand {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
}
.gate__claim {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  margin-top: auto;
  font-size: clamp(72px, 10vw, 170px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.gate__claim span {
  display: block;
  overflow: hidden;
}
.gate__claim span > i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
  animation: rise 1.1s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i, 0) * 0.12s);
}
@keyframes rise {
  to {
    transform: none;
  }
}
.gate__foot {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  max-width: 34ch;
  color: var(--mute);
  font-size: 12.5px;
}

.gate__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(24px, 5vw, 72px);
  background: var(--vault-2);
}
.gate__panel h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.gate__panel .lead {
  margin: 0 0 30px;
  color: var(--sage);
}
.gate form {
  display: grid;
  gap: 18px;
}
.gate .steps-viewport {
  position: relative;
}
.step {
  animation: step-in 0.55s var(--ease) both;
}
.step--out {
  animation: step-out 0.3s var(--ease) both;
}
@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(28px);
    filter: blur(4px);
  }
}
@keyframes step-out {
  to {
    opacity: 0;
    transform: translateX(-28px);
    filter: blur(4px);
  }
}

/* Sechs Felder für den 2FA-Code */
.code {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 14px repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}
.code input {
  width: 100%;
  height: 62px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: rgba(5, 6, 8, 0.6);
  text-align: center;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  caret-color: var(--gold);
  transition: border-color 0.2s, transform 0.25s var(--ease-spring), box-shadow 0.25s;
}
.code input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(205, 184, 138, 0.14);
}
.code input.filled {
  border-color: var(--gold);
  animation: pop 0.3s var(--ease-spring);
}
.code i {
  height: 2px;
  background: var(--line-strong);
}
@keyframes pop {
  50% {
    transform: scale(1.08);
  }
}
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 14px;
}

/* Erfolg: der Ring schließt sich, Gold blitzt auf */
.unlock {
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 30px 0;
  text-align: center;
}
.unlock svg {
  width: 120px;
  height: 120px;
}
.unlock circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s var(--ease) forwards;
}
.unlock path {
  fill: none;
  stroke: var(--gold-hi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.5s var(--ease) 0.7s forwards;
}
.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(241, 231, 208, 0.35), transparent 60%);
  animation: flash 1.1s var(--ease) forwards;
}
@keyframes flash {
  from {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Einladung: Fortschritt in drei Schritten */
.progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: s;
}
.progress li {
  position: relative;
  padding-top: 12px;
  color: var(--mute);
  font-size: 13px;
  counter-increment: s;
}
.progress li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--vault-4);
}
.progress li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--gold);
  transition: width 0.8s var(--ease);
}
.progress li.done,
.progress li.now {
  color: var(--paper);
}
.progress li.done::after {
  width: 100%;
}
.progress li.now::after {
  width: 45%;
}
.meter {
  height: 4px;
  border-radius: 4px;
  background: var(--vault-4);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--c, var(--down));
  transition: width 0.4s var(--ease), background-color 0.3s;
}
.qr {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 20px;
  align-items: center;
}
.qr__img {
  width: 168px;
  height: 168px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-strong), 0 20px 40px -20px rgba(0, 0, 0, 0.8);
  animation: qr-in 0.8s var(--ease) both;
}
.qr__img svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes qr-in {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-4deg);
  }
}
.secret {
  display: block;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: rgba(5, 6, 8, 0.7);
  border: 1px dashed var(--line-strong);
  font-size: 13px;
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
}
.codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 16px;
  border-radius: var(--radius-m);
  background: rgba(5, 6, 8, 0.7);
  border: 1px solid var(--line-strong);
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
}

@media (max-width: 860px) {
  .gate {
    grid-template-columns: 1fr;
  }
  .gate__art {
    min-height: 34vh;
    padding: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .gate__claim {
    font-size: clamp(40px, 13vw, 64px);
  }
  .gate__foot {
    display: none;
  }
  .gate__panel {
    padding: 32px 20px 48px;
  }
  .qr {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ============================================================ Dashboard */

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 16px;
  border-right: 1px solid var(--line);
  background: var(--vault);
}
.side__brand {
  display: grid;
  gap: 2px;
  padding: 0 10px;
  text-decoration: none;
}
.side__brand b {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
.side__brand small {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
}
.nav {
  display: grid;
  gap: 2px;
}
/* Langes Menü: nur die Liste scrollt, Name oben und Konto unten bleiben stehen. Die Liste reicht bis an den
   Rand der Leiste, sonst schneidet das Scrollen den Goldstrich am aktiven Punkt (left: -16px) ab. */
.side .nav {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 184, 138, 0.25) transparent;
}
.nav__group {
  margin: 14px 10px 6px;
  color: var(--mute);
  font-size: 12px;
  font-weight: 560;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--sage);
  text-decoration: none;
  font-weight: 450;
  transition: color 0.25s, background-color 0.25s;
}
.nav a:hover {
  color: var(--paper);
  background: rgba(205, 184, 138, 0.06);
}
.nav a[aria-current='page'] {
  color: var(--paper);
  background: rgba(236, 231, 221, 0.05);
}
.nav a[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  animation: grow-y 0.4s var(--ease);
}
.nav a[aria-current='page'] .icon {
  color: var(--gold);
}
.nav .badge {
  margin-left: auto;
}
@keyframes grow-y {
  from {
    transform: scaleY(0);
  }
}
.side__me {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  font-family: var(--serif);
  font-size: 19px;
}
.side__me div {
  min-width: 0;
  flex: 1;
}
.side__me b,
.side__me small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side__me small {
  color: var(--mute);
  font-size: 12.5px;
}

.main {
  min-width: 0;
  padding: 28px clamp(18px, 3.2vw, 44px) 80px;
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 26px;
}
.top h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.top p {
  margin: 8px 0 0;
  color: var(--sage);
}
.top__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Seitenwechsel */
.view {
  animation: view-in 0.6s var(--ease) both;
}
@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
::view-transition-old(root) {
  animation: vt-out 0.22s var(--ease) both;
}
::view-transition-new(root) {
  animation: vt-in 0.45s var(--ease) both;
}
@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Raster und Flächen. Flächen haben je nach Gewicht verschiedene Formen. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

.panel {
  position: relative;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: rgba(255, 255, 255, 0.018);
}
.panel--flat {
  background: transparent;
  box-shadow: none;
}
.panel--hero {
  overflow: hidden;
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(205, 184, 138, 0.09), transparent 60%),
    rgba(255, 255, 255, 0.018);
}
.panel h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
}
.panel h2 small {
  color: var(--mute);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12.5px;
}
.panel h2 a {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 450;
  text-decoration: none;
}
.panel h2 a:hover {
  text-decoration: underline;
}

/* Eintritt beim Rendern: gestaffelt über --i (setzt das Skript) */
[data-rise] {
  animation: rise-in 0.7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
}

/* Kennzahlen */
.kpi {
  display: grid;
  gap: 2px;
}
.kpi__label {
  color: var(--sage);
  font-size: 13.5px;
}
.kpi__value {
  font-family: var(--serif);
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.kpi__value--gold {
  color: var(--gold);
}
.kpi__sub {
  color: var(--mute);
  font-size: 13px;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.delta--up {
  color: var(--up);
  background: rgba(140, 196, 165, 0.12);
}
.delta--down {
  color: var(--down);
  background: rgba(224, 145, 127, 0.12);
}
.delta--flat {
  color: var(--sage);
  background: rgba(155, 150, 141, 0.1);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px 28px;
}

/* Begrüßung */
.hello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: end;
}
.hello h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.hello p {
  margin: 10px 0 0;
  color: var(--sage);
  font-size: 16px;
}
.clock {
  text-align: right;
}
.clock b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 400;
  line-height: 1;
}
.clock small {
  color: var(--mute);
}

/* Status-Leiste */
.status-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.svc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: rgba(5, 6, 8, 0.35);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.25s var(--ease), background-color 0.2s;
}
a.svc:hover {
  border-color: var(--line-strong);
  background: rgba(5, 6, 8, 0.55);
  transform: translateY(-2px);
}
.svc b {
  font-weight: 560;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc small {
  grid-column: 2;
  color: var(--mute);
  font-size: 12.5px;
}
.svc .bars {
  margin-top: 6px;
}
.svc .bars {
  grid-column: 1 / -1;
}

.dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mute);
}
.dot--ok {
  background: var(--up);
}
.dot--ok::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--up);
  animation: pulse 2.4s ease-out infinite;
}
.dot--bad {
  background: var(--down);
}
.dot--bad::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--down);
  animation: pulse 1.2s ease-out infinite;
}
.dot--wait {
  background: var(--warn);
}
@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 0.6;
  }
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* Mini-Verlauf: ein Balken pro Messung */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}
.bars i {
  flex: 1;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: rgba(140, 196, 165, 0.55);
  transform-origin: bottom;
  animation: bar-y 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 8ms);
}
.bars i.bad {
  background: var(--down);
}
.bars i.none {
  background: var(--vault-4);
}

/* Diagramme (SVG) */
.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chart .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}
.chart .axis {
  fill: var(--mute);
  font-size: 11px;
}
.chart .bar {
  fill: url(#barGold);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: bar-y 0.9s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.chart .bar--muted {
  fill: var(--vault-4);
}
.chart .bar--up {
  fill: var(--up);
}
.chart .bar--warn {
  fill: var(--warn);
}
.chart .bar--down {
  fill: var(--down);
}
.ring--down .fill {
  stroke: var(--down);
}
.chart .bar:hover {
  filter: brightness(1.2);
}
.chart .value {
  fill: var(--paper);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  animation: fade 0.6s var(--ease) both;
  animation-delay: calc(0.4s + var(--i, 0) * 45ms);
}
.chart .line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.6s var(--ease) 0.15s forwards;
}
.chart .line--up {
  stroke: var(--up);
}
.chart .line--sage {
  stroke: var(--sage);
  stroke-width: 1.6;
}
.chart .area {
  fill: url(#areaGold);
  animation: fade 1.4s var(--ease) 0.4s both;
}
.chart .point {
  fill: var(--vault);
  stroke: var(--gold-hi);
  stroke-width: 2;
  animation: fade 0.5s var(--ease) both;
  animation-delay: calc(0.6s + var(--i, 0) * 40ms);
}
@keyframes bar-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

/* Ring für Anteile */
.ring {
  position: relative;
  width: var(--size, 104px);
  height: var(--size, 104px);
  flex: none;
}
.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring .track {
  fill: none;
  stroke: var(--vault-4);
  stroke-width: 8;
}
.ring .fill {
  fill: none;
  stroke: url(#ringGold);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: calc(var(--size, 104px) * 0.28);
  font-weight: 400;
}
.ring--ok .fill {
  stroke: var(--up);
}
.ring--warn .fill {
  stroke: var(--warn);
}

/* Fortschrittsbalken */
.track-bar {
  height: 4px;
  border-radius: 8px;
  background: var(--vault-4);
  overflow: hidden;
}
.track-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 8px;
  background: var(--gold);
  transition: width 1.2s var(--ease);
}
.track-bar--ok i {
  background: var(--up);
}
.track-bar--warn i {
  background: var(--warn);
}

/* Trichter */
.funnel {
  display: grid;
  gap: 10px;
}
.funnel__row {
  display: grid;
  grid-template-columns: 120px 1fr 52px;
  align-items: center;
  gap: 12px;
}
.funnel__row span {
  color: var(--sage);
  font-size: 13.5px;
}
.funnel__row b {
  text-align: right;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
}
.funnel__bar {
  position: relative;
  height: 20px;
  border-radius: 7px;
  background: rgba(5, 6, 8, 0.5);
  overflow: hidden;
}
.funnel__bar i,
.funnel__bar em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 7px;
  transition: width 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.funnel__bar i {
  background: rgba(205, 184, 138, 0.22);
}
.funnel__bar em {
  background: var(--gold);
}

/* Listen */
.list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.list li:last-child {
  border-bottom: 0;
}
.list .who {
  min-width: 0;
}
.list .who b {
  display: block;
  font-weight: 580;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list .who small {
  display: block;
  color: var(--sage);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list time,
.list .meta {
  color: var(--mute);
  font-size: 12.5px;
  white-space: nowrap;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--sage);
  font-size: 12.5px;
  font-weight: 540;
  white-space: nowrap;
}
.tag--gold {
  border-color: rgba(205, 184, 138, 0.5);
  color: var(--gold-hi);
  background: rgba(205, 184, 138, 0.08);
}
.tag--up {
  border-color: rgba(140, 196, 165, 0.45);
  color: var(--up);
}
.tag--down {
  border-color: rgba(224, 145, 127, 0.45);
  color: var(--down);
}
.tag--warn {
  border-color: rgba(217, 178, 106, 0.5);
  color: var(--warn);
}
.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 11.5px;
  font-weight: 700;
}
.initial {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 17px;
}

/* Schnellzugriff */
.launch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.launch a {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: rgba(5, 6, 8, 0.35);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.35s var(--ease);
}
.launch a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at var(--mx, 50%) var(--my, 0%), rgba(205, 184, 138, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.launch a:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.launch a:hover::before {
  opacity: 1;
}
.launch .icon {
  width: 22px;
  height: 22px;
  color: var(--gold);
}
.launch b {
  position: relative;
  font-weight: 600;
}
.launch small {
  position: relative;
  display: block;
  color: var(--mute);
  font-size: 12.5px;
}

/* Zeilen mit Schalter */
.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setting:last-child {
  border-bottom: 0;
}
.setting b {
  display: block;
  font-weight: 570;
}
.setting small {
  display: block;
  color: var(--sage);
  font-size: 13px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-grid .wide {
  grid-column: 1 / -1;
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.row--end {
  justify-content: flex-end;
}
.muted {
  color: var(--sage);
}
.faint {
  color: var(--mute);
}
.small {
  font-size: 13px;
}

.log {
  max-height: 340px;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border-radius: var(--radius-m);
  background: rgba(5, 6, 8, 0.8);
  border: 1px solid var(--line);
  color: var(--sage);
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-line {
  display: flex;
  gap: 8px;
  align-items: center;
}
.copy-line code {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: rgba(5, 6, 8, 0.8);
  border: 1px solid var(--line);
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-x: auto;
  white-space: nowrap;
}

/* Tabelle */
.table-wrap {
  overflow-x: auto;
  margin: 0 -22px;
  padding: 0 22px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  padding: 0 12px 10px 0;
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 540;
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
td.num,
th.num {
  text-align: right;
}
tr.clickable {
  cursor: pointer;
  transition: background-color 0.15s;
}
tr.clickable:hover td {
  background: rgba(205, 184, 138, 0.04);
}

/* Link-Sammlung */
.link-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.link-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin: 0 -12px;
  border-radius: var(--radius-m);
  text-decoration: none;
  transition: background-color 0.2s, transform 0.3s var(--ease);
}
.link-card:hover {
  background: rgba(205, 184, 138, 0.06);
  transform: translateX(3px);
}
.link-card b {
  display: block;
  font-weight: 580;
}
.link-card small {
  display: block;
  color: var(--mute);
  font-size: 12.5px;
}

/* Leerer Zustand */
.empty {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 26px 4px;
  color: var(--sage);
}
.empty b {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

/* Lade-Schimmer */
.skeleton {
  display: block;
  height: var(--h, 120px);
  border-radius: var(--radius-l);
  background: linear-gradient(100deg, rgba(22, 24, 27, 0.5) 30%, rgba(205, 184, 138, 0.08) 50%, rgba(22, 24, 27, 0.5) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Dialog */
dialog {
  width: min(560px, calc(100vw - 24px));
  overflow-x: hidden;
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--vault-2);
  color: var(--paper);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
dialog[open] {
  animation: dialog-in 0.45s var(--ease) both;
}
dialog.closing {
  animation: dialog-out 0.25s var(--ease) both;
}
dialog::backdrop {
  background: rgba(3, 4, 5, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
dialog[open]::backdrop {
  animation: fade 0.3s both;
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}
@keyframes dialog-out {
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px;
}
.dialog__body h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
}
.dialog__body p {
  margin: 0;
}

/* Seitenleiste für Details (Kunde) */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  width: min(520px, 100vw);
  overflow-y: auto;
  padding: 24px;
  border-left: 1px solid var(--line-strong);
  background: var(--vault-2);
  box-shadow: -40px 0 80px -40px rgba(0, 0, 0, 0.9);
  animation: drawer-in 0.5s var(--ease) both;
}
.drawer.closing {
  animation: drawer-out 0.3s var(--ease) both;
}
.drawer-shade {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(3, 4, 5, 0.55);
  animation: fade 0.3s both;
}
@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}
@keyframes drawer-out {
  to {
    transform: translateX(100%);
  }
}

/* Meldungen unten */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--vault-3);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
  animation: toast-in 0.5s var(--ease-spring) both;
}
.toast--bad {
  border-color: rgba(224, 145, 127, 0.6);
}
.toast.leaving {
  animation: toast-out 0.3s var(--ease) both;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.95);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* Unten am Handy: Reiterleiste */
.tabbar {
  display: none;
}

@media (max-width: 1100px) {
  .span-8,
  .span-7,
  .span-6,
  .span-5 {
    grid-column: span 12;
  }
  .span-4,
  .span-3 {
    grid-column: span 6;
  }
}

/* Handy-Ansicht: schmal – oder ein Touch-Gerät quer mit höchstens 500 px Höhe (iPhone quer), dann auch ohne Seitenleiste */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .app {
    grid-template-columns: 1fr;
  }
  .side {
    display: none;
  }
  .main {
    padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
  }
  .span-4,
  .span-3 {
    grid-column: span 12;
  }
  .hello {
    grid-template-columns: 1fr;
  }
  .clock {
    text-align: left;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .table-wrap {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .panel {
    padding: 18px 16px;
  }
  .funnel__row {
    grid-template-columns: 92px 1fr 40px;
  }
  .toasts {
    left: 16px;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    justify-items: stretch;
  }
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(12, 13, 15, 0.86);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }
  .tabbar a,
  .tabbar button {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 6px 2px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--mute);
    font-size: 11px;
    font-weight: 540;
    text-decoration: none;
  }
  .tabbar .icon {
    width: 22px;
    height: 22px;
  }
  .tabbar [aria-current='page'] {
    color: var(--gold-hi);
  }
  .sheet .nav a {
    padding: 13px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .chart .line,
  .mark--draw circle,
  .unlock circle,
  .unlock path {
    stroke-dashoffset: 0;
  }
}

/* Login-Kunstwerk: Kurve zeichnet sich langsam, Kerzen tauchen auf, der letzte Kurs pulsiert */
.art-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 5.5s cubic-bezier(0.45, 0, 0.2, 1) 0.3s forwards;
}
.art-area {
  animation: fade 3s var(--ease) 2.2s both;
}
.art-candle {
  transform-box: fill-box;
  transform-origin: center;
  animation: candle 0.8s var(--ease) both;
}
.art-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: fade 0.6s var(--ease) 5.6s both, beat 2.4s ease-in-out 6.2s infinite;
}
@keyframes candle {
  from {
    opacity: 0;
    transform: scaleY(0.2);
  }
}
@keyframes beat {
  50% {
    transform: scale(1.7);
    opacity: 0.55;
  }
}
.gate__claim b {
  font-weight: inherit;
}

/* Ergänzungen: Trennlinie, Seitenleiste, breiter Dialog */
.sep {
  height: 1px;
  margin: 4px 0;
  border: 0;
  background: var(--line);
}
dialog.dialog--wide {
  width: min(760px, calc(100vw - 24px));
}
.dialog__body.flush {
  padding: 18px 0 8px;
}
.drawer > .row:first-child {
  justify-content: space-between;
  margin-bottom: 18px;
}
.drawer__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 0.95;
  font-weight: 400;
}
.drawer__section {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.drawer__section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 640;
}
.drawer__section .row .input {
  flex: 1 1 140px;
  width: auto;
}
.row > .input {
  flex: 1 1 200px;
  width: auto;
}
#client-list {
  margin-top: 14px;
}
.sheet {
  margin: 0 -8px;
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list a.who {
  text-decoration: none;
}
.list a.who:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
}

.line-chart {
  width: 100%;
  min-width: 0;
}
.line-chart svg {
  display: block;
  max-width: 100%;
}
.chart--still .line,
.chart--still .area,
.chart--still .point {
  animation: none;
  stroke-dashoffset: 0;
}
.ring--empty .fill {
  visibility: hidden;
}

.link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.link-row .link-card {
  margin: 0 0 0 -12px;
}
.initial {
  text-transform: uppercase;
}

.main-wrap {
  min-width: 0;
}
.mobile-top {
  display: none;
}
.main:focus {
  outline: none;
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .mobile-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(12, 13, 15, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .mobile-top .side__brand {
    padding: 0;
  }
  .mobile-top .mark {
    width: 32px;
    height: 32px;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }
  .kpi__value {
    font-size: 32px;
  }
  .top h1 {
    font-size: 36px;
  }
}

@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .table--cards thead {
    display: none;
  }
  .table--cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .table--cards td {
    padding: 0;
    border: 0;
    text-align: left;
  }
  .table--cards td[data-label] {
    color: var(--sage);
    font-size: 13px;
  }
  .table--cards td[data-label]::before {
    content: attr(data-label) ': ';
    color: var(--mute);
  }
}

.access {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.access legend {
  padding: 0 6px;
  color: var(--sage);
  font-size: 13px;
}
.access small {
  display: block;
  color: var(--mute);
  font-size: 12px;
}
.access .check {
  align-items: flex-start;
}

/* ------------------------------------------------ Märkte (Sessions, Gold offen/zu) */

.mkt__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.mkt__head > div {
  display: grid;
  gap: 2px;
}
.mkt__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}
.mkt__head small {
  color: var(--sage);
  font-size: 13.5px;
}
.mkt__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sage);
  font-family: var(--mono);
  font-size: 11.5px;
}
.mkt__badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute);
}
.mkt__badge.is-open {
  border-color: rgba(140, 196, 165, 0.35);
  color: var(--up);
}
.mkt__badge.is-open i {
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(140, 196, 165, 0.5);
  animation: mkt-ping 2.4s ease-out infinite;
}
@keyframes mkt-ping {
  to {
    box-shadow: 0 0 0 9px rgba(140, 196, 165, 0);
  }
}
.mkt__timeline {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 0 26px 92px;
}
.mkt__row {
  position: relative;
  height: 22px;
}
.mkt__name {
  position: absolute;
  top: 50%;
  left: -92px;
  width: 84px;
  transform: translateY(-50%);
  color: var(--mute);
  font-size: 13px;
  transition: color 0.4s;
}
.mkt__row.is-active .mkt__name {
  color: var(--paper);
}
.mkt__track {
  position: relative;
  height: 100%;
  border-radius: 6px;
  background: rgba(236, 231, 221, 0.035);
  overflow: hidden;
}
.mkt__track i {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: var(--l);
  width: var(--w);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(143, 125, 90, 0.45), rgba(205, 184, 138, 0.55));
  transform-origin: left;
  animation: mkt-grow 1.1s var(--ease) both;
}
.mkt__row:nth-child(2) .mkt__track i { animation-delay: 0.08s; }
.mkt__row:nth-child(3) .mkt__track i { animation-delay: 0.16s; }
.mkt__row:nth-child(4) .mkt__track i { animation-delay: 0.24s; }
.mkt__row.is-active .mkt__track i {
  background: var(--metal);
  background-size: 220% 100%;
  animation: mkt-grow 1.1s var(--ease) both, mkt-sheen 5s linear infinite;
}
.is-static .mkt__track i {
  animation: none;
}
.is-static .mkt__row.is-active .mkt__track i {
  animation: mkt-sheen 5s linear infinite;
}
@keyframes mkt-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes mkt-sheen {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -120% 0;
  }
}
.mkt__axis {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 92px;
  height: 18px;
}
.mkt__axis span {
  position: absolute;
  left: var(--l);
  transform: translateX(-50%);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10.5px;
}
.mkt__axis span:first-child {
  transform: none;
}
.mkt__axis span:last-child {
  transform: translateX(-100%);
}
.mkt__now {
  position: absolute;
  top: -6px;
  bottom: 20px;
  left: calc(92px + (100% - 92px) * var(--p));
  width: 1px;
  background: var(--gold);
  pointer-events: none;
}
.mkt__now::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 12px rgba(241, 231, 208, 0.7);
}
.mkt__now span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold-hi);
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mkt__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .mkt__timeline {
    padding-left: 70px;
  }
  .mkt__name {
    left: -70px;
    width: 64px;
    font-size: 12px;
  }
  .mkt__axis {
    left: 70px;
  }
  .mkt__now {
    left: calc(70px + (100% - 70px) * var(--p));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mkt__track i,
  .mkt__row.is-active .mkt__track i,
  .mkt__badge.is-open i {
    animation: none;
  }
}

/* IB-Details (Zahlen aus der IB-Verwaltung) */
.ib-details {
  margin-top: 18px;
}
.ib-month {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.ib-month h2 {
  margin: 0;
}
.month-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.month-switch b {
  min-width: 128px;
  text-align: center;
  font-weight: 540;
}
.month-switch .btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
tfoot td {
  border-top: 1px solid var(--line-strong, var(--line));
}
.spark-cell {
  width: 110px;
}
.spark-cell .line-chart {
  width: 100px;
}
.people-tools {
  margin-bottom: 14px;
}
.people-tools .input:first-child {
  flex: 1 1 220px;
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .hide-s {
    display: none;
  }
}

/* Sprachumschalter DE | EN */
.langswitch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(5, 6, 8, 0.4);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.06em;
}
.langswitch button {
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  font: inherit;
  cursor: pointer;
}
.langswitch button:hover {
  color: var(--ink, #fff);
}
.langswitch button[aria-pressed='true'] {
  background: rgba(205, 184, 138, 0.16);
  color: var(--gold);
}
.langswitch--side {
  flex: 0 0 100%;
  justify-content: center;
  margin-top: 4px;
  width: max-content;
}
.langswitch--gate {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
}
.mobile-top .langswitch {
  margin-left: auto;
}
.side__me {
  flex-wrap: wrap;
}
.gate__panel {
  position: relative;
}

/* Öffentliche Demo: Zugänge auf der Login-Seite */
.demo-box {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding: 16px;
  border: 1px dashed rgba(205, 184, 138, 0.4);
  border-radius: var(--radius-m);
  background: rgba(205, 184, 138, 0.05);
}
.demo-box > small {
  color: var(--sage);
}
.demo-box__logins {
  display: grid;
  gap: 8px;
}
.demo-box__logins .btn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 11px 14px;
  white-space: normal;
  text-align: left;
}
.demo-box__logins small {
  color: var(--mute);
  font-size: 12px;
  font-weight: 400;
}
.demo-flag {
  display: inline-block;
  align-self: flex-start;
  margin: -6px 0 10px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px dashed rgba(205, 184, 138, 0.45);
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.mobile-top .demo-flag {
  margin: 0 0 0 8px;
}

/* Genau vier Kennzahlen nebeneinander, am Handy zwei */
.kpis--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .kpis--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.person-link {
  color: inherit;
  text-decoration: none;
}
.person-link:hover b {
  color: var(--gold);
  text-decoration: underline;
}

/* Auswahlfeld außerhalb von .field (z. B. Textwahl): gleicher Pfeil wie in Formularen */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d9b45a' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Überschriften in Kästen sind Serif - Knöpfe und Schilder darin bleiben in der normalen Schrift */
.panel h2 .btn,
.panel h2 button,
.panel h2 .tag {
  font-family: var(--sans);
}

/* Tabellen breiter als ihr Kasten: am Rand ausblenden, solange es dort weitergeht (data-more setzt ui.js) */
.table-wrap[data-more='right'],
.cl-area[data-more='right'],
.mc-sub[data-more='right'] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}
.table-wrap[data-more='left'],
.cl-area[data-more='left'],
.mc-sub[data-more='left'] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent);
}
.table-wrap[data-more='left right'],
.cl-area[data-more='left right'],
.mc-sub[data-more='left right'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

/* ------------------------------------------------ Suche über alles (⌘K) */
.searchbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--mute);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.searchbtn:hover,
.searchbtn:focus-visible {
  border-color: var(--line-strong);
  background-color: rgba(255, 255, 255, 0.045);
  color: var(--paper);
  outline: none;
}
.searchbtn > .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--gold);
}
.searchbtn > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.searchbtn kbd,
.palette kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--mute);
  font: 500 11px/1 var(--sans);
}
/* Am Handy: nur die Lupe oben in der Leiste */
.searchbtn--icon {
  width: 38px;
  min-height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
}
.searchbtn--icon > span,
.searchbtn--icon kbd {
  display: none;
}
dialog.palette {
  width: min(660px, calc(100vw - 24px));
  max-height: min(640px, calc(100dvh - 80px));
  margin: max(8vh, 40px) auto auto;
  overflow: hidden;
}
dialog.palette[open] {
  animation-duration: 0.28s;
}
dialog.palette.closing {
  animation-duration: 0.17s;
}
.palette__box {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(640px, calc(100dvh - 80px));
}
.palette__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.palette__field > .icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gold);
}
.palette__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  font-size: 17px;
  outline: none;
}
.palette__field input::-webkit-search-cancel-button {
  display: none;
}
.palette__field input::placeholder {
  color: var(--mute);
}
.palette__list {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 10px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(205, 184, 138, 0.25) transparent;
}
.palette__group {
  padding: 14px 10px 6px;
  color: var(--mute);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.palette__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--paper);
  text-decoration: none;
  scroll-margin: 8px;
}
.palette__item[aria-selected='true'] {
  background: rgba(205, 184, 138, 0.1);
  box-shadow: inset 0 0 0 1px rgba(205, 184, 138, 0.22);
}
.palette__ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--gold);
}
.palette__ic .icon {
  width: 17px;
  height: 17px;
}
.palette__text {
  display: grid;
  min-width: 0;
}
.palette__text b,
.palette__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette__text b {
  font-size: 14.5px;
  font-weight: 500;
}
.palette__text small {
  color: var(--mute);
  font-size: 12.5px;
}
.palette mark {
  background: none;
  color: var(--gold);
}
.palette__item em {
  color: var(--mute);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}
.palette__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 34px 16px;
  color: var(--mute);
}
.palette__foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 12px;
}
.palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  dialog.palette {
    margin-top: calc(10px + env(safe-area-inset-top));
    max-height: calc(100dvh - 20px - env(safe-area-inset-top));
  }
  .palette__box {
    max-height: calc(100dvh - 20px - env(safe-area-inset-top));
  }
  .palette__foot,
  .palette .palette__esc {
    display: none;
  }
  .palette__field input {
    font-size: 16px;
  }
}

/* Handy oben: Name links, Knöpfe rechts zusammen (Sprache, Suche, Anpassen, Abmelden) */
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .mobile-top {
    gap: 8px;
    justify-content: flex-start;
  }
  .mobile-top > :first-child {
    margin-right: auto;
  }
}

/* Seitenleiste etwas dichter: mehr Menüpunkte ohne Scrollen (das Handy-Menü „Mehr“ bleibt großzügig) */
.side .nav a {
  padding-top: 7px;
  padding-bottom: 7px;
}
.side .nav__group {
  margin: 10px 10px 4px;
}

/* Anmelden mit Face ID / Touch ID unter dem Passwort-Formular */
.gate__alt {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.gate__or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mute);
  font-size: 12.5px;
}
.gate__or::before,
.gate__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.gate__passkey {
  justify-content: center;
  min-height: 48px;
}
.gate__alt .form-error:empty {
  display: none;
}

/* Sicherheit: Face ID und Mitteilungen */
.sec-topics {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.sec-h3 {
  margin: 20px 0 6px;
  color: var(--sage);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sec-passkeys > .btn,
.sec-push .setting .row {
  margin-top: 10px;
}
.sec-push .setting .row {
  gap: 6px;
}

/* Nach unten ziehen = neu laden (Handy, ui.js pullToRefresh) */
.ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) - 44px);
  left: 50%;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--vault-3);
  color: var(--sage);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
.ptr .icon {
  width: 18px;
  height: 18px;
}
.ptr.is-pulling,
.ptr.is-busy {
  opacity: 1;
}
.ptr.is-ready,
.ptr.is-busy {
  border-color: var(--gold);
  color: var(--gold-hi);
}
.ptr.is-busy {
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.ptr.is-busy .icon {
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------ iPad, Querformat, App vom Home-Bildschirm */

/* In der App vom Home-Bildschirm liegen Uhrzeit und Akku über der Seite (black-translucent). Mit Seitenleiste
   (iPad, Querformat) braucht es oben Abstand und einen ruhigen Streifen hinter der Statusleiste. Links und rechts
   Platz für Kamera und Dynamic Island, wenn ein iPhone quer liegt. Im Browser ist das alles 0. */
.app {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (min-width: 821px) {
  .side {
    padding-top: calc(28px + env(safe-area-inset-top));
    padding-bottom: max(28px, calc(12px + env(safe-area-inset-bottom)));
  }
  .main {
    padding-top: calc(28px + env(safe-area-inset-top));
  }
  .app::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: env(safe-area-inset-top);
    background: rgba(12, 13, 15, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
  }
}
@media (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .tabbar {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
}
/* iPad hochkant (Handy-Ansicht mit Leiste unten): die Leiste nicht über die ganze Breite ziehen */
@media (min-width: 600px) and (max-width: 820px), (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .tabbar {
    padding-left: max(6px, calc(50% - 300px));
    padding-right: max(6px, calc(50% - 300px));
  }
}

/* iOS zoomt beim Antippen eines Felds mit Schrift unter 16 px die ganze Seite heran (und bleibt so). Auf Touch-Geräten
   haben Felder deshalb mindestens 16 px; größere wie das Code-Feld bei der Anmeldung bleiben, wie sie sind. */
@media (pointer: coarse) {
  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], .code input),
  select,
  textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* Anmeldung und Einladung in der App vom Home-Bildschirm: Uhrzeit und Akku liegen über der Seite, unten der
   Home-Balken. Im Browser ist env(…) 0 und alles bleibt wie vorher. */
.gate {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.gate__art {
  padding-top: calc(40px + env(safe-area-inset-top));
}
.gate__panel {
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
}
@media (max-width: 860px) {
  .gate__art {
    padding-top: calc(24px + env(safe-area-inset-top));
  }
}

/* „Mehr“-Menü und Seitenfenster rechts: oben Platz für die Uhrzeit, unten für den Home-Balken (App vom Home-Bildschirm) */
.drawer {
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* iOS 26, App vom Home-Bildschirm: Die Seite endet so weit über dem Bildschirmrand, wie die Statusleiste hoch ist
   (gemessen am iPhone 17 Pro: 812 von 874 Punkten, 100lvh = 874). Feststehendes wird dort abgeschnitten, der
   Home-Balken liegt dann schon außerhalb. Unten angeheftete Leisten brauchen seinen Abstand dann nicht mehr; reicht
   die Seite bis unten (Unterschied 0: andere Geräte, falls Apple das ändert), bleibt der volle Abstand. */
@media (display-mode: standalone) {
  :root {
    --home-bar: max(0px, calc(env(safe-area-inset-bottom) - (100lvh - 100dvh)));
  }
}
@media (display-mode: standalone) and (max-width: 820px), (display-mode: standalone) and (max-height: 500px) and (pointer: coarse) and (orientation: landscape) {
  .tabbar {
    padding-bottom: calc(8px + var(--home-bar));
  }
  .toasts {
    bottom: calc(84px + var(--home-bar));
  }
}

/* Ohne Netz: ruhige Seite statt Fehlermeldung (ui.js offlineView) */
.empty.offline > .icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  color: var(--gold);
}