@media (max-width: 767px) {
    /* Table responsive */
    .table, .table thead, .table tbody, .table th, .table td, .table tr {
        display: block;
        width: 100%;
    }
    .table thead { display: none; }
    .table tr { margin-bottom: 15px; border-bottom: 1px solid #ccc; padding: 10px; background: #f9f9f9; border-radius: 6px; }
    .table td { position: relative; padding-left: 40%; text-align: left; border: none; border-bottom: 1px solid #eee; }
    .table td::before { content: attr(data-label); position: absolute; left: 10px; top: 10px; font-weight: bold; color: #333; white-space: nowrap; }
    td a { max-width: 100%; word-break: break-word; white-space: normal; }

    /* Accordion sichtbar machen */
    .mobile-only {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }
    .desktop-only { display: none !important; }
}

.suchergebnisse {
    background: rgba(240, 240, 240, 0.8); /* heller Hintergrund */
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 102, 0, 0.3);
    max-width: 800px;
    text-align: center;
    color: #2c6b2f;
    font-weight: bold;
}

/* Tablet Portrait (Hochformat) → wie Handy */
@media (min-width: 767px) and (max-width: 1024px) and (orientation: portrait) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}

/* Tablet Landscape (Querformat) → wie Desktop */
@media (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) {
    .desktop-only { display: table !important; }
    .mobile-only { display: none !important; }

    /* URL in der Tabelle kürzen */
    .responsive-table td[data-label="URL"] a {
        display: inline-block;
        max-width: 200px; /* z.B. feste Breite */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

/* Accordion Inhalte auf Mobile / Querformat fixieren */
@media (max-width: 767px) {
    .accordion-container {
        width: 100% !important;
        box-sizing: border-box;
    }

    .accordion-item {
        width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;  /* verhindert Überlaufen */
    }

    .accordion-content {
        width: 100% !important;
        box-sizing: border-box;
        word-wrap: break-word;  /* lange URLs umbrechen */
        overflow-wrap: break-word;
        white-space: normal;
    }

    .accordion-content a {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
        display: inline-block;
    }
}