/* =========================================================
   MEROS – Zentrales Stylesheet
   Überarbeitete und bereinigte Version
   ========================================================= */


/* ---------------------------------------------------------
   1. Farben und Grundeinstellungen
   --------------------------------------------------------- */

:root {
    --gruen-dunkel: #355b3e;
    --gruen-mittel: #496f50;
    --gruen-hell: #edf5e9;
    --gruen-hover: #dcebd6;

    --text: #333;
    --text-hell: #606660;
    --linie: #e0e5df;
    --weiss: #fff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 17px;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 17px;
    color: var(--text);
    background: #b7c5ab;
    line-height: 1.7;
}

a {
    color: var(--gruen-dunkel);
}


/* ---------------------------------------------------------
   2. Weißes Seitenblatt
   --------------------------------------------------------- */

.seitenblatt {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 40px);

    margin: 20px auto;

    background-color: #ffffff;
    border: 1px solid #d9e0d6;
    border-radius: 8px;
    box-shadow: 0 0 22px rgba(35, 55, 35, 0.08);

    overflow: hidden;
}

/* Footer bleibt bei kurzen Seiten unten */

.seitenblatt footer {
    margin-top: auto;
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   3. Gemeinsamer Kopfbereich
   --------------------------------------------------------- */

.gemeinsamer-kopfbereich header {
    display: flex;
    align-items: center;
    gap: 25px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px;
}

.vereinslogo {
    display: block;
    width: 180px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}

.kopf-link {
    color: inherit;
    text-decoration: none;
}

.kopf-link h1 {
    margin: 0;
    color: var(--gruen-dunkel);
    font-size: 52px;
    line-height: 1.1;
    font-weight: bold;
    letter-spacing: 2px;
    transition: color 0.2s ease;
}

.kopf-link p {
    margin: 8px 0 0;
    color: #555;
    font-size: 28px;
    line-height: 1.35;
}

.kopf-link:hover h1 {
    color: var(--gruen-mittel);
}


/* ---------------------------------------------------------
   4. Hauptnavigation
   --------------------------------------------------------- */

.hauptmenue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;

    width: 100%;
    margin: 0;
    padding: 7px 16px;

    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);

    background: var(--gruen-hell);
}

.hauptmenue a {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;

    color: var(--gruen-dunkel);
    text-decoration: none;
    font-size: 17px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.hauptmenue a:hover,
.hauptmenue a:focus-visible {
    background: var(--gruen-hover);
    text-decoration: underline;
}

.hauptmenue a[aria-current="page"] {
    font-weight: bold;
}


/* ---------------------------------------------------------
   5. Dropdown-Untermenüs
   --------------------------------------------------------- */

.menuepunkt-untermenue {
    position: relative;
}

.menuepunkt-untermenue > a::after {
    content: " ▾";
    font-size: 13px;
}

.untermenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 200px;
    padding: 6px;

    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 5px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);

    z-index: 1000;
}

.untermenue a {
    display: block;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
}

.menuepunkt-untermenue:hover .untermenue,
.menuepunkt-untermenue:focus-within .untermenue {
    display: block;
}

.untermenue a:hover,
.untermenue a:focus-visible {
    background: var(--gruen-hover);
    text-decoration: underline;
}


/* ---------------------------------------------------------
   6. Kontaktleiste
   --------------------------------------------------------- */

.kontaktleiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;

    width: 100%;
    margin: 0 auto;
    padding: 14px 30px;

    border-bottom: 1px solid var(--linie);

    color: var(--text-hell);
    font-size: 14px;
    line-height: 1.7;
}

.kontaktname {
    color: #444;
}

