/* ---------------------------------------------------------
    0. Grundeinstellungen Farben
   --------------------------------------------------------- */

:root {
    --theme-main-color: #2a70e8; /* MedLexi: #2a70e8, Gesundpedia: #79a813 */
}

/* ---------------------------------------------------------
    1. Dokumentstruktur und Aufbau - html, body
   --------------------------------------------------------- */

body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #444;
    background-color: #f3f3f3; /* #e9eaed */
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------
    2. Kopfbereich, Header, Navigation, Burger, Logo, Suche - header, nav
   --------------------------------------------------------- */

.header {
    z-index: 5000; /* 99999999999999 */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: #f3f3f3;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 44px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 50px;
}

.medlexi-logo {
    float: left;
    height: 35px;
    padding-top: 5px;
    margin-left: 40px; /* 15% */
}

nav:not(.mm-menu) {
    display: none;
}

/* Eigene Spezifikationen für FontAwesome Icons */
.fa-icon {
    margin-right: 10px;
    color: var(--theme-main-color);
}

.suche-los-button-menu {
    top: 0;
    right: 0;
    margin-left: -30px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: var(--theme-main-color);
    height: 30.8px;
    padding: 0px 10px;
    outline: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: block;
}

/* Menupunkte beim Mausover und Anklicken farblich verändern */
.mm-listitem:hover {
    background-color: #e7e7e7;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

.mm-listitem:active {
    background: #c9c9c9;
}

/* Auf iOS-Geräten wurde der Placeholder Text vom Inputfeld zu weit unten dargestellt - und daher auf normal gestellt */
.mm-searchfield__input {
    line-height: normal;
}

/* Farbe vom Burger-Menu */
.mburger, a.mburger, a.mburger:hover {
    color: var(--theme-main-color);
}

/* Animation für Burger-Menu war unsichtbar zu weit rechts - hiermit transparent unter das Burger-Icon gesetzt */
.mburger.mburger--spin {
    float: left;
    margin-left: -50px;
}

/* Suche im Header nur auf iPads und größer sichtbar */
.header-searchfield {
    width: 400px;
    float: right;
    margin-right: -45px;
    font-size: 0.9em;
}

/* Lupen-Icon im Header nur auf Smartphones sichtbar */
.lupe-icon-rechts {
    color: #444;
    float: right;
    margin-top: 16px;
    margin-right: -35px;

    display: none !important; /* Lupe nicht sichtbar auf größeren Geräten */
}

/* ---------------------------------------------------------
    3. Hauptbereich - Wrapper, Main, Artikel - wrapper, main, article
   --------------------------------------------------------- */

#wrapper {
    max-width: 1460px; /* 1200px */

    /* Version 3 - Wrapper und damit Hauptinhalt leicht nach oben gerückt, um noch mehr Content sofort sichtbar zu machen */
    margin: 0.6em auto; /* 1em auto; */
 }

main {
    float: left;
    width: 840px; /* 70% */
}

article {
    font-size: 1.1em; /* alt 1.08em */
    line-height: 1.7em; /* alt 1.5em*/

    margin-left: 0.25em;
    margin-right: 0.5em;

    /* Version 3 - Abstände des Haupttextes zu Außenkanten etwas verkleinert */
    padding-left: 20px; /* 1.5em; */
    padding-right: 20px; /* 1.5em; */
    padding-bottom: 20px; /* 1.5em; */

    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #fff;
    border-color: #e9eaed #dfe0e4 #d0d1d5;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;

    /* Blocksatz mit automatischer Silbentrennung */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4;
}

/* Aufzählungen im Artikel linksbündig, Blocksatz deaktiviert */
article ul {
    text-align: left;
}

/* ---------------------------------------------------------
    3.1. Links allgemein
   --------------------------------------------------------- */

:link {
    color: var(--theme-main-color); /* #1a0dab */
    text-decoration: none;
}
:visited { color: var(--theme-main-color); }
:link:hover, :visited:hover {
    color: var(--theme-main-color);
    text-decoration: underline;
}

:link:active, :link:active { color: var(--theme-main-color); }

/* ---------------------------------------------------------
    3.2. Überschriften
   --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {

    /* Version 3 - geringerer Abstand der Überschrift nach oben, besonders für h1 */
    margin: 15px 0 0.2em 0; /* 1em 0 0.2em 0; */
    border-bottom: 1px solid #ccc;

    padding-bottom: 0.17em;

    /* Überschriften nicht im Blocksatz und ohne Silbentrennung - besonders wichtig bei langen überschriften*/
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

h1 { font-size: 160%; font-weight: normal; }
h2 { font-size: 150%; font-weight: normal; }
h3 { font-size: 120%; }
h4 { font-size: 100%; }
h5 { font-size: 90%; }
h6 { font-size: 90%; border: 0; }

