:root {
    --primary: #0080C8;      /* CSU-Blau */
    --accent: #000000;       /* Weiß als Akzent */
    --text: #ffffff;            /* Dunkles Grau für Text */
    --csu-green: #0080C8;    /* CSU-Grün */
    --header-bg: #ffffff;    /* Helles Blau/Grau für Header-Hintergrund */
      --header-large: 40vh;   /* aktuelle Header-Höhe */
  --header-small: 110px;  /* Höhe nach Shrink */
  --cover-padding: var(--header-large);
   --header-small-mobile: 72px; /* Höhe Header auf Mobil */
    
}
        body {
            margin: 0;
            font-family: 'Inter', Arial, sans-serif;
            background: #303030;
            color: var(--text);
        }
.header {
  position: fixed;         /* jetzt immer sichtbar oben */
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-large);
  z-index: 999;
  background: var(--header-bg);
  overflow: hidden;
  transition: height .35s ease, padding .35s ease;
  display: flex;
  align-items: center;
}
.header-banner { transition: opacity .35s ease, object-position .35s ease; }
.header-content { transition: padding .35s ease, transform .35s ease; }
.header-banner {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 35%;     /* Bildausschnitt anpassen */
    z-index: 1;
    opacity: 0.6;
}
.header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center; /* Nav in der Mitte */
    width: 100%;
    gap: 1rem;
    padding: 2rem 0;
}
.header-img {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
                border: 3px solid var(--primary);
                            background: #fff;
    width: clamp(200px, 18vw, 400px);
    height: auto;
}
        .candidate-img {
            width: 220px;
            height: 360px;
            object-fit: cover;
            border-radius: 16px;
            object-fit: cover;
            background: #fff;
            flex-shrink: 0;
        }

        .candidate-img {
            border: 3px solid var(--primary);
            background: #fff;
        }
        .nav-links {
            display: flex;
            margin-top: -1rem;
            gap: 2.5rem;
            font-size: 1.15rem;
                position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    margin: 0;             /* überschreibt frühere margin-top:-1rem */
    padding: 0;
        }
        .nav-links a {
            color: var(--csu-green);
            text-decoration: none;
            font-weight: 700;
            padding: 0.4em 1em;
            border-radius: 24px;
            background: #303030;
            transition: background 0.2s, color 0.2s;
        }
        .nav-links a:hover {
            background: var(--csu-green);
            color: var(--accent);
        }
.social-links {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1.2rem;
    margin-top: 0;
}
        .social-links a {
            color: var(--csu-green);
            font-size: 1.5rem;
            background: #303030;
            border-radius: 50%;
            padding: 0.5em;
            transition: background 0.2s, color 0.2s;
        }
        .social-links a:hover {
            background: var(--csu-green);
            color: var(--accent);
        }
        .nav-links,
