:root {
  --page-bg:      #cccccc;
  --card-bg:      #ffffff;
  --text:         #333333;
  --muted:        #666666;
  --accent:       #88ac0b;
  --accent-dark:  #6f900a;
  --link:         #4f82cb;
  --link-hover:   #4ebf37;
  --rule:         #eff0f1;
  --box-bg:       #fafafa;
  --box-border:   #f2f2f2;
  --header-1:     #5a86c4;
  --header-2:     #2f5b9a;
  --header-text:  #ffffff;
  --footer-bg:    #d0d0d0;
  --radius:       8px;
  --content-max:  860px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg:    #1a1a1c;
    --card-bg:    #1f1f23;
    --text:       #e6e6e1;
    --muted:      #a0a098;
    --rule:       #2d2d31;
    --box-bg:     #25252a;
    --box-border: #2d2d31;
    --footer-bg:  #161618;
    --link:       #6ea3e8;
  }
}

* { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--page-bg);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 14px/1.55 Verdana, Tahoma, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none }
a:hover { color: var(--link-hover) }

p { margin: 0 0 1em }

/* ----- card wrapper ------------------------------------------- */

.wrap {
  max-width: var(--content-max);
  margin: 1.5rem auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* ----- header ------------------------------------------------- */

.site-header {
  position: relative;
  padding: 1.6rem 2rem 1.2rem;
  color: var(--header-text);
  background:
    linear-gradient(180deg, var(--header-1) 0%, var(--header-2) 100%);
  border-bottom: 3px solid var(--accent);
}

.site-header h1 {
  margin: 0;
  font: bolder 2.6rem/1 "Trebuchet MS", Tahoma, Verdana, sans-serif;
  letter-spacing: -1.5px;
  color: var(--header-text);
}

.site-header h1 a { color: inherit }
.site-header h1 .alt { opacity: 0.55; font-weight: 500 }

.site-header .slogan {
  margin: 0.3rem 0 0;
  font: normal 0.85rem/1.4 "Trebuchet MS", Tahoma, Verdana, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

/* ----- top navigation ----------------------------------------- */

.nav {
  background:
    linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 1rem;
  list-style: none;
}

.nav a {
  display: block;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  color: #fff;
  font: bold 12px/1 Verdana, Arial, Tahoma, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease,
              box-shadow 0.15s ease, transform 0.05s ease;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.nav a:active { transform: translateY(1px) }

.nav li.current a {
  background: var(--card-bg);
  color: var(--accent-dark);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.18);
}

.nav li.current a:hover {
  background: var(--card-bg);
  color: var(--accent-dark);
}

/* ----- body two-column layout --------------------------------- */

.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 720px) {
  .body { grid-template-columns: 1fr; gap: 1rem }
  .sidebar { order: 2 }
  .main { order: 1 }
}

/* ----- main column -------------------------------------------- */

.main { min-width: 0 }

.main h1 {
  margin: 0.25rem 0 0.75rem;
  padding: 0.35rem 0 0.35rem 1.4rem;
  position: relative;
  font: bold 1.35rem/1.3 Verdana, "Trebuchet MS", sans-serif;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
}

.main h1::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  background: var(--accent);
  border: 1px solid var(--accent-dark);
}

.main h2 {
  margin: 1.5rem 0 0.5rem;
  font: bold 1rem/1.3 Tahoma, Verdana, sans-serif;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.main h3 {
  margin: 1.1rem 0 0.4rem;
  font: bold 1rem/1.3 Tahoma, Verdana, sans-serif;
  color: var(--muted);
}

.main p { margin: 0 0 0.9em }

.main ul, .main ol {
  margin: 0.4rem 0 1rem 1.2rem;
  padding: 0;
  color: var(--accent);
}

.main ul span, .main ol span, .main li > * { color: var(--text) }

.main figure {
  margin: 1rem 0;
  padding: 0;
}

.main figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--box-border);
  border-radius: 4px;
  background: var(--box-bg);
}

.main figure figcaption {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* ----- sidebar ------------------------------------------------ */

.sidebar { min-width: 0 }

.box {
  border: 1px solid var(--box-border);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  background: var(--box-bg);
  overflow: hidden;
}

.box h2 {
  margin: 0;
  padding: 0.45rem 0.75rem;
  font: bold 0.9rem/1.2 Verdana, "Trebuchet MS", sans-serif;
  color: #555;
  background: linear-gradient(180deg, #f6f7f8 0%, #e7eaec 100%);
  border-bottom: 1px solid var(--rule);
}

.box ul {
  margin: 0;
  padding: 0.35rem 0 0.45rem;
  list-style: none;
}

.box li {
  position: relative;
  padding: 0.2rem 0.6rem 0.2rem 1.55rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.box li:last-child { border-bottom: none }

.box li::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.55rem;
  width: 0;
  height: 0;
  border-left: 6px solid var(--accent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.box a { font-weight: bold }

.box.sponsors li { font-weight: normal }
.box.sponsors li a { font-weight: bold }
.box.sponsors li small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: normal;
  margin-top: 0.05rem;
}

/* ----- footer ------------------------------------------------- */

.site-footer {
  padding: 0.9rem 1.5rem 1rem;
  background: var(--footer-bg);
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  border-top: 1px solid var(--rule);
}

.site-footer a { color: var(--muted); text-decoration: underline }
.site-footer .sep { margin: 0 0.6em; color: #aaa }

/* ----- imprint specific --------------------------------------- */

.imprint table {
  border-collapse: collapse;
  margin: 0.4rem 0 1rem;
  font-size: 0.85rem;
}

.imprint td {
  padding: 0.15rem 1rem 0.15rem 0;
  vertical-align: top;
}

.imprint td:first-child { color: var(--muted); white-space: nowrap }