.kontaktwege {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.kontaktleiste a {
    color: var(--gruen-dunkel);
    text-decoration: none;
}

.kontaktleiste a:hover,
.kontaktleiste a:focus-visible {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   7. Allgemeiner Hauptinhalt
   --------------------------------------------------------- */

main {
    width: calc(100% - 60px);
    max-width: 1000px;
    margin: 40px auto 60px;
}

main h2 {
    margin: 0 0 14px;
    color: var(--gruen-dunkel);
    font-size: 34px;
    font-weight: normal;
    line-height: 1.3;
}

.einleitung {
    margin: 0 0 30px;
    color: var(--text-hell);
}


/* ---------------------------------------------------------
   8. Wiederverwendbare Inhaltskarten
   --------------------------------------------------------- */

.inhaltskarten {
    display: grid;
    gap: 26px;
}

.inhaltskarte {
    overflow: hidden;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--weiss);
}

.inhaltskarte-kopf {
    padding: 17px 22px;
    background: var(--gruen-hell);
    border-bottom: 1px solid var(--linie);
}

.inhaltskarte-inhalt {
    padding: 21px 22px;
}

.inhaltskarte-inhalt p {
    margin: 0 0 16px;
}

.inhaltskarte-inhalt p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   9. Wiederverwendbare Listen
   --------------------------------------------------------- */

.inhaltsliste {
    display: grid;
    gap: 16px;
}

.inhaltslistenpunkt {
    padding: 17px 20px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--weiss);
}

.inhaltslistenpunkt h3 {
    margin: 0 0 9px;
    color: var(--gruen-dunkel);
    font-size: 21px;
    line-height: 1.4;
}

.inhaltslistenpunkt p {
    margin: 0 0 12px;
}

.inhaltslistenpunkt p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   10. Wiederverwendbare Tabellen
   --------------------------------------------------------- */

.tabellenbereich {
    width: 100%;
    margin: 24px 0;
    overflow-x: auto;
}

.inhaltstabelle {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--linie);
}

.inhaltstabelle th,
.inhaltstabelle td {
    padding: 11px 14px;
    border: 1px solid var(--linie);
    text-align: left;
    vertical-align: top;
}

.inhaltstabelle th {
    background: var(--gruen-hell);
    color: var(--gruen-dunkel);
    font-weight: bold;
}

.inhaltstabelle tbody tr:nth-child(even) {
    background: #fafbf9;
}


/* ---------------------------------------------------------
   11. Wiederverwendbare Bilder und Links
   --------------------------------------------------------- */

.inhaltsbild {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 5px;
}