.social-links {
    margin-top: 0;
}
.social-links { z-index: 5; } /* bleibt rechts oben sichtbar */
.header-img { z-index: 5; }   /* bleibt links sichtbar */
        .logo {
            position: absolute;
            top: 1.2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            width: 60px;
            filter: none;
        }
        .topic-section {
            max-width: 900px;
            margin: 2.5rem auto 0 auto;
            padding: 0 1.5rem;
        }
        .topic-section h2 {
            color: var(--primary);
            margin-top: 2.5rem;
            font-size: 2rem;
            letter-spacing: 0.02em;
        }
        .topic-section p, .topic-section ul, .topic-section li {
            color: #ffffff;
            font-size: 1.15rem;
        }
        .underline {
            width: 400px;
            height: 4px;
            background: var(--csu-green);
            border-radius: 2px;
            margin: 2.5rem auto 2.5rem auto;
        }
        .footer {
            background: var(--primary);
            color: var(--accent);
            text-align: center;
            padding: 1.2rem 0 0.7rem 0;
            font-size: 1rem;
            letter-spacing: 0.03em;
            position: relative;
            overflow: hidden;
        }
        .footer-banner {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0.25;
            min-height: 10px;
            object-position: center 91%;
        }
        .footer a {
            color: #fff;
            text-decoration: underline;
        }
        .cta-button {
            display: inline-block;
            background-color: var(--primary);
            color: var(--accent);
            padding: 0.75rem 2rem;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 700;
            transition: background-color 0.3s, color 0.3s;
            margin-top: 1rem;
            margin: 0 auto; 
        }

        .cta-button:hover {
            background-color: #ccc;
        }

        .cta-button {
    display: inline-block;
    margin: 1rem auto 0 auto;
    text-align: center;
}

        .cta-button {
    display: inline-block;
    margin: 1rem auto 0 auto;
    text-align: center;
}

        /* Kontaktformular */
        .contact-form {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            text-align: left;
            gap: 1rem;
            margin-bottom: 4rem;
        }

        .contact-form label {
            font-weight: 700;
        }

        .contact-form input, .contact-form textarea {
            padding: 0.75rem;
            border: 1px solid #0055a4;
            background-color: #e9f0fa;
            color: #222;
            border-radius: 5px;
        }

        .contact-form button {
            cursor: pointer;
            border: none;
        }
        
    
        .contact-form textarea {
        min-height: 120px; /* vorher keine Höhe, jetzt größer */
        resize: vertical;  /* Nutzer kann die Höhe selbst anpassen */
        padding: 0.75rem;
        border: 1px solid #0055a4;
        background-color: #e9f0fa;
        color: #222;
        border-radius: 5px;
        }
.header { transition: min-height .35s ease, padding .35s ease; }
.header-img, .candidate-img { transition: width .35s ease, height .35s ease, transform .35s ease; }

/* Klassenzustand nach dem Scrollen */
.header.shrink {
  height: var(--header-small);
}
.header.shrink .header-content {
  padding: 0.6rem 1.2rem;
}
.header.shrink .candidate-img {
  width: 120px;
  height: 180px;
  border-radius: 10px;
}
.header.shrink .header-img {
  width: 140px;
  height: 90px;
}
.header.shrink .header-banner {
  object-position: center 20%;
  opacity: 0.6;
}
main {
  padding-top: var(--cover-padding);
  transition: padding-top .35s ease, transform .35s ease;
}
.header.shrink .nav-links { margin-top: 0; }
.header-shrunk main,
html.header-shrunk main {
  padding-top: var(--header-small);
}

        @media (max-width: 700px) {
              :root { --header-large: 32vh; --header-small: 72px; }
  main { padding-top: var(--header-large); }
  html.header-shrunk main { padding-top: var(--header-small); }
}
                .header {
        min-height: 32vh;            /* weniger Höhe auf kleinen Bildschirmen */
        padding: 0 1rem;
    }
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
        padding: 1rem 0;
    }
            .nav-links {
                gap: 1.2rem;
                font-size: 1rem;
            }
            .logo {
                width: 44px;
                top: 0.7rem;
            }
            .topic-section {
                padding: 0 0.5rem;
            }
    
            .header.shrink { min-height: 72px; }
  .header.shrink .candidate-img { width: 100px; height: 160px; }
      .nav-links, .social-links { margin-top: 0; }
    .social-links {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.6rem;
  align-items: center;
  z-index: 5;
}
.social-links a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;         /* transparent oder var(--csu-green) für gefüllte Kreise */
  color: var(--csu-green);
  font-size: 40px;
  line-height: 1;
  text-decoration: none;
  transition: background .18s, color .18s, transform .18s;
}
.social-links a:hover {
  background: var(--csu-green);
  color: var(--accent);
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .social-links a { width: 36px; height: 36px; font-size: 16px; }
}
.header {
  transition: height 0.9s cubic-bezier(.2,.8,.2,1), padding 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: height, padding;
}

.header-img,
.candidate-img {
  transition: width 0.9s cubic-bezier(.2,.8,.2,1), height 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: width, height, transform;
}

.header-banner {
  transition: opacity 0.9s ease, object-position 0.9s cubic-bezier(.2,.8,.2,1);
}

