/* --------------------------------------------------------------
CSS: "css/design.css" für Thilo Niepel Sprachdienstleistungen
Gültig für sämtliche Seiten zur Anzeige am Desktop-PC
A C H T U N G ! ! !
Änderungen können Auswirkungen auf diverse andere Elemente haben!
-----------------------------------------------------------------
Coporate Identity: F A R B C O D E S
------------------------------------
Blau:       #002366     (Schwarz: #000000)
Grün:      #36C86C     (Weiss  : #FFFFFF)
-------------------------------------------------------------- */

/* 2021 Edit */

img.logo {
    width: 400px;
    padding: 25px;
    margin: 25px auto;
}

/* --------------------------
Grundsätzliche Formatierungen
-------------------------- */

* { padding: 0; margin: 0; } /* Abstände annullieren */
body {
    font-size: 109%;
    line-height: 150%;
    margin-top: 80px; /* Abstand wegen des Hauptmenüs und der Sprungmarken */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
address {
    font-style: normal;
    font-size: 80%;
    line-height: 150%;
    }

/* ----------------------------------
Absätze und Überschriften und Tabelle
---------------------------------- */

/* p { Schriftgröße und Zeilenhöhe wird generell unter body gesteuert!
    } */
h1 { /* Titel der Website: H1 nicht wieder benutzen! */
    text-align: center;
    letter-spacing: 0.3rem;
    font-style: italic;
    font-weight: bold;
    font-size: 250%;
    color: #002366;
    margin: 40px 0 10px 0;
    }
h2 { /* Generelle Überschriften zum Thema */
    font-size: 170%;
    font-weight: bold;
    color: #002366;
    padding: 25px 0 15px 0;
    }
    h2:after { /* Damit das Häkchen hinter der Überschrift steht */
        background-image: url('../grafiken/checkmark.png');
        background-size: 1.5rem 1.5rem;
        background-repeat: no-repeat;
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        content: "";
        }
h3 { /* Überschriften innerhalb eines Themas, ohne Häkchen */
    font-size: 120%;
    font-weight: bold;
    color: #002366;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    }
h4 { /* Überschriften innerhalb eines Themas, ohne Häkchen */
    font-size: 100%;
    font-weight: bold;
    color: #002366;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    }
table { /* Tabelleneinstellungen */
    table-layout: fixed;
    width: 100%;
    line-height: 150%;
    margin-left: 0;
    margin-top: 1.6rem;
    }
    tr {
    vertical-align: top;
    }
    td.tabellenzelle1 {
    width: 17%;
    }
    td.tabellenzelle2 {
    width: 83%;
    padding-left: 15px;
    padding-bottom: 7px;
    }


/* -------
Hyperlinks
------- */

a { /* Link-Gestaltung generell */
    color: #002366; /* Farbe CI-Grün */
    text-decoration: underline; /* Unterstreichung */
    }
        a.extern { /* Links zu externen Websites u.ä. */
            background: url(../grafiken/link.png); /* Symbol für Links, die von der Website wegführen */
            background-repeat: no-repeat;
            background-position: right; /* Position des Symbols (Padding in folgender Zeile abgleichen!!!)*/
            padding-right: 15px; /* Abstand des Symbols zum Text des Links */
            content: ""; /* Leer lassen! */
            }
    a:hover { /* Linkverhalten bei Mouse-Over/Hovering */
        color: #03C86C; /* Schriftfarbe: CI-Grün */
        text-decoration: none; /* Unterstreichungsoption: "underline" oder "none" */
        }


/* -------------------
Darstellung von Listen
------------------- */

ul { /* Keine Listenpunktsymbole, Zeilenhöhe wie Absatz */
    list-style-type: none;
    list-style-position: outside;
    line-height: 150%
    }
ol { /* Geordnete Listen */
    list-style-position: inside;
    margin-bottom: 10px;
    line-height: 150%;
    }
ul.text { /* Listenpunkte mit längeren Inhalten */
    margin: 0;
    list-style-image: none;
    }


/* CI-Liste mit Checkmark-Häkchen */

ul.liste {
list-style-type: disc;
list-style-position: inside;
margin-bottom: 10px;
line-height: 150%;
}
ul.checkmark {
    margin: 20px 0px;
    }
    ul.checkmark li {
      list-style-image: url(../grafiken/checkmark_small.png);
      list-style-position: outside;
      list-style-type: none;
      margin-left: 30px;
      }
        ul.checkmark li ul li {
            list-style-image: none;
            list-style-type: none;
            margin-left: 0;
            }
ul.nest {
margin-left: 20px;
}
    ul.checkmark li ul li {
        list-style-image: inherit;
        }




/* ---------------------- 
Spezielle IDs und Klassen
---------------------- */

/* [ A B   H I E R ! ] !!! FINGER WEG !!! */

    .aktiv { /* Hauptmenü-Status auf Impressum.html */
        background-color: #03C86C;
        color: #FFFFFF;
        }
    div.wrapper { /* Zentraler Inhalt der Website, zentriert */
        background-color: #FFFFFF;
        min-width: 500px;
        width: 75%;
        max-width: 720px;
        margin: 0px auto 0 auto;
        }
                div#menu {
                    position: fixed;
                    top: 0;
                    width: 100%;
                    height: 40px;
                    background-color: #002366;
                    }
                        ul.wrapper {
                            width: 720px;
                            margin: 0 auto;
                            }
                        ul.wrapped li {
                            float:left;
                            list-style-type:none;
                            }
                            ul.wrapped li a {
                                font-size: small;
                                font-weight: bold;
                                display: block;
                                color: white;
                                text-align: center;
                                padding: 7px 0;
                                text-decoration: none;
                                }
                                ul.wrapped li a:hover {
                                    color: #FFFFFF;
                                    background-color: #36C86C;
                                    }

/* !!! FINGER WEG !!! [ B I S   H I E R ! ] */

/* Sonderklassen */

    .intern { /* Etwas rot anzeigen lassen */
        color: red;
        }
    .intern:before { /* "Interner Vermerk: " vor dem rot angezeigten Text */
        font-weight: bold;
        content: "Interner Vermerk: ";
        }
    span.rechtsvermerk { /* Urheberrechtszeile im Footer */
        color: #FFFFFF;
        font-size: smaller;
        line-height: 200%;
        }
    .sprungmarken-padding-top { /* Allen Überschriften mit Sprungmarkenabsicht zuweisen! ( W I C H T I G ! ) */
        padding-top: 50px;
        }
    .zentriert { /* Textelemente vertikal zentrieren */
        display: block;
        text-align: center;
        }
    .abstand { /* Sonderabstand im Logobereich */
        margin-bottom: 50px;
        }
    p.tnline { /* Zeilen direkt unter dem Logo "Thilo Niepel, Sprachdienstleistungen" */
        font-size: 150%;
        margin-top: 15px;
        font-weight: bold;
        color: #002366;
        line-height: 120%;
        }
    p.tnservice { /* Zeile unter p.tnline, "Lektorat | Redaktion ..." (Pre-Site) */
        font-weight: bold;
        color: #03C86C;
        margin-top: 10px;
        }
    p.marker { /* Markiert den gesamten Absatz mit gelbem Marker */
        font-weight: bold;
        background-color: yellow;
        }



/* Sonderformate für Impressum (Presite!) */

    p.anschriftenzeile { /* Zeile unterhalb des Logos und des Namens: Name | Anschrift | E-Mail */
        font-size: 109%;
        font-weight: normal;
        color: #002366;
        margin-top: 0;
        line-height: 100%;
        }
    p.hinweis { /* Zeile mit dem Hinweis auf das Urheberrecht, ganz unten */
        font-size: small;
        color: #000000;
        margin-top: 15px;
        } /* ----OBSOLET---- */


/* WORTMANN KOMMUNIKATIONSDESIGN "Stempel" */

    div.wkd_div {
        display: inline-block;
        height: 80px;
        width: 350px;
        background-color: #F3F3F3;
        border: 1px solid silver;
        padding: 10px;
        margin: 80px 0 0 0;
        line-height: normal;
        }
    div.wkd_div img {
        float: left;
        display: inline;
        margin-right: 10px;
        vertical-align: middle;
        }
    div.wkd_div p {
        font-size: small;
        color: #01a9ff;
        }
    span.underline {
        text-decoration: underline;
        }


/* ------------------------------
F U S S Z E I L E N B E R E I C H
------------------------------ */

#footer {
    height: 150px;
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 5px;
    }
#footer2 {
    height: 100px;
    width:100%;
    background-color: #002366;
    vertical-align: bottom;
    margin-top: 50px;
    padding-bottom: 50px;
    padding-top: 10px;
    }