.weiterlesen {
    display: inline-block;
    color: var(--gruen-dunkel);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.weiterlesen:hover,
.weiterlesen:focus-visible {
    color: var(--gruen-mittel);
}

.mehr-link {
    display: inline-block;
    margin-top: 5px;
    padding: 10px 16px;

    border: 1px solid #cbdac7;
    border-radius: 5px;

    background: var(--gruen-hell);
    color: var(--gruen-dunkel);

    font-size: 16px;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.mehr-link:hover,
.mehr-link:focus-visible {
    border-color: #b6cbb0;
    background: var(--gruen-hover);
    text-decoration: underline;
}


/* ---------------------------------------------------------
   12. Startseite: Bildbereich und Begrüßung
   --------------------------------------------------------- */

.startbereich {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 38px;

    width: calc(100% - 40px);
    max-width: 1100px;
    margin: 38px auto 60px;
}

.starttext {
    min-width: 0;
}

.starttext h2 {
    margin: 0 0 20px;
    color: var(--gruen-dunkel);
    font-size: 32px;
    font-weight: normal;
    line-height: 1.3;
}

.starttext p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   13. Startseite: Slideshow
   --------------------------------------------------------- */

.slideshow {
    position: relative;
    width: 100%;
    height: 410px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf0eb;
}

.slideshow img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideshow img.aktiv {
    display: block;
}

.slide-knopf {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 48px;
    padding: 0;

    border: 0;
    border-radius: 5px;

    background: rgba(0, 0, 0, 0.42);
    color: white;

    font-size: 24px;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

.slide-knopf:hover,
.slide-knopf:focus-visible {
    background: rgba(0, 0, 0, 0.72);
}

.slide-zurueck {
    left: 12px;
}

.slide-weiter {
    right: 12px;
}

.foto-copyright {
    position: absolute;
    right: 10px;
    bottom: 10px;

    padding: 5px 9px;
    border-radius: 4px;

    background: rgba(0, 0, 0, 0.58);
    color: white;

    font-size: 13px;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   14. Aktuelles: Nachrichtenliste
   --------------------------------------------------------- */

.nachrichtenliste {
    display: grid;
    gap: 26px;
}

.nachricht {
    overflow: hidden;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--weiss);
}

.nachricht-kopf {
    padding: 17px 22px;
    background: var(--gruen-hell);
    border-bottom: 1px solid var(--linie);
}

.kategorie {
    margin: 0 0 5px;
    color: var(--gruen-dunkel);
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.datum {
    color: var(--text-hell);
    font-size: 14px;
}

.nachricht h3 {
    margin: 5px 0 0;
    color: var(--gruen-dunkel);
    font-size: 24px;
    line-height: 1.4;
}

.nachricht-inhalt {
    padding: 21px 22px;
}

.nachricht-inhalt p {
    margin: 0 0 16px;
}

.nachricht-inhalt p:last-of-type {
    margin-bottom: 15px;
}

.nachricht-bild {
    display: block;
    width: 100%;
    max-height: 380px;
    margin: 0 0 18px;
    border-radius: 5px;
    object-fit: cover;
}


/* ---------------------------------------------------------
   15. Fußbereich
   --------------------------------------------------------- */

footer {
    margin-top: 0;
    padding: 28px 20px;

    border-top: 1px solid var(--linie);

    background: #fafbf9;
    color: var(--text-hell);

    text-align: center;
    font-size: 15px;
    line-height: 1.7;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: var(--gruen-dunkel);
    text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
    text-decoration: underline;
}
/* ---------------------------------------------------------
   16. Tablets und Smartphones
   --------------------------------------------------------- */

@media (max-width: 750px) {

    .gemeinsamer-kopfbereich header {
        gap: 15px;
        padding: 18px 20px;
    }

    .vereinslogo {
        width: 90px;
        height: 90px;
    }

    .kopf-link h1 {
        font-size: 36px;
    }

    .kopf-link p {
        margin-top: 6px;
        font-size: 17px;
    }

    .hauptmenue {
        justify-content: flex-start;
        gap: 2px;
        padding: 8px 12px;
    }

    .hauptmenue a {
        padding: 8px 10px;
        font-size: 16px;
    }

    .kontaktleiste {
        align-items: flex-start;
        padding: 12px 16px;
    }

    main {
        width: calc(100% - 32px);
        margin: 28px auto 40px;
    }

    main h2 {
        font-size: 29px;
    }

    .startbereich {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
        width: calc(100% - 32px);
        margin: 25px auto 40px;
    }

    .slideshow {
        height: 340px;
    }

    .starttext h2 {
        margin-bottom: 14px;
        font-size: 29px;
    }

    .starttext p {
        font-size: 16px;
        line-height: 1.8;
    }

    .nachricht h3 {
        font-size: 22px;
    }

    .nachricht-kopf,
    .nachricht-inhalt {
        padding: 15px;
    }

    .inhaltskarte-kopf {
        padding: 15px;
    }

    .inhaltskarte-inhalt {
        padding: 15px;
    }

    .inhaltslistenpunkt {
        padding: 14px;
    }

    .inhaltstabelle th,
    .inhaltstabelle td {
        padding: 9px 10px;
    }

    .seitenblatt {
        margin: 10px auto;
        min-height: calc(100vh - 20px);
        border-radius: 6px;
        box-shadow: 0 0 12px rgba(35, 55, 35, 0.06);
    }
}


/* ---------------------------------------------------------
   17. Sehr schmale Smartphones
   --------------------------------------------------------- */

@media (max-width: 400px) {

    .gemeinsamer-kopfbereich header {
        gap: 10px;
        padding: 16px 12px;
    }

    .vereinslogo {
        width: 70px;
        height: 70px;
    }

    .kopf-link h1 {
        font-size: 30px;
    }

    .kopf-link p {
        font-size: 15px;
    }

    .slideshow {
        height: 240px;
    }

    .slide-knopf {
        width: 36px;
        height: 42px;
        font-size: 21px;
    }

    .kontaktleiste {
        padding: 12px;
        font-size: 13px;
    }
}


/* ---------------------------------------------------------
   18. Weniger Animationen
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   19. Jahresberichte
   ========================================================= */

.autor {
    font-variant: small-caps;
}

.tabellenrahmen {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--linie);
    border-radius: 7px;
}

.tabellenrahmen table {
    width: 100%;
    border-collapse: collapse;
    background: var(--weiss);
}

.tabellenrahmen thead {
    background: var(--gruen-hell);
}

.tabellenrahmen th {
    padding: 14px 16px;
    color: var(--gruen-dunkel);
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #cbdac7;
    font-size: 16px;
}

.tabellenrahmen td {
    padding: 16px;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
    font-size: 16px;
}

.tabellenrahmen tbody tr:last-child td {
    border-bottom: none;
}

.tabellenrahmen tbody tr:hover {
    background: #fafcf9;
}

.tabellenrahmen .band {
    width: 150px;
    color: var(--gruen-dunkel);
    font-weight: bold;
    white-space: nowrap;
}

.tabellenrahmen .jahr {
    width: 115px;
    white-space: nowrap;
}

.tabellenrahmen .beitrag {
    margin: 0 0 12px;
}

.tabellenrahmen .beitrag:last-child {
    margin-bottom: 0;
}

.tabellenrahmen .schriftenschau {
    color: var(--text-hell);
}

@media (max-width: 750px) {
    .tabellenrahmen th,
    .tabellenrahmen td {
        padding: 12px;
    }

    .tabellenrahmen .band {
        width: auto;
    }
}


/* =========================================================
   20. Seite: Über MEROS
   ========================================================= */

main.ueber-meros {
    max-width: 900px;
}

.ueber-meros h2 {
    margin-bottom: 24px;
}

.ueber-meros h3 {
    margin: 34px 0 16px;
    color: var(--gruen-dunkel);
    font-size: 24px;
    font-weight: normal;
    line-height: 1.4;
}

.ueber-meros p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.8;
}

.ueber-meros ul {
    margin: 0 0 26px;
    padding-left: 28px;
}

.ueber-meros li {
    margin-bottom: 15px;
    padding-left: 3px;
    font-size: 17px;
    line-height: 1.8;
}

.ueber-meros .mehr {
    color: var(--gruen-dunkel);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ueber-meros .mehr:hover,
.ueber-meros .mehr:focus-visible {
    color: var(--gruen-mittel);
}

@media (max-width: 750px) {
    .ueber-meros h3 {
        margin-top: 28px;
        font-size: 22px;
    }

    .ueber-meros p,
    .ueber-meros li {
        font-size: 16px;
    }

    .ueber-meros li {
        margin-bottom: 13px;
    }
}




/* =========================================================
   21. Seite: Veröffentlichungen
   ========================================================= */

main.veroeffentlichungen {
    max-width: 900px;
}

.publikationsliste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.publikationslink {
    display: block;
    padding: 22px;
    border: 1px solid var(--linie);
    border-radius: 7px;
    background: var(--gruen-hell);
    color: var(--gruen-dunkel);
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.publikationslink h3 {
    margin: 0;
    color: var(--gruen-dunkel);
    font-size: 21px;
    font-weight: normal;
    line-height: 1.5;
}

.publikationslink:hover,
.publikationslink:focus-visible {
    border-color: #b6cbb0;
    background: var(--gruen-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    .publikationsliste {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 24px;
    }

    .publikationslink {
        padding: 18px;
    }
}



/* =========================================================
   22. MEROS – Artseiten
   ========================================================= */

main.artseite {
    max-width: 1050px;
    margin: 24px auto 60px;
}

/* Artname */

.art-kopf {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--linie);
}

.art-kopf h1 {
    margin: 0 0 5px;
    color: var(--gruen-dunkel);
    font-size: 40px;
    font-weight: normal;
}

.art-wissenschaftlich {
    margin: 0;
    color: var(--text-hell);
    font-size: 19px;
    font-style: italic;
}

/* Systematik und Foto */

.art-kopfbereich {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 30px;
    margin-bottom: 35px;
}

/* Systematik */

.art-systematik {
    padding: 22px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--weiss);
}

.art-systematik h2 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie);
    color: var(--gruen-dunkel);
    font-size: 23px;
    font-weight: normal;
}

.art-systematik dl {
    margin: 0;
}

.art-systematik dl > div {
    padding: 11px 0;
    border-bottom: 1px solid var(--linie);
}

.art-systematik dl > div:last-child {
    border-bottom: none;
}

.art-systematik dt {
    margin-bottom: 4px;
    color: var(--text-hell);
    font-size: 16px;
}

.art-systematik dd {
    margin: 0;
    color: var(--gruen-dunkel);
    font-size: 17px;
    font-weight: bold;
}

/* Foto */

.art-foto {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
}

.art-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.art-foto figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 6px 11px;
    background: rgba(0, 0, 0, 0.58);
    color: white;
    font-size: 13px;
    line-height: 1.5;
    border-top-left-radius: 8px;
}

