/* ==========================================================================
   Lesvos-Template: Anpassungen fuer Handy und Tablet
   Greift nur auf schmalen Bildschirmen; das Desktop-Layout bleibt unveraendert.
   ========================================================================== */

/* Menue-Knopf ist auf dem Desktop unsichtbar */
.head .menu-toggle {
    display: none;
}

/* --------------------------------------------------------------------------
   Tablet und kleiner: Breite fliessend statt fest 1000px
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
    .main {
        width: auto;
        max-width: 1000px;
    }

    /* Diashow: feste Pixelgroessen aus dem Script auf Bildschirmbreite skalieren */
    .slideshow > div {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1000 / 278;
    }
    .slideshow > div > div {
        width: 100% !important;
        height: 100% !important;
    }
    .slideshow img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Kopfbereich mit aufklappbarem Menue */
    .head {
        height: auto;
        min-height: 64px;
        padding: 0;
    }
    .head img#logo {
        width: 170px;
        margin: 4px 8px 4px 0;
    }
    .head .menu-toggle {
        display: block;
        position: absolute;
        left: 10px;
        top: 14px;
        padding: 8px 14px;
        border: 0;
        border-radius: 4px;
        background-color: #0066FF;
        color: #FFFFFF;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }
    .head ul {
        position: static;
        display: none;
        clear: both;
        width: 100%;
    }
    .head.offen ul {
        display: block;
    }
    .head ul li {
        float: none;
        border-right: 0;
        border-top: solid 1px #3399FF;
    }
    .head ul li a {
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Rechte Spalte der Startseite (Karte, Wetter) */
    .content .inhalt.termine {
        text-align: center;
        padding-top: 0;
    }
    .wo + br {
        display: none;
    }
    .wo {
        display: block;
        margin: 0 0 6px 0;
        font-size: 22px;
    }
    .karte {
        margin: 5px auto;
        max-width: 100%;
        height: auto;
    }
    .content .inhalt.termine > span {
        float: none !important;
        display: block;
    }
    .widget {
        position: static !important;
        margin: 10px auto 20px auto !important;
    }

    /* Spalten fliessend */
    .content .navigation {
        width: 24%;
        box-sizing: border-box;
    }
    .content .inhalt {
        width: 76%;
        box-sizing: border-box;
    }
    .content .inhalt.voll {
        width: 100%;
    }
    .content .inhalt.start {
        width: 65%;
    }
    .content .inhalt.termine {
        width: 35%;
    }

    /* Bilder, Videos und Tabellen nie breiter als der Inhalt */
    .content .inhalt img,
    .content .inhalt iframe,
    .content .inhalt video,
    .content .inhalt embed,
    .content .inhalt object {
        max-width: 100%;
    }
    .content .inhalt img {
        height: auto;
    }
    .content .inhalt table {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Handy: alles untereinander
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    body, html {
        font-size: 17px;
    }
    h1 {
        font-size: 24px;
        line-height: 1.25;
    }
    h2 {
        font-size: 19px;
    }

    /* Spalten untereinander */
    .content .navigation,
    .content .inhalt,
    .content .inhalt.voll,
    .content .inhalt.start,
    .content .inhalt.termine {
        float: none;
        width: auto;
        min-height: 0;
    }
    .content .inhalt {
        padding: 12px 14px 30px 14px;
    }
    .content .navigation {
        padding: 12px 14px 0 14px;
    }
    .content .navigation:empty {
        display: none;
    }
    .content .navigation ul li a {
        padding: 9px 0;
    }

    /* Artikel- und Terminlisten */
    .newsartikelliste img, .terminliste img, .aktuellesliste img {
        width: 38%;
        margin: 0 0 8px 10px;
    }
    .newsartikel img.artikelbild, .termin img.artikelbild {
        float: none;
        display: block;
        margin: 0 0 12px 0;
    }

    /* Links und Dokumente */
    .linkliste li img {
        max-width: 35%;
    }
    .linkliste li span.url {
        word-break: break-all;
    }
    .dokumentenliste li span.autor {
        float: none;
        display: block;
    }

    /* Bildergalerie: zwei Bilder nebeneinander */
    .bildergalerie ul li {
        width: calc(50% - 10px);
        max-height: none;
        margin: 0 5px 10px 5px;
        box-sizing: border-box;
    }
    .bildergalerie ul li img {
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        width: 100%;
        height: auto;
    }

    /* Personen */
    ul.personen {
        padding: 0;
    }
    ul.personen li {
        width: calc(50% - 10px);
        min-height: 0;
        margin: 0 5px 15px 5px;
        box-sizing: border-box;
    }
    ul.personen li img {
        max-width: 100% !important;
    }
    ul.personen.vcards li {
        width: 100%;
        margin: 0 0 15px 0;
    }
    .person img.personenbild {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 0 12px 0;
    }

    /* Formulare, Gaestebuch, Newsletter */
    .formular span.titel,
    .formular span.feld {
        float: none;
        display: block;
        width: auto;
        text-align: left;
        margin-left: 0;
        padding-left: 0;
    }
    .formular span.titel {
        margin-top: 10px;
        font-weight: bold;
    }
    .formular span.feld input,
    .formular span.feld textarea,
    .formular span.feld select {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* verhindert automatisches Zoomen auf dem iPhone */
    }
    .formular span.feld input[type=submit],
    .formular span.feld input[type=checkbox],
    .formular span.feld input[type=radio] {
        width: auto;
    }
    input, select, textarea {
        max-width: 100%;
    }

    /* Shop */
    .produktliste .produkt img {
        width: 35%;
    }
    .produktliste .suche input[type=search] {
        width: 60%;
    }

    /* Fusszeile */
    .content .foot {
        padding: 10px 14px;
        line-height: 1.8;
    }
}