.header-content {
  transition: padding 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change: padding, transform;
}
.topics-list {
  max-width: 980px;
  margin: 1.25rem auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.topic-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.topic-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.topic-thumb {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.04);
  background:#111;
}
.topic-content h3 {
  margin: 0 0 0.25rem 0;
  color: var(--primary);
  font-size: 1.15rem;
  line-height: 1.1;
}
.topic-content p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.98rem;
  line-height: 1.4;
}

/* kleine Bild-Variante rechts/links konsistent halten */
@media (max-width: 900px) {
  .topic-item { flex-direction: row; gap: 0.75rem; padding: 0.75rem; }
  .topic-thumb { width: 72px; height: 72px; flex: 0 0 72px; }
}
@media (max-width: 560px) {
  .topic-item { flex-direction: column; align-items: flex-start; }
  .topic-thumb { width: 100%; height: 180px; flex: none; border-radius: 8px; }
  .topic-content h3 { margin-top: 0.5rem; }
}
.leitgedanke{
  max-width:980px;
  margin:1.5rem auto;
  padding:1rem;
  background: rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}
.leit-inner h2{ margin:0 0 .25rem; color:var(--primary); }
.leit-inner .lead{ margin:0 0 .75rem; color:rgba(255,255,255,0.9); font-weight:600; }
.leit-inner .values{ list-style:none; padding:0; margin:0 0 .75rem; display:flex; gap:.75rem; }
.leit-inner .values li{ background: rgba(0,0,0,0.25); padding:.5rem .75rem; border-radius:6px; font-size:.95rem; color: #fff; }
.leit-inner .values li span{ display:block; font-size:.85rem; color:rgba(255,255,255,0.8); font-weight:400; margin-top:.25rem; }
.leit-inner .cta{ margin:0; }
@media (max-width:900px){
  .leit-inner .values{ flex-direction:column; }
  .leit-inner .values li{ width:100%; }
}
html {
scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-large) + 35px); /* Default: großer Header */
}

/* wenn Header geschrumpft ist, anderer Offset */
html.header-shrunk {
  scroll-padding-top: calc(var(--header-small) + 35px);
}

/* fallback für sehr kleine Bildschirme */
@media (max-width:700px) {
  html { scroll-padding-top: calc(var(--header-small) + 20px); }
}

.team-grid {
      max-width: 980px;
      margin: 1.25rem auto;
      padding: 0 1.25rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .team-card {
      display: flex;
      gap: 1rem;
      align-items: center;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      padding: 0.75rem;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    }
    .team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.30); }

    .team-photo {
      width: 96px;
      height: 96px;
      flex: 0 0 96px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.04);
      background: #111;
    }

    .team-info h4 {
      margin: 0 0 0.25rem 0;
      font-size: 1.05rem;
      color: var(--primary);
    }
    .team-info p {
      margin: 0;
      color: rgba(255,255,255,0.85);
      font-size: 0.95rem;
    }
    .team-info .location {
      margin-top: 0.35rem;
      color: rgba(255,255,255,0.65);
      font-size: 0.9rem;
    }

    @media (max-width: 900px) {
      .team-grid { grid-template-columns: 1fr; }
      .team-card { padding: 0.6rem; }
      .team-photo { width: 84px; height: 84px; flex: 0 0 84px; }
    }

    .zoom-frame {
  width: 96px;                /* gleiche Größe wie .team-photo */
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  flex: 0 0 96px;
  display: inline-block;
}
.zoom-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  transform-origin: center center;
  cursor: zoom-in;
}

/* Hover zoom */
.zoom-frame:hover img {
  transform: scale(1.15);
}

/* Klick-Toggle Zustand (JS setzt .is-zoomed) */
.zoom-frame.is-zoomed img {
  transform: scale(1.28);
  cursor: zoom-out;
}

/* Optional: responsive kleinere Avatare */
@media (max-width:900px) {
  .zoom-frame, .zoom-frame img { width:84px; height:84px; }
}

.footer {
  position: relative;
}
.footer .footer-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none; /* wichtig: Bild blockiert keine Klicks mehr */
}
.footer > * {
  position: relative;
  z-index: 2; /* Inhalt (Links/Text) über dem Bild */
}
.footer a {
  position: relative;
  z-index: 3;
}

:root{
  --header-large: 30vh;   /* Höhe vor dem Scrollen (anpassen) */
  --header-small: 110px;  /* Höhe nach Shrink (anpassen) */
}

/* sorgt dafür, dass Anker-Targets Abstand zum fixed Header haben */
section, .topic-section, .leitgedanke, .placeholder, .legal-box {
  scroll-margin-top: calc(var(--header-small) + 20px); /* sicherer Default */
}

.topic-contact {
  max-width: 980px;
  margin: 1.25rem auto;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.14);
  color: #fff;
}
.topic-contact .tc-thumb {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
  background:#111;
}
.topic-contact .tc-body { flex:1; }
.topic-contact .tc-body h4 { margin:0 0 .2rem; color:var(--primary); font-size:2rem; }
.topic-contact .tc-body p { margin:0; color:rgba(255,255,255,0.9); font-size:1.3rem; }
.topic-contact .tc-actions { flex: 0 0 auto; display:flex; gap:.5rem; align-items:center; }
.topic-contact a.btn {
  padding:.45rem .75rem; border-radius:8px; background:var(--primary); color:#fff; text-decoration:none; font-weight:600;
}
@media (max-width:900px){
  .topic-contact { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .topic-contact .tc-actions { width:100%; display:flex; justify-content:flex-start; }
}

    .back-link a {
      color: #fff !important;
      text-decoration: none;
      font-weight: 600;
    }
    .back-link a:hover {
      text-decoration: underline;
      color: #fff !important;
    }

    .topic-photos {
  max-width: 980px;
  margin: 1rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}
.topic-photos figure {
  margin: 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  overflow: hidden;
}
.topic-photos img {
  display: block;
  width: 100%;
  height: 220px;           /* anpassen */
  object-fit: cover;
}
.topic-photos figcaption {
  padding: 0.6rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  background: transparent;
}

/* einzelne Bildvariante (wenn nur 1 Bild vorhanden) */
.topic-photos.one { grid-template-columns: 1fr; }

/* mobil */
@media (max-width: 900px) {
  .topic-photos {
    grid-template-columns: 1fr;
  }
  .topic-photos img { height: 160px; }
}

/* optional: einfache lightbox */
.lb-backdrop {
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.85); z-index: 1200; padding: 1rem;
}
.lb-backdrop img { max-width: 98%; max-height: 92%; border-radius:6px; }
.lb-backdrop.show { display:flex; }

html.subpage {
  --header-large: var(--header-small);
  --cover-padding: var(--header-small);
}

html.subpage .header {
  position: fixed !important;
  height: var(--header-small) !important;
  min-height: 0 !important;
  overflow: hidden;
  z-index: 9999;
  transition: none !important;
}

/* Banner must not scale */
html.subpage .header-banner {
  transform: none !important;
  opacity: 1 !important;
  transition: opacity .25s ease !important;
}

/* Do NOT scale header-content on subpages — keep nav/social normal size */
html.subpage .header-content {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Nav: centered and readable */
html.subpage .nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  scale: 1 !important;
  font-size: 1.05rem !important;
  gap: 1.4rem;
  z-index: 1100;
}

/* Social: visible, above banner */
html.subpage .social-links {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) !important;
  display: flex !important;
  gap: 0.8rem;
  align-items: center;
  z-index: 1200;
  pointer-events: auto;
}

/* social button size / appearance */
html.subpage .social-links a {
            color: var(--csu-green);
            font-size: 1.5rem;
            border-radius: 50%;
            padding: 0.5em;
            transition: background 0.2s, color 0.2s;
        }
html.subpage .social-links a:hover {
            background: var(--csu-green);
            color: var(--accent);
        }
/* header image bigger and vertically centered */
html.subpage .header-img {
  width: clamp(60px, 8vw, 150px) !important;
  height: auto !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1110;
  border-width: 2px;
}

/* ensure main content starts below small header */
html.subpage main {
  padding-top: var(--header-small) !important;
}


html.subpage .topic-hero .lead,
html.subpage .topic-photos figcaption,
html.subpage .topic-contact p {
  line-height: 2;     /* Zeilenhöhe (anpassen: 1.4–2.0) */
  margin-bottom: 0.9rem; /* Abstand nach jedem Absatz */
}