/* Informationsbereiche */

.art-infobereich {
    margin-top: 40px;
}

.art-infobereich > h2 {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie);
    color: var(--gruen-dunkel);
    font-size: 27px;
    font-weight: normal;
}

/* Weitere Angaben */

.art-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 35px;
}

.art-details .art-infozeile {
    padding: 17px 5px;
    border-bottom: 1px solid var(--linie);
    background: var(--weiss);
}

.art-details .art-infozeile h3 {
    margin: 0 0 7px;
    color: var(--gruen-dunkel);
    font-size: 19px;
    font-weight: bold;
}

.art-details .art-infozeile p {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    line-height: 1.8;
}

/* Körpermerkmale und Maße */

.art-masse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.art-masse-box {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--linie);
    border-radius: 7px;
    background: var(--gruen-hell);
}

/* Beschreibung ohne Kartenhintergrund */

.art-masse-box:first-child {
    grid-column: 1 / -1;
    padding: 0 5px 18px;
    border: none;
    border-radius: 0;
    background: var(--weiss);
}

.art-masse-box h3 {
    margin: 0 0 9px;
    color: var(--gruen-dunkel);
    font-size: 20px;
    font-weight: bold;
}

.art-masse-box p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
}

/* Fortpflanzung */

.art-fortpflanzung {
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--linie);
}

