* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

   /* outline:1px solid red;  */

}

html {
  scroll-behavior: smooth;
}

a {
  color: #cfefff;
  text-decoration: none;
}

a:hover {
  color: #ffd75e;
}


body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  background-image: url('../images/headerBackground.jpg');
  background-size: 20%;
  color: #cfefff;
}


:root {
  --hud-accent: #1aa4c8;
  --hud-text: #cfefff;
  --hud-gold: #ffd75e;
  --hud-bg1: #0e3b52;
  --hud-bg2: #082533;
  --hud-gap: 12px;
  --radius: 8px;
}

.ui-window {
  max-width: 1400px;
  margin: 40px auto;
  padding: 12px;
  min-height: 80vh;

  background: linear-gradient(var(--hud-bg1), var(--hud-bg2));
  border: 2px solid var(--hud-accent);
  border-radius: var(--radius);
  box-shadow: 0 0 20px rgba(26, 164, 200, .35), inset 0 0 25px rgba(0, 0, 0, .8);
}

.ui-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--hud-gap);
  align-items: start;
}

.ui-panel {
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(26, 164, 200, .55);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, .8);
  color: var(--hud-text);
  position: relative;
}

.ui-panel::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -2px;
  height: 2px;
  background: rgba(26, 164, 200, .85);
  filter: drop-shadow(0 0 6px rgba(26, 164, 200, .6));
}


#main-header {

  font-size: xx-large;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFE81F;
  border-bottom: black 5px solid;

}
/* Profilbild */
/* Profil Header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 25px;
}

/* Profilbild */
.profile-pic {
  width: 45%;
  height: 30%;
  object-fit: contain;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);

  background: #000;

}
.pod-race-pic{
  width: 25%;
  height: 15%;
  object-fit: cover;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);

  background: #000;
}

.padawan-pic{
  width: 25%;
  height: 15%;
  object-fit: cover;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);

  background: #000;
}

.ritter-pic{
  width: 25%;
  height: 15%;
  object-fit: cover;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);

  background: #000;
}
.mentor{

  width: 25%;
  height: 15%;
  object-fit: cover;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);

  background: #000;
}

.sith-pic{
  width: 25%;
  height: 15%;
  object-fit: cover;
  border-radius: 6px;

  border: 2px solid var(--hud-accent);
  box-shadow:
    0 0 12px rgba(26, 164, 200, .45),
    inset 0 0 8px rgba(0, 0, 0, .6);
  
  background: #000;
  
}


/* Name + Titel */

.profile-title {
  margin-top: 4px;
  color: #9fdcff;
  font-weight: normal;
}


/*screens*/
.screen {
  display: none;
  opacity: 0;
  transform: translateY(6px);
}

.screen.is-active{
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}


/* Werdegang Nav Bereich */
.ui-nav h2 {
  color: var(--hud-gold);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.ui-nav .container {
  padding: 0;
}

/* optional: verhindert doppelte Innenabstände */
.ui-nav ul {
  list-style: none;
  display: grid;
  gap: 8px;
}

.ui-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(26, 164, 200, .25);
  background: rgba(0, 0, 0, .25);
}

.ui-nav a:hover {
  border-color: rgba(26, 164, 200, .85);
  box-shadow: 0 0 12px rgba(26, 164, 200, .25);
}

.ui-nav a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.ui-nav a::before {
  content: "▶";
  position: absolute;
  left: 10px;
  opacity: 0;
  color: var(--hud-gold);
  transform: translateX(-6px);
  transition: .15s;
}

/* ----------------------------------------------------------------------------------------------------------------- */

/*Main Berreich*/
#main .container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--hud-gap);
  align-items: start;
  
}


/*Text-Inhalte*/
#main h3 {
  color: var(--hud-gold);
  margin-top: 18px;
}

#main h4 {
  color: #9fdcff;
  margin: 6px 0;
}

#main h5 {
  color: #7bd4ff;
  margin-top: 10px;
}

#main ul {
  margin-left: 18px;
  margin-bottom: 10px;
}

#sidebar h2 {
  color: var(--hud-gold);
  text-align: center;
  margin-bottom: 10px;
}

#sidebar h3 {
  color: #7bd4ff;
  margin-top: 14px;
}

main li,
aside li {
  margin-left: 30px;
}


/*Sidebar "Anakin Skywalker"*/
#sidebar {
  padding: 20px;
  border-color: rgba(26, 164, 200, .85);

}


/*Maximale Bildschirmgrösse*/
@media (max-width: 900px) {
  .ui-body {
    grid-template-columns: 1fr;
  }

  #main .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ui-body {
    font-size: 50%;
  }
}

/* Sidebar auf Home-Seite ausblenden */
.ui-body.is-home .ui-profile {
  display: none;
}

.ui-body{
  display: grid;
  grid-template-columns: 260px 1fr 320px; 
  gap: var(--hud-gap);
  align-items: start;
}

 /* .ui-body {
  outline: 2px solid red;
}
.ui-nav {
  outline: 2px solid lime;
}
.ui-content {
  outline: 2px solid orange;
}  */