@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/montserrat.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(/fonts/montserrat-italic.woff2) format("woff2"); }
@font-face { font-family: "Kaushan"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/kaushan.woff2) format("woff2"); }

:root {
  --bg: #0b120d;
  --bg2: #111b15;
  --card: rgba(255, 255, 255, .06);
  --card-solid: #16211a;
  --line: rgba(255, 255, 255, .12);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, .66);
  --faint: rgba(255, 255, 255, .4);
  --green: #7cda6c;
  --lime: #8cb544;
  --teal: #4fc3b4;
  --blue: #2aa8e8;
  --root: #c9a46b;
  --grad: linear-gradient(100deg, #8fd16a 0%, #4fc3b4 55%, #2aa8e8 100%);
  --btn: linear-gradient(90deg, #1fb5c8, #7cd13f);
  --shadow: 0 18px 40px rgba(0, 0, 0, .35);
  --r: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(124, 218, 108, .14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(42, 168, 232, .14), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
.script { font-family: "Kaushan", cursive; font-weight: 400; letter-spacing: .01em; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Marke: Logo auf weißem Pinselstreifen wie auf und-marburg.de */
.brand { display: inline-block; background: #fff; padding: 8px 22px 6px 18px; transform: rotate(-2deg);
  clip-path: polygon(2% 8%, 12% 0, 40% 6%, 70% 0, 98% 5%, 100% 45%, 97% 92%, 70% 100%, 38% 94%, 10% 100%, 0 85%, 1% 40%); }
.brand img { display: block; height: 46px; width: auto; }

.marquee { background: #161616; overflow: hidden; white-space: nowrap; padding: 8px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.marquee span { display: inline-block; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; animation: marq 28s linear infinite; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gradbar { height: 6px; background: var(--grad); }

.btn { appearance: none; border: 0; border-radius: 10px; padding: 15px 22px; font-weight: 700; font-size: 17px; cursor: pointer;
  background: var(--btn); color: #fff; box-shadow: 0 8px 22px rgba(31, 181, 200, .25); transition: transform .15s, opacity .15s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.ghost { background: rgba(255, 255, 255, .08); box-shadow: none; }
.btn.dark { background: #161616; box-shadow: none; }
.btn.block { width: 100%; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; font-size: 14px; }

.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; backdrop-filter: blur(8px); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1.5px solid var(--line); background: rgba(255, 255, 255, .04); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s; user-select: none; }
.chip.on { background: var(--grad); border-color: transparent; color: #0b120d; }
.chip.small { padding: 5px 11px; font-size: 13px; cursor: default; }
.chip.shared { border-color: var(--green); color: var(--green); }

/* Regler */
.slider { margin: 26px 0 8px; }
.slider .q { font-weight: 700; margin-bottom: 14px; }
.slider .ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; gap: 12px; }
.slider .ends span:last-child { text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: var(--grad); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .5); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 3px 12px rgba(0, 0, 0, .5); cursor: pointer; }

.field { width: 100%; background: rgba(255, 255, 255, .07); border: 1.5px solid var(--line); border-radius: 12px; padding: 15px 16px; font-size: 18px; outline: none; transition: border-color .15s; }
.field:focus { border-color: var(--teal); }
textarea.field { resize: none; min-height: 92px; font-size: 16px; }

/* Avatar */
.ava { border-radius: 50%; object-fit: cover; background: var(--card-solid); display: grid; place-items: center; font-weight: 800; color: #0b120d; flex: none; overflow: hidden; }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }