body {
    padding: 0px;
    margin: 0px;
    font-family: 'Courier New', 'Liberation Mono', 'DejaVu Sans Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'monospace', 'Consolas', 'Andale Mono', 'Monaco';
    font-size: 14px;
    color: #323232;
    background-color: #e0dddd;
    overflow-y: scroll;
}
p, li {
    font-size: 16px;
    line-height: 120%;
}
h1 { font-size: 36px; margin: 0px; }
h2 { font-size: 24px; margin-top: 0px; }
h3 { font-size: 18px; }

#center {
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    width: 1040px;
    overflow: hidden; /* fasst die zwei nebeneinander schwebenden Spalten (nav + inhaltfenster) ein */
}
#nav { float: left; width: 225px; background-color: #e0dddd; text-align: left; }
#inhaltfenster {
    float: right;
    width: 775px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px;
    text-align: left;
    border-radius: 10px;
}
#inhaltfenster p, #inhaltfenster li { font-size: 16px; }

#navigation {
    margin-bottom: 10px;
    margin-right: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    text-align: left;
    border-radius: 10px;
}
#navigation li { list-style-type: none; font-size: 14px; }

/* Hervorhebung des Nav-Links der gerade geoeffneten Seite (siehe _inc_func.php::nav_li()) */
#navigation a.nav-aktiv {
    font-weight: bold;
    text-decoration: underline;
}

/* Grosse Klick-Flaechen im Nav: der GANZE Div ist der Link, nicht nur die Schrift - schneller
   zu treffen, wenn man zuegig arbeitet und nicht exakt zielt. */
a.nav-grossbutton {
    display: block;
    color: #323232;
    text-decoration: none;
}
#navigation.navigation-gruen { background-color: #dcf3dc; text-align: center; }
#navigation.navigation-gelb  { background-color: #faf1c7; text-align: center; }
#navigation.navigation-gruen:hover { background-color: #c3e9c3; }
#navigation.navigation-gelb:hover  { background-color: #f5e6a0; }

a:link, a:visited, a:active, a:hover, a:focus {
    color: #00F;
    text-decoration: none;
}
a img { border: none; }

.buttonedit {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
}

/* Text-/Auswahlfelder bekommen bewusst Mass und Rahmen aehnlich der Buttons, damit label,
   Feld und Button in derselben Zeile sauber auf gleicher Hoehe sitzen (vertical-align: middle
   unten sorgt fuer die eigentliche Ausrichtung). */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select {
    font-family: inherit;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Flat-Design-Buttons ueberall: kein Farbverlauf, kein Schatten, keine 3D-Umrandung */
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    display: inline-block;
    vertical-align: middle;
    background-color: #00F;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
label {
    vertical-align: middle;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover {
    background-color: #0000c0;
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled {
    background-color: #9a9ad6;
    cursor: default;
}

/* Fuer Links (<a>), die wie ein Flat-Button aussehen sollen, z.B. "Neuen Kunden hinzufügen"
   unter einem Suchergebnis */
a.btn-link {
    display: inline-block;
    background-color: #00F;
    color: #fff;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
}
a.btn-link:hover { background-color: #0000c0; }

/* Kleine Ansicht-Umschalt-Buttons (User/Firma/Standard/Full) - bewusst kompakter als die
   normalen Flat-Buttons oben, damit sie nicht groesser als die frueheren Text-Links wirken
   und eng nebeneinander Platz sparen. */
a.ansicht-link {
    display: inline-block;
    padding: 2px 7px;
    margin-right: 3px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: normal;
    color: #323232;
    text-decoration: none;
    vertical-align: middle;
}
a.ansicht-link:last-child { margin-right: 0; }
a.ansicht-link-user     { background-color: #dcf3dc; }
a.ansicht-link-firma    { background-color: #faf1c7; }
a.ansicht-link-standard { background-color: #d9e9fb; }
a.ansicht-link-full     { background-color: #e9dcf5; }
a.ansicht-link-user:hover     { background-color: #c3e9c3; }
a.ansicht-link-firma:hover    { background-color: #f5e6a0; }
a.ansicht-link-standard:hover { background-color: #bcdcf7; }
a.ansicht-link-full:hover     { background-color: #d8c0ec; }

/* Kundenlisten (Anrufliste, Suche, Papierkorb, Erledigt, Zuletzt geaendert, ...): passt
   immer in die Breite. ID/Rueckruf/Ansicht bekommen eine feste, schmale Breite, die
   Name/Firma-Spalte bekommt bewusst KEINE Breite und faengt daher den restlichen Platz auf. */
.kundenliste {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.kundenliste th.col-id, .kundenliste td.col-id { width: 50px; }
.kundenliste th.col-kollege, .kundenliste td.col-kollege { width: 150px; }
.kundenliste th.col-rueckruf, .kundenliste td.col-rueckruf { width: 140px; }
.kundenliste th.col-ansicht, .kundenliste td.col-ansicht { width: 225px; }

/* Zebra-Streifen fuer ALLE Tabellen in der Anwendung, damit man beim Lesen nicht in der
   Zeile verrutscht. */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

.wrapper textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.break-word {
    /* Bewusst NICHT word-break: break-all - das brach mitten im Wort/Satz um, wirkte komisch.
       overflow-wrap: anywhere bricht zuerst an Wortgrenzen (Leerzeichen) und nur im Notfall
       (ein einzelnes, zu langes Wort/eine URL ohne Leerzeichen) auch mittendrin. */
    overflow-wrap: anywhere;
}
pre {
    /* Browser-Standard fuer <pre> ist white-space: pre (kein Umbruch) - lange Zeilen (z.B.
       AV-Vertragstext) liefen dadurch aus dem umgebenden Div hinaus. pre-wrap erhaelt die
       vorhandenen Zeilenumbrueche/Leerzeichen des Texts, erlaubt aber zusaetzlich Umbruch am
       Div-Rand, bevorzugt an Wortgrenzen (siehe .break-word oben). */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
#form_log_reg {
    margin: auto;
    background-color: rgb(240, 240, 240);
    border-style: thin;
    border-color: rgb(70, 70, 70);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 4px 4px 10px 0px #000000;
}
.rot {
    color: #F00;
}
.gruen {
    color: #080;
}
.rueckruf-zukunft   { background-color: #eaf7ea; }
.rueckruf-heute     { background-color: #fdf8e3; }
.rueckruf-vergangen { background-color: #fbeaea; }