/* Linien unter Überschriften im Artikel */
hr {
	border-bottom: 1px solid #e0e0e0;
    margin: 2em 0;
}

:target {
    scroll-margin-top: 55px;
}

/* ---------------------------------------------------------
    3.3. Inhaltsverzeichnis
   --------------------------------------------------------- */

/* Dummy-div für Inhaltsverzeichnis als linke Spalte */
#toc-aside {
    float: left;
    width: 300px;
    height: 1px;
}

/* Inhaltsverzeichnis linke Spalte auf gleiche Höhe anpassen, wie Überschrift vom Artikel */
#toc h2 {
    margin-top: 5px;
}

#toc {
    border:1px solid #cccccc;
    background-color: #f3f3f3;
    padding:5px;
	margin-top: 15px;
	margin-bottom: 15px;
    font-size: 1em;
    border-radius: 4px;
    width: 350px;
    position: fixed;
    top: 40px;
    left: auto;
    margin-left: -380px;

    /* Überschriften nicht im Blocksatz und ohne Silbentrennung - besonders wichtig bei langen überschriften*/
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

#toc .tocindent { margin-left: 2em; }
#toc .tocline { margin-bottom: 0px; }
#toc p { margin: 0 }
#toc .toctoggle { font-size: 94%; }
#toc .editsection {
    margin-top: 0.7em;
    font-size: 94%;
}

#toc ul {
    list-style-type: none;
    padding-left: 0.5em;
}

/* Links im Inhaltsverzeichnis nicht unterstrichen */
#toc a {
    text-decoration: none;
}

/* Links im Inhaltsverzeichnis beim hover im MedLexi-Blau */
#toc a:hover {
    color: var(--theme-main-color);
}

/* Links auf Ebene 1 im Inhaltsverzeichnis beim hover leicht grau kennzeichnen */
.toclevel-1:hover {
    background-color: #e7e7e7;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    text-decoration: none;
}

.toclevel-2 {
    padding-left: 1em;
}

/* Links auf Ebene 2 im Inhaltsverzeichnis beim hover leicht grau kennzeichnen */
.toclevel-2:hover {
    background-color: #e7e7e7;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    text-decoration: none;
}

.toclevel-3 {
    padding-left: 1.5em;
}

.toclevel-4 {
    padding-left: 2em;
}

/* ---------------------------------------------------------
    3.4. Bilder & Thumbnails
   --------------------------------------------------------- */

a img {
    border: 0;
}

.thumbimage {
    max-width: 100%;
	height: auto;
}

div.thumb {
    margin-bottom: 0.5em;
    border-style: solid; border-color: White;
    width: auto;
    max-width: 100%;

}

div.thumb div {
    border:1px solid #cccccc;
    padding: 3px !important;
    background-color:#FAFAFA;
    font-size: 94%;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
    /* box-shadow: 0 1px 3px rgba(0,0,0, 0.3); */
    max-width: 100%;

    /* linker Außenabstand zum Text vergrößert, war sonst zu eng */
    margin-left: 15px;
}

div.thumb div a img {
    border:1px solid #cccccc;
}

div.thumb div div.thumbcaption {
    border: none;
    text-align: left;
    line-height: 1.4em;
    padding: 0.3em 0 0.1em 0;
}

div.magnify {
    float: right;
    border: none !important;
    background: none !important;
}

div.magnify a, div.magnify img {
    display: block;
    border: none !important;
    background: none !important;
}

div.tright {
    clear: right;
    float: right;
    /* border-width: 0.5em 0 0.8em 1.4em; Rahmenbreite um Bild veraltet*/
}

div.tleft {
    float: left;
    margin-right:0.5em;
    /* border-width: 0.5em 1.4em 0.8em 0; Rahmenbreite um Bild veraltet*/
}

/* ---------------------------------------------------------
    3.5. Wikitable
   --------------------------------------------------------- */
table.wikitable {
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    margin: 1em 0.8em;
	border-radius: 4px;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
    text-align: center;

}
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td {
    padding: 0.2em 0.4em;
}

/* Aufzählungen in Tabelle linksbündiger */
table.wikitable ul {
    margin-left: -20px;
}