.footerdiv {
    float: left;
    width: 300px;
    color: #FFFFFF;
    }
    .footerdiv p {
        font-size: 75%;
        line-height: 120%;
        }
        .footerdiv p a {
            color: #FFFFFF;
            }
            .footerdiv p a:hover {
                color: #03C86C;
                }
.footerdiv2 {
    float: right;
    width: 200px;
    color: #FFFFFF;
    }
    .footerdiv2 p {
        font-size: 75%;
        line-height: 120%;
        }
        .footerdiv2 p a {
            color: #FFFFFF;
            }
            .footerdiv2 p a:hover {
                color: #03C86C;
                }

/* ^ DO NOT CHANGE ANYTHING ABOVE THIS LINE ^ */




	/* ################################
	C L I E N T - B A S E D   E D I T S                                ! ! !  --- H I E R ---  ! ! !
	################################ */


/* Fließtext im Impressum in der Größe anpassen */
.textanpassung {
	font-size: 90%; /* Schriftgröße (basiert auf der Einstellung von p) */
    line-height: inherit; /* Zeilenhöhe (statt % auch "inherit"; übernimmt die Grundeinstellung von p)*/
	}
.textsmaller {
    font-size: 80%;
    line-height: 150%;
}
img.social {
    width: 20px;
    margin: 5px 5px 0 0;
    }
 /* Umschalter der Sprachversionen */
div#language {
    visibility: hidden; 
    font-size: 0.6em;
    position: fixed;
    background-color: white;
    z-index: 500;
    top: 40px;
    left: 5px;
    padding: 5px;
    line-height: normal;
}
div#language a { /* Link-Verhalten des Umschalters */
    color: white;
    font-weight: bold;
    text-decoration: none;
    color: #002366;
}
div#language a:hover {
    color: #03C86C;
}
<!-- eigene größte Kacke aller Zeiten! -->
a#normalfont {
     font-weight: 400;
}