.art-fortpflanzung > h2 {
    margin: 0 0 20px;
    color: var(--gruen-dunkel);
    font-size: 27px;
    font-weight: normal;
}

.art-fortpflanzung-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.art-fortpflanzung-box {
    padding: 19px 13px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--gruen-hell);
    text-align: center;
}

.art-fortpflanzung-box h3 {
    margin: 0 0 7px;
    color: var(--gruen-dunkel);
    font-size: 18px;
}

.art-fortpflanzung-box p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

/* Zurück-Link */

.art-zurueck {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--linie);
}

.art-zurueck {
    border-top: none;
    border-bottom: none;
    padding-top: 0;
}

/* Tablets */

@media (max-width: 850px) {

    .art-kopfbereich {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 20px;
    }

    .art-systematik {
        padding: 17px;
    }

    .art-fortpflanzung-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphones */

@media (max-width: 650px) {

    main.artseite {
        width: calc(100% - 32px);
        margin: 28px auto 40px;
    }

    .art-kopf h1 {
        font-size: 32px;
    }

    .art-kopfbereich {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .art-foto {
        max-width: 450px;
        margin: 0 auto;
    }

    .art-foto img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .art-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .art-masse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .art-infobereich > h2,
    .art-fortpflanzung > h2 {
        font-size: 24px;
    }

    .art-details .art-infozeile p,
    .art-masse-box p {
        font-size: 16px;
    }
}

/* Sehr schmale Smartphones */

@media (max-width: 400px) {

    .art-fortpflanzung-grid,
    .art-masse-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   23. Artenübersicht – Greifvögel und Eulen
   ========================================================= */

.arten-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
}

.arten-container section {
    min-width: 0;
}

.arten-container h2 {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie);
}

.arten-container ul {
    margin: 0;
    padding-left: 24px;
}

.arten-container li {
    margin-bottom: 11px;
    font-size: 17px;
    line-height: 1.7;
}

@media (max-width: 650px) {
    .arten-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .arten-container li {
        font-size: 16px;
    }
}

/* =========================================================
   24. Tagungsbände – Einzelseiten
   ========================================================= */

main.tagungsband-seite {
    max-width: 1000px;
}

/* Buchcover und Informationen */

.tagungsband-kopf {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 40px;
    margin: 35px 0 45px;
}

.tagungsband-cover {
    display: block;
    width: 100%;
    max-width: 330px;
    height: auto;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}


/* Inhaltsverzeichnis */

.tagungsband-inhalt {
    margin-top: 40px;
}

.tagungsband-inhalt h3 {
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--linie);
    color: var(--gruen-dunkel);
    font-size: 26px;
    font-weight: normal;
}

/* Zurück-Link */

.tagungsband-zurueck {
    margin-top: 35px;
    padding-top: 20px;
    border-top: 1px solid var(--linie);
}

/* Smartphones und Tablets */

@media (max-width: 750px) {

    .tagungsband-kopf {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .tagungsband-cover {
        max-width: 280px;
    }

    .tagungsband-information h3 {
        font-size: 23px;
    }

    .tagungsband-inhalt h3 {
        font-size: 24px;
    }
}
/* Gesamte Tagungsband-Zeile anklickbar */

.band-link {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.band-link:hover {
    background: var(--gruen-hover) !important;
}

.band-link:focus-visible {
    outline: 2px solid var(--gruen-dunkel);
    outline-offset: -2px;
}
/* Vorläufige Markierung für noch zu prüfende Angaben */

.pruefen-hinweis {
    margin: 15px 0;
    padding: 14px 18px;

    border: 2px solid #d99a32;
    border-radius: 6px;

    background: #fff4d9;
    color: #795315;

    font-size: 15px;
    line-height: 1.6;
}

.pruefen-hinweis strong {
    display: block;
    margin-bottom: 4px;
    color: #a66b12;
}

/* =========================================================
   25. MEROS – Mobile Navigation
   ========================================================= */

/* Hamburger-Button auf Desktop ausblenden */

.mobile-menue-knopf {
    display: none;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--gruen-hell);
    padding: 10px;
    cursor: pointer;
}

.mobile-menue-knopf span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    border-radius: 3px;
    background: var(--gruen-dunkel);
    transition: 0.2s ease;
}

/* Untermenü-Schaltflächen auf Desktop ausblenden */

.untermenue-knopf {
    display: none;
}


/* Smartphones und Tablets */

