/* Ultima CRM: Marke, Ebenen und Grundbausteine.
 *
 * Farben aus Ultimas CI (Logo, Stempel, Visitenkarte, Website), freigegeben mit der
 * Designvorschau vom 09.10.2026. Grundton automatisch: folgt dem Gerät, jeder Benutzer
 * kann ihn fest wählen (data-ton am <html>). Scheibe 3 baut hierauf auf. */

@font-face {
  font-family: Inter;
  src: url("/schrift/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --u-blau: #004AAD; --u-akzent: #2E7BE0; --u-graphit: #4D4D4D;
  --u-anthrazit: #22252A; --u-salbei: #EEF1EA; --achtung: #F0A43A; --rot: #E5484D; --ok: #3FBF8A;
  --feder: cubic-bezier(.2, .9, .25, 1.15);
  --sanft: cubic-bezier(.22, .8, .3, 1);
  --r-m: 14px; --r-l: 22px;
  /* hell */
  --grund: #E9ECF1; --grund2: #F4F6F9;
  --ink: #16191E; --ink2: rgba(22,25,30,.66); --ink3: rgba(22,25,30,.42);
  --glas: rgba(255,255,255,.58); --glas2: rgba(255,255,255,.78); --glas-rand: rgba(255,255,255,.9);
  --glanz: rgba(255,255,255,.9); --schatten: 0 20px 50px -24px rgba(20,40,80,.35);
  --raster: rgba(0,74,173,.06); --fleck: .22;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ton="hell"]) {
    --grund: #15171B; --grund2: #1B1E24;
    --ink: #F3F5F8; --ink2: rgba(243,245,248,.68); --ink3: rgba(243,245,248,.42);
    --glas: rgba(255,255,255,.055); --glas2: rgba(255,255,255,.09); --glas-rand: rgba(255,255,255,.11);
    --glanz: rgba(255,255,255,.16); --schatten: 0 20px 50px -20px rgba(0,0,0,.65);
    --raster: rgba(46,123,224,.07); --fleck: .55;
    color-scheme: dark;
  }
}
:root[data-ton="dunkel"] {
  --grund: #15171B; --grund2: #1B1E24;
  --ink: #F3F5F8; --ink2: rgba(243,245,248,.68); --ink3: rgba(243,245,248,.42);
  --glas: rgba(255,255,255,.055); --glas2: rgba(255,255,255,.09); --glas-rand: rgba(255,255,255,.11);
  --glanz: rgba(255,255,255,.16); --schatten: 0 20px 50px -20px rgba(0,0,0,.65);
  --raster: rgba(46,123,224,.07); --fleck: .55;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--ink); background: var(--grund); -webkit-font-smoothing: antialiased;
}

/* Ebene 0: Bauplan-Raster mit Lichtflecken in Ultima-Blau */
.grund { position: relative; isolation: isolate; }
.grund::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 78%);
}
.grund::after {
  content: ""; position: fixed; inset: -20%; z-index: -3; pointer-events: none; opacity: var(--fleck);
  background: radial-gradient(40% 40% at 15% 10%, var(--u-blau), transparent 70%),
              radial-gradient(35% 35% at 90% 95%, #1C5FD0, transparent 70%);
  filter: blur(60px);
  animation: treiben 24s ease-in-out infinite alternate;
}
@keyframes treiben { to { transform: translate(4%, 3%) scale(1.08); } }

/* Ebene 1: Glas */
.glas {
  position: relative; background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--r-l);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glanz), var(--schatten);
}
@supports not (backdrop-filter: blur(1px)) {
  .glas { background: var(--grund2); }
}

/* Marke */
.marke-kopf { display: flex; align-items: center; gap: 12px; }
.wortmarke { line-height: .9; }
.wortmarke .u { font-weight: 900; font-style: italic; font-size: 26px; letter-spacing: -.03em; }
.wortmarke .c { display: block; text-align: right; font-weight: 800; font-style: italic; font-size: 14px; color: var(--u-akzent); }
.marke-kopf.klein .wortmarke .u { font-size: 18px; }
.marke-kopf.klein .wortmarke .c { font-size: 10px; }

