:root {
      --text: #202122;
      --background: #f8f9fa;
      --link: #0645ad;
      --link-visited: #551a8b;
      --border: #a2a9b1;
      --highlight: #eaf3ff;
    }

    body {
      font-family: 'Helvetica', 'Arial', sans-serif;
      line-height: 1.6;
      color: var(--text);
      background-color: var(--background);
      margin: 0;
      padding: 0;
      max-width: 1000px;
      margin: 0 auto;
      padding: 1rem;
    }

    header {
      border-bottom: 1px solid var(--border);
      padding-bottom: 1rem;
      margin-bottom: 1.5rem;
    }
	
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	
    h1 {
      margin-top: 3rem; /* oder z. B. 4rem, je nach gewünschtem Abstand */
    }
	
    h2 {
      margin-top: 3rem;
    }

    .subtitle {
      font-size: 1rem;
      color: #54595d;
      margin: 0.5rem 0;
    }

    nav {
      margin: 1rem 0;
    }

    nav a {
      margin-right: 1rem;
    }

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

    a:hover {
      text-decoration: underline;
    }

    a:visited {
      color: var(--link-visited);
    }

    .search-container {
      margin: 1rem 0;
    }

    #search {
      width: 100%;
      max-width: 500px;
      padding: 0.5rem;
      border: 1px solid var(--border);
      font-size: 1rem;
    }

    #search:focus {
      outline: 2px solid var(--highlight);
    }

    .content {
      display: flex;
      flex-wrap: wrap;
    }

    .main-content {
      flex: 3;
      min-width: 300px;
    }

    .side-content {
      flex: 1;
      min-width: 200px;
      padding-left: 2rem;
    }

    .term-list {
      list-style: none;
      padding: 0;
    }

    .term-list li {
      margin-bottom: 0.5rem;
      padding: 0.3rem 0;
      border-bottom: 1px solid #eaecf0;
    }

    .term-list li:last-child {
      border-bottom: none;
    }

    .category-section {
      margin-bottom: 2rem;
    }

    .category-title {
      font-size: 1.3rem;
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.3rem;
      margin-bottom: 0.8rem;
    }

    .alphabet-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-bottom: 1.5rem;
    }

    .alphabet-nav a {
      display: block;
      padding: 0.2rem 0.5rem;
    }

    .alphabet-nav a:hover {
      background-color: var(--highlight);
      text-decoration: none;
    }

    @media (max-width: 600px) {
      .content {
        flex-direction: column;
      }
      .side-content {
        padding-left: 0;
        margin-top: 2rem;
      }
    }