/* auf großen Bildschirmen etwas großzügiger */
@media (min-width: 1100px) {
  html.subpage .topic-body p,
  html.subpage .topic-hero p {
    line-height: 1.75;
    margin-bottom: 0.8rem;
  }
}

html.subpage .topic-hero li {
  margin-bottom: 0.3rem; /* Abstand nach jeder Listenpunkt */
}

html.subpage .topic-body p,
html.subpage .topic-hero p {
  margin-bottom: 1.2rem; /* Abstand nach der Liste */
  font-size: 1.2rem; /* etwas größere Schrift */
}

@media (max-width: 700px) {
  #ueber-mich {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
  }

  #ueber-mich .candidate-img {
    width: clamp(110px, 34vw, 160px);
    height: auto;
    max-width: 60%;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 0 0.75rem 0;
    order: -1; /* sicherstellen, dass das Bild über dem Text steht */
  }

  #ueber-mich > div {
    text-align: center;
  }
}

br.mobile-only { display: none; }

/* Auf Mobil (max-width anpassen) zeigen */
@media (max-width: 700px) {
  br.mobile-only { display: block; }
}

.mobile-nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; color: var(--csu-green); font-size: 1.4rem; padding: .2rem .6rem; border-radius:6px; }
.mobile-nav { display: none; }

/* Mobile rules */
@media (max-width:700px) {
  /* verberge die Desktop-Nav */
  .nav-links { display: none !important; }

  /* zeige Hamburger */
  .mobile-nav-toggle { display: inline-flex !important; align-items:center; justify-content:center; z-index:1200; }

  /* Dropdown zentriert unter Header */
  .mobile-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(94%, 420px);
    max-height: calc(100vh - 96px);
    overflow: auto;
    display: none;
    z-index: 20000; /* hoch setzen, damit es nicht vom Header überdeckt wird */
    background: rgba(0,0,0,0.92);
    border-radius: 10px;
    padding: .35rem;
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  }
  .mobile-nav.show { display: flex; }

  .mobile-nav a {
    color: #fff;
    text-decoration: none;
    padding: .6rem .8rem;
    border-radius: 8px;
    font-weight: 700;
    background: transparent;
  }
  .mobile-nav a:hover { background: rgba(255,255,255,0.04); }

  /* kleinere Schrift, kompakter Abstand */
  .mobile-nav a { font-size: 0.98rem; }
}

@media (max-width:700px) {
  .mobile-nav-toggle {
    display: inline-flex !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    background: rgba(0,0,0,0.35);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 18px;
    align-items: center;
    justify-content: center;
  }

    html.subpage .header-img {
    width: 110px !important;            /* größer als der Standard für mobile */
    height: 83px !important;
    max-width: none !important;
    object-fit: cover;
    left: 0.9rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1110 !important;
  }
  html:not(.subpage) .header.shrink .header-img {
    width: 110px !important;
    height: 83px !important;
    transform: translateY(-50%) !important;
    transition: width .22s ease, height .22s ease;
  }

  /* Optional: sicherstellen, dass Normalzustand auf Mobil etwas größer bleibt */
  html:not(.subpage) .header .header-img {
    width: 140px !important;
    height: 100px !important;
  }



  /* Optional: mache Desktop nav sicher unsichtbar */
  .nav-links { display: none !important; }
}

    div[style*="grid-template-columns: repeat(auto-fit"] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin: 3rem 0;
        justify-items: center;
    }

    /* Bilder zentriert und mit Hover-Effekt */
    section.topic-section img[src*="daniel"] {
        max-width: 100%;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    section.topic-section img[src*="daniel"]:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    }

    /* Mobile: 2 Bilder pro Reihe */
    @media (max-width: 768px) {
        div[style*="grid-template-columns: repeat"] {
            grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
        }
    }

    /* Mobile: 1 Bild pro Reihe auf sehr kleinen Geräten */
    @media (max-width: 480px) {
        div[style*="grid-template-columns: repeat"] {
            grid-template-columns: 1fr !important;
        }
    }