@media (max-width: 750px) {

    /* Kopfbereich */

    .gemeinsamer-kopfbereich header {
        position: relative;
        gap: 12px;
        padding: 16px 14px;
    }

    .mobile-menue-knopf {
        display: block;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Hauptmenü standardmäßig geschlossen */

    .hauptmenue {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;

        padding: 8px 14px;

        border-top: 1px solid var(--linie);
        border-bottom: 1px solid var(--linie);

        background: var(--gruen-hell);
    }

    /* Geöffnetes Hauptmenü */

    .hauptmenue.is-open {
        display: flex;
    }

    .hauptmenue > a {
        display: block;
        width: 100%;
        padding: 11px 10px;

        border-bottom: 1px solid #dce7d8;

        font-size: 16px;
    }

    /* Einträge mit Untermenü */

    .menuepunkt-untermenue {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #dce7d8;
    }

    .menuepunkt-untermenue > a {
        display: block;
        padding: 11px 10px;
        font-size: 16px;
    }

    .menuepunkt-untermenue > a::after {
        display: none;
    }

    /* Aufklapp-Button */

    .untermenue-knopf {
        display: block;
        width: 40px;
        height: 40px;

        border: none;
        border-radius: 5px;

        background: transparent;
        color: var(--gruen-dunkel);

        font-size: 20px;
        cursor: pointer;
    }

    .untermenue-knopf:hover,
    .untermenue-knopf:focus-visible {
        background: var(--gruen-hover);
    }

    /* Untermenüs im mobilen Menü */

    .untermenue {
        display: none;
        position: static;

        grid-column: 1 / -1;

        width: 100%;
        min-width: 0;

        padding: 4px 0 8px 14px;

        border: none;
        border-radius: 0;
        box-shadow: none;

        background: transparent;
    }

    .menuepunkt-untermenue.is-open > .untermenue {
        display: block;
    }

    .untermenue a {
        display: block;
        padding: 10px 12px;
        white-space: normal;
        font-size: 15px;
    }

    /* Pfeil dreht sich beim Öffnen */

    .menuepunkt-untermenue.is-open
    .untermenue-knopf {
        transform: rotate(180deg);
    }

    /* Fokus sichtbar halten */

    .mobile-menue-knopf:focus-visible,
    .untermenue-knopf:focus-visible {
        outline: 2px solid var(--gruen-dunkel);
        outline-offset: 3px;
    }
}


/* Animationen bei reduzierter Bewegung vermeiden */

@media (prefers-reduced-motion: reduce) {

    .mobile-menue-knopf span {
        transition: none;
    }
}
@media (max-width: 750px) {

    .menuepunkt-untermenue:hover .untermenue,
    .menuepunkt-untermenue:focus-within .untermenue {
        display: none;
    }

    .menuepunkt-untermenue.is-open > .untermenue {
        display: block;
    }

}

/* =========================================================
   25. Mobile Tabellenansicht – Kartenlayout
   ========================================================= */

@media (max-width: 600px) {

    /* Tabellenkopf auf Smartphones ausblenden */
    .tabellenrahmen thead {
        display: none;
    }

    /* Tabelle und Tabellenkörper */
    .tabellenrahmen table,
    .tabellenrahmen tbody {
        display: block;
        width: 100%;
    }

    /* Jeder Datensatz wird eine eigene Karte */
    .tabellenrahmen tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0 12px;

        margin-bottom: 18px;
        padding: 16px;

        border: 1px solid var(--linie);
        border-radius: 8px;

        background: var(--weiss);
    }

    /* Bandnummer */
    .tabellenrahmen .band {
        grid-column: 1;
        grid-row: 1;

        width: auto;
        padding: 0;

        border: none;

        color: var(--gruen-dunkel);
        font-size: 18px;
        font-weight: bold;
        white-space: normal;
    }

    /* Erscheinungsjahr */
    .tabellenrahmen .jahr {
        grid-column: 2;
        grid-row: 1;

        width: auto;
        padding: 0;

        border: none;

        color: var(--text-hell);
        font-size: 16px;
        font-weight: bold;
        white-space: nowrap;
        text-align: right;
    }

    /* Veröffentlichungen */
    .tabellenrahmen td:last-child {
        grid-column: 1 / -1;
        grid-row: 2;

        padding: 14px 0 0;
        border: none;
        border-top: 1px solid var(--linie);

        font-size: 15px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }

    /* Einzelne Beiträge */
    .tabellenrahmen .beitrag {
        margin-bottom: 12px;
    }

    .tabellenrahmen .beitrag:last-child {
        margin-bottom: 0;
    }

    /* Letzte Karte ohne zusätzlichen Abstand */
    .tabellenrahmen tbody tr:last-child {
        margin-bottom: 0;
    }

}

