/*
 * Responsive Patch für yael-elya.de
 * Bestehendes Desktop-Layout bleibt erhalten.
 */

/* Allgemeine Verbesserungen */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

img, video, iframe {
    max-width: 100%;
}

img {
    height: auto;
}

input, textarea, select {
    max-width: 100%;
}

#content {
    overflow-wrap: break-word;
}

hr {
    max-width: 100%;
}

/* =====================================
   TABLET UND SMARTPHONE
   ===================================== */

@media screen and (max-width: 1023px) {

    body {
        background-image: none;
        background-color: #EDEDED;
        width: 100%;
        margin: 0;
    }

    /* Kopfbereich */
    #header {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        min-height: 68px;
        height: auto;
        background-size: contain;
    }

    #logo {
        position: relative;
        top: auto;
        left: auto;
        max-width: 100%;
    }

    /* Hauptnavigation */
    #headnavstart,
    #headnav,
    #globalnav {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        clear: both;
    }

    #headnav ul,
    #globalnav ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        min-height: 30px;
    }

    #headnav li,
    #globalnav li {
        float: none;
        display: block;
    }

    #headnav a,
    #globalnav a:link,
    #globalnav a:visited {
        display: block;
        padding: 9px 12px;
    }

    /* Seitennavigation */
    #subnav {
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        clear: both;
    }

    #subnav ul {
        display: flex;
        flex-wrap: wrap;
    }

    #subnav li {
        list-style: none;
        margin: 0;
    }

    #subnav ul a {
        padding: 10px 12px;
    }

    #subnav .sitemap {
        position: static;
        height: auto;
    }

    /* Hauptinhalt */
    #content {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 20px;
        font-size: 0.95em;
        line-height: 1.55;
        text-align: left;
    }

    /* Rechte Zusatzspalte */
    #margin {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        margin: 20px 0 0;
        padding: 12px;
    }

    /* Weitere Inhaltsbereiche */
    #insel_left {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding: 12px;
    }

    #contnav2 {
        width: 100%;
        max-width: 100%;
    }

    #contnav2 li {
        float: none;
        padding-right: 0;
        margin-bottom: 10px;
    }

    #bottom {
        position: relative;
        width: 100%;
        height: auto;
        clear: both;
    }

    #bottom ul {
        height: auto;
        display: flex;
        flex-wrap: wrap;
    }

    #bottom li {
        float: none;
    }

    hr {
        width: 100%;
    }

    /* Formulare */
    input.formlong,
    input.suche,
    textarea,
    textarea.cms {
        max-width: 100%;
    }
}

/* =====================================
   SMARTPHONE
   ===================================== */

@media screen and (max-width: 600px) {

    body {
        font-size: 16px;
    }

    #header {
        background-size: 100% auto;
    }

    #headnav ul,
    #globalnav ul {
        flex-direction: column;
    }

    #headnav li,
    #globalnav li {
        width: 100%;
    }

    #headnav a,
    #globalnav a:link,
    #globalnav a:visited {
        text-align: left;
        padding: 12px 15px;
        border-left: none;
        border-bottom: 1px solid #fff;
    }

    #headnavstart {
        min-height: 0;
    }

    #subnav ul {
        flex-direction: column;
    }

    #subnav li {
        width: 100%;
    }

    #subnav ul a {
        padding: 12px 15px;
    }

    #content {
        width: 100%;
        margin: 0;
        padding: 16px;
        font-size: 1rem;
        line-height: 1.6;
    }

    #content img {
        max-width: 100%;
        height: auto;
        margin-right: 0;
    }

    #margin {
        margin-top: 24px;
        padding: 12px;
    }

    h1, .ueberschrift {
        font-size: 1.3em;
        line-height: 1.35;
    }

    h2 {
        font-size: 1.15em;
    }

    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    input,
    textarea,
    select {
        max-width: 100%;
    }

    input.formlong,
    textarea,
    textarea.cms {
        width: 100%;
    }

    #bottom ul {
        flex-direction: column;
    }
}

/* Verbesserte Lesbarkeit auf Smartphones */

@media screen and (max-width: 767px) {

    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 16px;
        line-height: 1.6;
    }
	
    /* Haupttext */
    #content {
        font-size: 17px;
        line-height: 1.65;
        text-align: left;
    }

    #content p,
    #content li {
        font-size: inherit;
        line-height: 1.65;
    }

    /* Überschriften */
    #content h1,
    #content .ueberschrift {
        font-size: 1.4em;
        line-height: 1.3;
    }

    #content h2 {
        font-size: 1.2em;
        line-height: 1.4;
    }

    /* Hauptnavigation */
    #headnav,
    #globalnav,
    #headnavstart {
        font-size: 16px;
    }

    /* Seitennavigation */
    #subnav {
        font-size: 16px;
        line-height: 1.4;
    }

    /* Zusatzspalte */
    #margin,
    #insel_left {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Tabellen und Formulare */
    td, th,
    input, select, textarea {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Bildunterschriften */
    .bild {
        font-size: 0.9em;
    }
	
}

/* ========================================
   MOBILE: insel_left NACH content
   HTML bleibt unverändert
   ======================================== */

@media screen and (max-width: 1023px) {

    /* Seitenbereiche flexibel anordnen */
    body {
        display: flex;
        flex-direction: column;
    }
    body>img{
		margin-left: 0px !important;
		width: 100%;
	}
    /* Navigation bleibt oben */
    #header {
        order: 1;
    }

    #headnavstart,
    #headnav,
    #globalnav {
		margin-top:10px;
        order: 2;
    }
    #globalnav {
		margin-top:10px;
	}
    /* Hauptinhalt zuerst */
    #content {
        order: 10;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding: 16px;
    }

    /* Linker Inhalt danach */
    #subnav {
        order: 10;
        position: relative;
        top: auto;
        left: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
		margin-top:10px;
    }

    #insel_left {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 16px;
        background-color: #E2E2E2;
/*        border-top: 2px solid #B4443E;*/
        font-size: 16px;
        line-height: 1.6;
    }

    #insel_left a {
        margin-top: 0;
    }

    /* Fußbereich */
    #bottom {
        order: 20;
    }
	UL LI {
		margin-bottom: 0px; 
	}
	#subnav ul a{
		margin-right:1px;
	}

}