:root {
  --portal-bg: #13151b;
  --portal-main: #ffd700;
  --portal-accent: #0ed1f7;
  --portal-card: #222534;
  --portal-border: #ffd700;
  --portal-gray: #bcbecd;
  --portal-hover: #232b3e;
  --portal-error: #ff5656;
  --portal-success: #3ce286;
  --portal-focus: #0ed1f7;
  --portal-font: 'Segoe UI', Arial, Helvetica, Verdana, sans-serif;
  --focus-outline: 4px solid var(--portal-focus);
}

html, body {
  background: var(--portal-bg);
  color: #fcfcfc;
  font-family: var(--portal-font);
  margin: 0; padding: 0;
  min-height: 100vh;
  font-size: 17px;
  letter-spacing: .01em;
}

h1, h2, h3 {
  color: var(--portal-main);
  margin-bottom: .4em;
  font-weight: 800;
  font-size: 2em;
}

a {
  color: var(--portal-accent);
  text-decoration: underline;
  font-weight: bold;
  border-radius: 5px;
  transition: color .13s, background .13s;
  outline: none;
}

a:focus, a:hover {
  color: var(--portal-main);
  background: #212336;
  outline: var(--focus-outline);
}

.card, .ticketbox, .faq-box, .login-container {
  background: var(--portal-card);
  border-radius: 20px;
  box-shadow: 0 5px 28px #0ed1f766;
  padding: 2em 1.2em 2em 1.2em;
  max-width: 700px;
  margin: 2em auto;
}

input, textarea, select, button {
  font-size: 1.07em;
  border-radius: 12px;
  border: 2px solid var(--portal-border);
  padding: 1em 1em;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1.15em;
  background: #292d42;
  color: #fcfcfc;
  font-family: var(--portal-font);
  outline: none;
  transition: border-color .21s, box-shadow .18s, background .16s;
}

input:focus, textarea:focus, select:focus, button:focus {
  border-color: var(--portal-focus);
  background: #232b3d;
  box-shadow: 0 0 0 4px #ffd70050;
  outline: var(--focus-outline);
}

button {
  background: linear-gradient(90deg,var(--portal-main) 65%, var(--portal-accent) 100%);
  color: #232b3d;
  font-weight: bold;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 16px #ffd70044;
  margin-bottom: .8em;
  font-size: 1.12em;
  padding: 1em 2.2em;
  letter-spacing: .04em;
  border-radius: 12px;
  transition: background .21s, color .15s, box-shadow .18s;
}

button:active, button:focus, button:hover {
  background: linear-gradient(90deg,var(--portal-accent) 65%, var(--portal-main) 100%);
  color: #13151b;
  box-shadow: 0 5px 36px #ffd70088;
  outline: var(--focus-outline);
}

input[type="file"] {
  background: transparent;
  padding: .6em 0;
  color: #fcfcfc;
  font-size: 1em;
}

ul, ol {
  padding-left: 1.4em;
  margin-bottom: 1em;
}

li {
  margin-bottom: .45em;
  font-size: 1.09em;
  line-height: 1.75;
  color: #ffd700;
  background: #171b28;
  padding: .22em .7em;
  border-radius: 4px;
}

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1em;
  margin-bottom: 1.2em;
  background: #1a2032;
  border-radius: 11px;
  overflow: hidden;
}

th, td {
  border-bottom: 1.5px solid #212336;
  padding: .95em .9em;
  text-align: left;
  vertical-align: top;
  font-size: 1.01em;
}

tr:nth-child(even) { background: #222534; }
tr:nth-child(odd)  { background: #171b28; }

th {
  color: var(--portal-accent);
  font-weight: bold;
  background: #161926;
  letter-spacing: .04em;
  font-size: 1.16em;
}

.success-message {
  color: var(--portal-success);
  background: #152519;
  border: 2px solid var(--portal-success);
  border-radius: 12px;
  padding: 1em;
  margin-bottom: 1em;
  font-weight: bold;
}

.error-message {
  color: var(--portal-error);
  background: #311a21;
  border: 2px solid var(--portal-error);
  border-radius: 12px;
  padding: 1em;
  margin-bottom: 1em;
  font-weight: bold;
}

.msg {
  color: var(--portal-main);
  font-weight: bold;
  background: #191f2b;
  border-radius: 10px;
  padding: 1em 1em;
  margin-bottom: 1em;
}

pre {
  background: #22293a;
  border-radius: 11px;
  padding: 1.1em;
  margin-bottom: 1.05em;
  font-size: 1em;
  color: #0ed1f7;
  overflow-x: auto;
  font-family: 'Consolas', 'Fira Mono', 'Menlo', monospace;
  outline: none;
}

label {
  display: block;
  margin: 1em 0 0.8em 0;
  color: var(--portal-main);
  font-weight: 600;
  letter-spacing: .09em;
  font-size: 1.09em;
}

.small, .faq-answer {
  color: var(--portal-gray);
  font-size: 1em;
}

.faq-answer {
  background: #212a26;
  border-radius: 9px;
  padding: .85em 1.18em;
  margin-top: .65em;
}

.closed { color: var(--portal-success)!important; font-weight:bold;}
.open { color: var(--portal-error)!important; font-weight:bold;}

hr {
  border: none;
  border-top: 2px solid #212336;
  margin: 2em 0;
}

nav.navbar {
  background: #151826;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15em 2em;
  box-shadow: 0 5px 24px #232b3d24;
  position: relative;
  z-index: 2;
  border-bottom: 3px solid var(--portal-main);
}

.navbar .brand {
  font-size: 1.45em;
  color: var(--portal-main);
  font-weight: bold;
  letter-spacing: 0.06em;
}

.navbar ul {
  display: flex;
  gap: 2em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  margin: 0;
}

.navbar ul li a {
  color: #fcfcfc;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s, color 0.18s;
  padding: 0.75em 1.3em;
  border-radius: 12px;
  outline: none;
  font-size: 1.04em;
  cursor: pointer;
  background: none;
  border: none;
  display: inline-block;
}

.navbar ul li a:focus,
.navbar ul li a.active,
.navbar ul li a:hover {
  background: var(--portal-main);
  color: #13151b !important;
  outline: var(--focus-outline);
  box-shadow: 0 2px 11px #ffd70077;
  text-decoration: underline;
}

.navbar .profile {
  margin-left: 2em;
  color: var(--portal-accent);
  font-size: 1.15em;
}

nav.navbar { outline: none; }

@media (max-width: 900px) {
  .card, .ticketbox, .faq-box, .login-container {
    max-width: 99vw;
    padding: 1.7em 0.4em 1.3em 0.4em;
  }
  table, th, td { font-size: .97em; }
  h1, h2, h3 { font-size: 1.11em; }
  nav.navbar {
    flex-direction: column;
    align-items: stretch;
    padding: 1em 0.5em;
  }
  .navbar ul {
    flex-direction: column;
    gap: 0.7em;
    width: 100%;
    margin-top: .8em;
    margin-bottom: .8em;
  }
  .navbar .profile {
    margin: 1em 0 0 0;
  }
}

/* particles.js Fix (wenn im Einsatz) */
#particles-js {
  position: fixed;
  top:0; left:0;
  width: 100vw; height: 100vh;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }