/*
 * WAYAND Intern – zentraler Markenlayer
 * Wird nach app.css geladen. Markenfarben und Logo-Akzente werden hier gemeinsam gepflegt.
 */
:root {
  color-scheme: light;
  --ink: #252522;
  --muted: #696963;
  --line: rgba(37, 37, 34, .14);
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --navy: #252522;
  --navy-2: #41413d;
  --teal: #ff8400;
  --teal-pale: rgba(255, 132, 0, .085);
}

/* Interne App: klares Weiß, Orange nur als präziser Akzent. */
html,
body {
  background: #ffffff !important;
  color: var(--ink);
}

.topbar,
.footer {
  background: #ffffff;
  border-color: rgba(37, 37, 34, .11);
}

.topbar { box-shadow: 0 2px 12px rgba(37, 37, 34, .035); }

.brand-mark.wayand-logo-mark,
.card-symbol.wayand-logo-mark {
  display: block;
  object-fit: contain;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
}

.module-icon {
  border-color: rgba(255, 132, 0, .20);
  background: linear-gradient(145deg, #ffffff, #fff9f2);
  color: #e87800;
}

.trust-icon,
.user-initial {
  color: #b85c00;
  background: rgba(255, 132, 0, .085);
}

.form-stack input:focus {
  border-color: #ff8400;
  box-shadow: 0 0 0 3px rgba(255, 132, 0, .13);
}

.button-primary { color: #ffffff; background: #252522; }
.button-primary:hover { background: #41413d; }
.button-secondary:hover { border-color: rgba(255, 132, 0, .36); background: #fff9f2; }
.module-card:hover { border-color: rgba(255, 132, 0, .36); }
a:focus-visible, button:focus-visible { outline-color: #ff8400; }

/* Zentrale WAYAND-Wortmarke: Das W sitzt im Logo, daneben schließt AYAND direkt an. */
.brand {
  gap: 0px;
}

.brand > span {
  min-width: 0;
  transform: translateY(9px);
}

.brand-mark.wayand-logo-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

.brand strong {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
  color: #252522;
}

.brand small {
  margin-top: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .025em;
  line-height: 1.2;
}

@media (max-width: 560px) { .brand > span {
  transform: translateY(7px);
}
  .brand {
    gap: 0px;
  }
  .brand-mark.wayand-logo-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  .brand strong {
    font-size: 24px;
    letter-spacing: .035em;
  }
  .brand small {
    margin-top: 2px;
    font-size: 10px;
  }
}