/* =========================================================
   26. Aktuelles – Ankündigung
   ========================================================= */

.ankuendigung {
    max-width: 850px;
    margin: 35px auto 20px;
    padding: 30px 35px;

    border: 1px solid var(--linie);
    border-left: 5px solid var(--gruen-mittel);
    border-radius: 7px;

    background: #f7f9f5;
}

.ankuendigung h3 {
    margin: 0 0 18px;

    color: var(--gruen-dunkel);
    font-size: 25px;
    font-weight: normal;
    line-height: 1.4;
}

.ankuendigung p {
    margin: 0 0 16px;

    color: var(--text);
    font-size: 17px;
    line-height: 1.8;
}

.ankuendigung p:last-child {
    margin-bottom: 0;
}

/* Smartphones */

@media (max-width: 750px) {

    .ankuendigung {
        margin: 25px auto 15px;
        padding: 22px 20px;
    }

    .ankuendigung h3 {
        font-size: 22px;
    }

    .ankuendigung p {
        font-size: 16px;
    }
}

/* =========================================================
   26. MEROS – Moderate Größenanpassung
   ========================================================= */

/* Grundschrift */

html {
    font-size: 16px;
}

body {
    font-size: 16px;
    line-height: 1.75;
}

/* Seitenblatt */

.seitenblatt {
    max-width: 1150px;
}

/* Kopfbereich */

.gemeinsamer-kopfbereich header {
    gap: 24px;
    padding: 20px;
}

.vereinslogo {
    width: 170px;
    height: 135px;
}

.kopf-link h1 {
    font-size: 48px;
}

.kopf-link p {
    font-size: 25px;
}

/* Navigation */

.hauptmenue {
    gap: 5px;
    padding: 6px 14px;
}

.hauptmenue a {
    padding: 8px 11px;
    font-size: 16px;
}

/* Hauptinhalt */

main {
    max-width: 980px;
    margin: 36px auto 55px;
}

main h2 {
    margin-bottom: 18px;
    font-size: 32px;
}

main h3 {
    font-size: 22px;
}

/* Fließtext */

main p,
main li {
    font-size: 16px;
    line-height: 1.8;
}

/* Inhaltskarten */

.inhaltskarten {
    gap: 23px;
}

.inhaltskarte-kopf {
    padding: 16px 20px;
}

.inhaltskarte-inhalt {
    padding: 20px;
}

/* Aktuelles */

.nachrichtenliste {
    gap: 23px;
}

.nachricht-kopf {
    padding: 16px 20px;
}

.nachricht h3 {
    font-size: 23px;
}

.nachricht-inhalt {
    padding: 20px;
}

/* Startseite */

.startbereich {
    gap: 34px;
    margin-top: 34px;
}

.starttext h2 {
    font-size: 31px;
}

.starttext p {
    font-size: 16px;
}

.slideshow {
    height: 390px;
}

/* Fußbereich */

footer {
    padding: 25px 20px;
    font-size: 15px;
}

/* =========================================================
   Mobile Darstellung
   ========================================================= */

@media (max-width: 750px) {

    html {
        font-size: 16px;
    }

    body {
        font-size: 16px;
    }

    .vereinslogo {
        width: 90px;
        height: 90px;
    }

    .kopf-link h1 {
        font-size: 36px;
    }

    .kopf-link p {
        font-size: 17px;
    }

    .hauptmenue a {
        font-size: 16px;
    }

    main {
        width: calc(100% - 32px);
        margin: 28px auto 40px;
    }

    main h2 {
        font-size: 29px;
    }

    main p,
    main li {
        font-size: 16px;
    }

    .startbereich {
        width: calc(100% - 32px);
        gap: 25px;
    }

    .slideshow {
        height: 320px;
    }

    .nachricht h3 {
        font-size: 21px;
    }
}

@media (max-width: 400px) {

    .kopf-link h1 {
        font-size: 30px;
    }

    .kopf-link p {
        font-size: 15px;
    }

    .slideshow {
        height: 240px;
    }
}