* { box-sizing: border-box; }
body {
  margin: 0; font: 16px/1.5 "Calibre Regular", system-ui, sans-serif; color: #222; background: #fff;
  overflow-anchor: none;  /* Scrollposition hält live.js selbst fest */
}
a { color: rgb(0,42,92); text-decoration: none; }
a:hover { color: #2362b7; text-decoration: underline; }

/* Kopfzeile wie beim Shell-Trainer */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em;
  box-shadow: rgba(26,34,42,0.16) 0px 6px 10px 1px;
  background-color: #f9f9f9;
  padding: .2em .5em;
}
header .logo { height: 2em; width: auto; display: block; }
.name-form { display: flex; gap: .3em; align-items: center; }
.name-form input[type=text] { width: 14em; max-width: 45vw; }
header nav { margin-left: auto; }
header nav a { padding: 0 1em; display: inline-block; }

main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; margin-top: 2rem; }
h3 { margin: 0 0 .5rem; }
h4 { margin: .8rem 0 .2rem; font-size: 1rem; }
.task { white-space: pre-wrap; background: #f9f9ff; border-left: 4px solid rgb(0,42,92); padding: .8rem 1rem; }
.hint { color: #666; }
.error { color: #b00020; font-weight: bold; }
.exercises { list-style: none; padding: 0; }
.exercises li {
  background: #f9f9ff; margin: .6rem 0; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  box-shadow: rgba(26,34,42,0.12) 0px 4px 8px 1px;
}
.badge { display: inline-block; font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; background: #e3e3e0; color: #444; }
.badge.done { background: #d5ecd8; color: #1d5a26; }
.badge.closed { background: #f3e2c4; color: #6b4a10; }
.upload form { display: flex; flex-direction: column; gap: .8rem; background: #f9f9ff; padding: 1rem; }
.pick { display: flex; gap: .5rem; flex-wrap: wrap; }
button, .button { display: inline-block; padding: .6rem 1rem; font-size: 1rem; border: 0; border-radius: .3rem; background: rgb(0,42,92); color: #fff; cursor: pointer; }
button:disabled { background: #999; cursor: default; }
button.danger { background: #b00020; }
.admin-actions { margin-top: 1rem; }
#preview { max-width: 100%; max-height: 20rem; object-fit: contain; align-self: flex-start; }
.person, #eigene .attempt {
  background: #f9f9ff; padding: 1rem; margin: 1rem 0;
  box-shadow: rgba(26,34,42,0.12) 0px 4px 8px 1px;
}
.attempt { margin: .8rem 0; border-radius: .3rem; }
.attempt img { max-width: 100%; height: auto; max-height: 30rem; object-fit: contain; object-position: left top; display: block; }
.meta { color: #666; font-size: .9rem; display: flex; gap: .5rem; align-items: center; margin-bottom: .3rem; }
.meta button { padding: .2rem .6rem; font-size: .85rem; }
.verdict { font-weight: bold; }
img.solution { max-width: 100%; height: auto; display: block; background: #fff; }
.points { margin-top: -.5rem; }
.rating ul { margin: 0; padding-left: 1.3rem; }
details summary { cursor: pointer; color: rgb(0,42,92); margin-top: .5rem; }
table.admin { border-collapse: collapse; width: 100%; }
table.admin th, table.admin td { text-align: left; padding: .5rem; border-bottom: 1px solid #ddd; }
table.admin th.category { padding-top: 1.5rem; font-size: 1.1rem; }
form { margin: 0; }

/* Hervorhebung von Neuem beim automatischen Aktualisieren */
.fresh { animation: fresh 4s ease-out; }
@keyframes fresh {
  0%, 25% { background-color: #fff3c4; box-shadow: 0 0 0 4px #f5c518; }
  100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}