/* Text */
h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 18px; font-weight: 750; margin-bottom: 6px; }
h3 { font-size: 14px; font-weight: 700; margin: 20px 0 8px; color: var(--ink2); }
.leise { color: var(--ink2); font-size: 14px; }
.vor { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--u-akzent); }
code { font-family: ui-monospace, monospace; font-size: 13px; }

/* Bedienelemente */
.knopf {
  border: 0; cursor: pointer; font: 650 14px Inter, system-ui, sans-serif; border-radius: 12px;
  padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .3s var(--feder), box-shadow .3s var(--sanft), opacity .2s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: translateY(0) scale(.98); }
.knopf:disabled { opacity: .55; cursor: default; transform: none; }
.knopf.blau { color: #fff; background: linear-gradient(135deg, var(--u-akzent), var(--u-blau));
  box-shadow: 0 10px 24px -10px rgba(61,139,255,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.knopf.glasig { color: var(--ink); background: var(--glas2); border: 1px solid var(--glas-rand); }
.knopf.breit { width: 100%; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.feld > span { font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.feld input, .feld select, .reihe input {
  font: 500 15px Inter, system-ui, sans-serif; color: var(--ink); padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--glas-rand); background: var(--glas2); outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.feld input:focus, .feld select:focus { border-color: var(--u-akzent); box-shadow: 0 0 0 3px rgba(46,123,224,.25); }
.feld input[readonly] { opacity: .75; }
.meldung { min-height: 20px; font-size: 13.5px; color: var(--rot); margin: 4px 0 10px; }
.meldung.ok { color: var(--ok); }
.reihe { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.reihe .feld { flex: 1 1 180px; margin-bottom: 0; }
a { color: var(--u-akzent); font-weight: 600; text-decoration: none; }

/* Anmelden */
.anmelde-buehne { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.anmelde-karte { width: 100%; max-width: 400px; padding: 30px 28px; animation: auf .6s var(--sanft); }
.anmelde-karte .marke-kopf { margin-bottom: 26px; }
.anmelde-karte h1 { font-size: 24px; margin-bottom: 4px; }
.anmelde-karte .leise { margin-bottom: 20px; }
.fuss { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13.5px; }
@keyframes auf { from { opacity: 0; transform: translateY(16px) scale(.985); } }

/* Startseite */
.kopfleiste { position: sticky; top: 12px; z-index: 5; margin: 12px auto 0; max-width: 960px; width: calc(100% - 24px);
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; }
.kopfleiste .wer { margin-left: auto; min-width: 0; text-align: right; line-height: 1.2; }
.kopfleiste .wer span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopfleiste .knopf { flex: none; padding: 10px 14px; }
@media (max-width: 480px) {
  .kopfleiste .wortmarke { display: none; }
  .kopfleiste { gap: 10px; }
}
.inhalt { max-width: 960px; margin: 0 auto; padding: 28px 16px 80px; display: flex; flex-direction: column; gap: 18px; }
.held { padding: 18px 4px 6px; animation: auf .6s var(--sanft); }
.held h1 { font-size: clamp(30px, 5vw, 44px); font-style: italic; font-weight: 900; letter-spacing: -.03em; margin: 8px 0; }
.karte { padding: 22px; animation: auf .6s var(--sanft) both; }
.liste { list-style: none; display: flex; flex-direction: column; }
.liste li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--glas-rand); font-size: 14px; flex-wrap: wrap; }
.liste li:first-child { border-top: 0; }
.liste li .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.chip { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; background: var(--glas2); border: 1px solid var(--glas-rand); color: var(--ink2); }
.chip.ok { color: var(--ok); }
.qr { width: 200px; max-width: 70vw; margin: 14px 0; border-radius: 14px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: auto; }
.link-box { margin-top: 14px; }
.link-box input { font-size: 13px; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}