:root {
  /* Arc-Raiders-Palette, pastellig & warm */
  --sand:      #EDE4D0;
  --sand-dark: #E2D5BA;
  --ink:       #2B2420;
  --mustard:   #F0BE5A;
  --mustard-h: #E8AE3E;
  --yellow:    #F6EC9A;
  --coral:     #EE9A80;
  --mint:      #A9E4E2;
  --lime:      #BEE39A;
  --rust:      #C88576;
  --orange:    #DDA176;
  --olive:     #AEB57E;
  --tan:       #D2B492;
  --slate:     #5E6B68;
  --sky:       #C3D3DC;
}

html, body {
  background: var(--sand);
  color: var(--ink);
  min-height: 100%;
}

.stripe {
  display: flex;
  height: 8px;
}
.stripe span { flex: 1; }

.hero-title {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
}

.box {
  background: #F6F0E2;
  border: 2px solid var(--sand-dark);
  box-shadow: 0 10px 30px rgba(120, 90, 60, .12);
  border-radius: 1.5rem;
}

.input.is-rounded {
  background: #FFFDF7;
  border: 2px solid var(--tan);
  color: var(--ink);
  box-shadow: none;
}
.input.is-rounded::placeholder { color: #A99A86; }
.input.is-rounded:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 .2em rgba(221, 161, 118, .3);
}

.button.is-rounded {
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
}
.button.btn-primary {
  background: var(--mustard);
  color: var(--ink);
  border: 2px solid var(--mustard);
}
.button.btn-primary:hover { background: var(--mustard-h); border-color: var(--mustard-h); }
.button.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--slate);
}
.button.btn-ghost:hover { background: var(--sky); }

.label { color: var(--slate); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.muted { color: var(--slate); }

/* Kopfzeile */
.topbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.5rem;
  flex-wrap: wrap;
}
.topbar form { display: contents; }
.topbar-spacer { flex: 1; }
.brand {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.topbar-user { color: var(--slate); font-size: .9rem; margin-right: .25rem; }

/* Kennzeichnung für local/dev, damit man sie nicht mit prod verwechselt */
.env-pill {
  padding: .1rem .7rem;
  border-radius: 999px;
  background: var(--coral);
  color: var(--ink);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.notice {
  background: #F8DCD2;
  color: #7A3A2A;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .9rem;
}