:root {
  --main-color: #003366;
  --accent-color: #22bb88; 
  --background-light: #fcfcfc;       /* light neutral */
  --background-research: #f2fcf2;    /* slightly tinted light */
  --background-teaching: #f2f2fc;    /* light cool */
  --border-color: #ccc;
  --text-color: #222;
  --shadow-color: rgba(0, 0, 0, 0.08); /* a bit stronger shadow */
  --heading-font: "Georgia", serif;
  --body-font: "Inter", "Segoe UI", sans-serif;
}

body {
  font-family: var(--body-font);
  margin: 2em auto;
  max-width: 800px;
  padding: 0 1em;
  line-height: 1.7;
  background: linear-gradient(20deg, #fafafa 0%, #e6e8f0 50%, #cdd7e3 100%);
  color: var(--text-color);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #66ccff;              /* heller Blauton */
    --accent-color: #44ddaa;

    --background-light: #1e1e1e;        /* fast schwarz */
    --background-research: #223322;     /* dunkles Grün */
    --background-teaching: #222244;     /* dunkles Blau */
    --border-color: #444;
    --text-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.5);  /* stärkere Schatten */
    /* Schriften bleiben gleich */
  }
  
  body {
  background: linear-gradient(20deg, #66ccff 0%, #222244 50%, #223322 100%);
  }
  
  table {
    background-color: var(--background-light) !important;
    box-shadow: 0 1px 6px var(--shadow-color) !important;
  }

  th, td {
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
  }

  thead th {
    background-color: var(--main-color) !important;
    color: white !important;
  }

  tbody tr:nth-child(odd) {
    background-color: #252525 !important;
  }

  tbody tr:nth-child(even) {
    background-color: #1f1f1f !important;
  }

  tbody tr:hover {
    background-color: #2c3c4c !important;
  }

  strong {
    color: white;
  }

  em {
    color: #aaa !important;
  }
}


h1 {
  font-family: var(--heading-font);
  font-size: 2.2em;
  color: var(--main-color);
  margin-bottom: 0.3em;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 1.5em;
  color: var(--main-color);
  margin-top: 2.2em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--main-color);
}

a {
  color: var(--main-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

.section {
  margin-left: -2em;
  margin-top: 2em;
  margin-right: -2em;
  margin-bottom: 2.2em;
  padding: 1.2em 1.5em;
  border-left: 5px solid var(--accent-color);
  border-radius: 8px;
  box-shadow: 0 5px 10px var(--shadow-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--shadow-color);
}

/* Background colors for sections - keep as is or slightly tweak */
.section.profile {
  background-color: var(--background-light);
}

.section.research {
  background-color: var(--background-research);
}

.section.teaching {
  background-color: var(--background-teaching);
}

.section.contact {
  background-color: var(--background-light);
}

.section.publications {
  background-color: var(--background-research);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-size: 0.96em;
  background-color: var(--background-light);  /* match section light background */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px var(--shadow-color);
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

thead th {
  background-color: var(--main-color);
  color: white;
  font-weight: 600;
  font-size: 0.95em;
}

tbody tr:nth-child(odd) {
  background-color: #f7faff;
}

tbody tr:hover {
  background-color: #e6f0ff;
}

/* Typography */
ul {
  margin-top: 0.4em;
  padding-left: 1.3em;
}

small {
  color: #666;
  font-size: 0.88em;
}

em {
  color: #444;
}

strong {
  color: var(--main-color);
}