/* ---------------------------------------------------------
    3.6. Online Diagnose Check
   --------------------------------------------------------- */

   .check-control-box {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 15px;
      padding-right: 15px;
      background-color: #f3f3f3;
      border: 1px solid #cccccc;
      margin: 1em 0;
      border-radius: 4px;
      line-height: 1.5em;
      text-align: left;
    }

    .check-button {
      background-color: #2a70e8;
      color: white;
      border: none;
      padding: 10px 20px;
      margin-right: 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    @media screen and (max-width: 600px) {
    .check-button {
      font-size: 1.2em; /* Größere Buttons in mobiler Ansicht */
    }
  }
/* ---------------------------------------------------------
    3.7. Youtube-Einbindung
   --------------------------------------------------------- */
   .embed-container {
     width: 100%; /* oder ein spezifischer Prozentwert */
     overflow: hidden; /* Verhindert Überlauf, falls nötig */
   }

   .embed-container img {
     max-width: 100%;
     height: auto; /* Erhält das Seitenverhältnis des Bildes */
   }

   /* YouTube Hier klicken Button */
   .y-button {
       text-decoration: none;
       text-align: center;
       display: inline-block;
       /* width: 300px; */
       padding-top: 0px;
       padding-bottom: 0px;
	   margin-top: 10px;
       color: #fff;
       /* border: 1px solid #c5a65a; */
       border-radius: 30px;
       background-color: var(--theme-main-color);
   }

/* ---------------------------------------------------------
    3.8. Sonstige Formatierungen im Artikel
   --------------------------------------------------------- */

/* Kategorie der Seite unten - todo */
#catlinks {
    /*
    background-color: #f3f3f3;
    border: 1px solid #aaaaaa;
    clear: both;
    margin-top: 1em;
    padding: 3px 5px;
    border-radius: 4px;
    */
}

/* Krankheiten mit diesem Symptom */
.krankheiten_liste {
	float: left;
    width: 32%;
	max-width: 100%;

    /* keine Silbenumbrüche bei Aufzählung der Krankheiten und Symptome */
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* Medikamente unten und oben, Online Apotheke */
#medi_link {
	font-size: 1.2em;
	margin-top: 0.7em;

    /* keine Silbenumbrüche bei Medikamentenwerbung */
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

/* Quellen */
#qualitaetssicherung { /* veraltet: oben heisst das div nun "author", wird nur noch für quellen verwendet */
    font-size: 0.75em;
    margin-left: -20px;
}

/* Quality Control Box, letzte Aktualisierung, Qualitätssicherung */
.quality-control-box {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    margin: 1em 0;
    border-radius: 4px;
    line-height: 1.5em;
    text-align: left;
}

/* Dr. Nonnenmacher Bild in Qualitätskontrolle Box */
.quality-control-box img {
    float: right;
    padding-left: 20px;
    height: 90px;
    margin-top: 7px;
}

/* Amazon Partnerprogramm Button */
.a-button {
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 300px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    border: 1px solid #c5a65a;
    border-radius: 4px;
    background: linear-gradient(to bottom,#f7dfa5,#f0c14b);
}

/* ---------------------------------------------------------
    4. Seitenbereich rechts - aside
   --------------------------------------------------------- */

aside {
    float: left;

    /* gg. löschen
    width: 300px;
    height: 600px;
    background: #e7e7e7;
    */
}

/* AdSense rechts an der Seite */
#side-medium {
    margin-top: 1px;
}

/* Amazon rechts an der Seite unter AdSense */
#side-amazon {
    margin-top: 5px;
}

/* ---------------------------------------------------------
    5. Fußbereich unten - footer
   --------------------------------------------------------- */

footer {
    clear: left;
    /* margin-left: 305px; */
    margin-bottom: 20px;
    margin-right: 44px;
}


#footer-inline-container {
    /* position: absolute; */
    margin-top: 10px;
    margin-left: 5px;
    width: 100%; /* 796px */
    padding: 15px;
    background-color: var(--theme-main-color);
    color: #fff;
    border-radius: 4px;
}

/* Linkfarbe im Footer */
#footer-inline-container a {
    color: #fff;
}

#ueber-uns {
    /* Blocksatz mit automatischer Silbentrennung */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-chars: auto 3;
    -webkit-hyphenate-limit-lines: 4;
    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: auto 3;
    -ms-hyphenate-limit-lines: 4;
}

.footer-headline {
    font-size: 26px;
}

#medlexi-logo-white {
    float: right; height: 35px;
}

#legal-information {
    margin-top: 20px;
}

.printfooter {
        display: none;
}

/* ---------------------------------------------------------
   6. Startseite
   --------------------------------------------------------- */

/* Startseite Version 3 */

.flex-box-wrapper a:hover {
    text-decoration: none;
}

.flex-box {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1.2vh;
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.flex-box-f2f2f2 {
    background: #f2f2f2;
}

.flex-box-icon {
    font-size: 6vh;
    margin-bottom: 3vh;
}

.flex-box-headline {
    color: #444;
    font-size: 4vh;
}

.flex-box-weiter {
    margin-top: 3vh;
}

a .flex-box-weiter:hover {
    text-decoration: underline !important;
}

/* ehemaliger Download-Button, jetzt nur noch auf Startseite aktiv, kann treffender umbenannt werden */
a.btn-download {
    display:inline-block;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #ffffff;
    /* font-size: 20px; */
    background: #246ceb;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    transition: all 0.2s;
}

a.btn-download:hover {
    color: #ffffff;
    background: #2679ff;
    text-decoration: none;
}


/* ---------------------------------------------------------
    7. Kategorie-Übersichtsseiten
   ---------------------------------------------------------*/

/* Liste der Artikel in Kategorie-Übersichten linksbündig, Blocksatz deaktiviert */
.table-wrapper {
    text-align: left;
}

/* Alphabetische Suche nach Buchstaben in den Kategorie-Übersichten - ehemals .abisz */
.kategorie-alphabet {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.kategorie-buchstabe {
    height: 50px;
    width: 50px;
    background-color: #f3f3f3;
    font-size: 2.5vh;
    text-align: center;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0.5vh;
}

a:hover .kategorie-buchstabe {
    text-decoration: none;
    background-color: var(--theme-main-color);
    color: #fff;
}

/* zwei Spalten bei den Kategorie-Übersichten und eine repsonsive, Artislab */
.catCol {
    width: 50%;
    display: inline-block;
}
.col0 { float: left; }


/* ---------------------------------------------------------
    8. Responsive & Mobile
   ---------------------------------------------------------*/


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

    /* Werbung rechts deaktivieren */
    aside {
        display: none;
    }
}

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

    /* Inhaltsverzeichnis wieder zurück in den Artikel */
    #toc {
        /* TEST-TOC */
        width: 100%;
        position: unset;
        top: unset;
        left: unset;
        margin-left: unset;
    }

    #toc h2 {
        margin-top: unset;
    }

    footer {
        margin-right: 40px;
    }
}

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

    /* Artikel rutscht leicht nach oben, um dichter am Header zu sein, sodass mehr Content gleich sichtbar ist */
    main {
        width: 100%;
        margin-top: -12px;
    }

    /* rechter Außenabstand anpassen auf gleichen Abstand wie links */
    article {
        margin-right: 0.25em;
    }

}

/* Alle Geräte kleiner als iPad & Co., wie alle gängigen Smartphones Stand 2020 */
@media screen and (max-width: 750px) {

    /* Lupen-Icon im Header nur auf Smartphones sichtbar */
    .lupe-icon-rechts {
        display: unset !important; /* - display: none; - wird zurück gesetzt */
    }

    /* Suche im Header nur auf iPads und größer sichtbar */
    .header-searchfield {
        display: none;
    }

    /* Artikel rutscht leicht nach oben, um dichter am Header zu sein, sodass mehr Content gleich sichtbar ist */
    main {
        width: 100%;
        margin-top: -12px;
    }

    article {
        margin-left: 0;
        margin-right: 0;

        /* Abstände des Haupttextes zu Außenkanten etwas verkleinert */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* --- Überschriften im Artikel kleiner als Desktop --- */
	h1 { font-size: 140%; font-weight: normal; }
	h2 { font-size: 130%; font-weight: normal; }

    /* Außenabstand vom Bild zum Text verkleinern von Desktop-Version, um linksbündig zu sein */
    div.thumb div {
        margin-left: unset;
    }

    /* AdSense rechte Seite ausblenden */
    #side-medium {
		display: none;
    }

    /* Als Liste untereinander in einer Spalte die Krankheiten, Beite 100% für mehr Platz */
    .krankheiten_liste {
	   float: none;
       width: 100%;
	}

	/* Medikamente unten und oben, Online Apotheke */
	#medi_link {
	   font-size: 1.1em;
	}

    /* h1 Überschrift auf der Startseite fürs Handy etwas kleiner - sieht besser aus - Gesundpedia 18px, MedLexi 22px */
	.startseite-h1 {
		font-size: 22px;
	}

    /* ehemaliger Download-Button, jetzt nur noch auf Startseite aktiv, kann treffender umbenannt werden */
    a.btn-download {
  		display:block;
		padding: 0.2em auto;
        margin:0.2em auto;
		font-size: 0.65em;
	}

    /* Startseite Mobile */
	.card_start {
	   float: none;
        width: 100%;
	   padding-bottom: 15px;
	   margin-top: 36px;
    }

    /* Zwei Spalten bei den Kategorie-Übersichten und eine repsonsive, Artislab */
    .catCol {
        width: 100%;
        display: inline-block;
    }
	.col0 { float: none; }
	.col1 {
        position: relative;
        top:-30px;
    }
	.newCol { display: none; }
}

/* Alle Geräte ab/kleiner 320 Pixelbreite, wie iPhone 4/5, Galaxy Folder & JioPhone 2 */
@media screen and (max-width: 321px) {

    .medlexi-logo {
        padding-top: 7px;
        height: auto;
        max-width: 69%;
    }

}