body {
    padding: 0px;
    margin: 0px;
    font-family: 'Consolas', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Monaco', 'Courier New', 'monospace';
    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 */
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-orange { background-color: #fbe0c4; text-align: center; }
#navigation.navigation-gruen:hover { background-color: #c3e9c3; }
#navigation.navigation-gelb:hover  { background-color: #f5e6a0; }
#navigation.navigation-orange:hover { background-color: #f6cd9f; }

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;
}

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;
}

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; }

/* Blassroter Button fuer vorsichtige/destruktive Aktionen (Loeschen mit Haken-Bestaetigung).
   Aktiv erst NACH allen Haken - bis dahin bleibt der Button ueber das native disabled-Attribut
   ausgegraut (siehe input:disabled oben), das JS auf der jeweiligen Seite schaltet per
   classList.toggle('btn-blassrot', ...) frei. */
input.btn-blassrot,
button.btn-blassrot {
    background-color: #fdeaea;
    color: #c0392b;
}
input.btn-blassrot:hover,
button.btn-blassrot:hover {
    background-color: #fad2d2;
}

/* Zebra-Streifen fuer ALLE Tabellen in der Anwendung */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Kleine Reihenfolge-Pfeile (z.B. Favoritenliste) */
button.btn-pfeil {
    background-color: #e0dddd;
    color: #323232;
    font-weight: normal;
    padding: 2px 8px;
    font-size: 13px;
}
button.btn-pfeil:hover { background-color: #cfcaca; }
button.btn-pfeil:disabled { background-color: #f0f0f0; color: #bbb; cursor: default; }

.wrapper textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.break-word {
    overflow-wrap: anywhere;
}
pre {
    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;
}

/* Zentrierte Dashboard-Kacheln - eigene, wiederverwendbare Box statt einmaligem Inline-CSS, da
   mehrere Seiten sie nutzen. */
.dashboard-box {
    max-width: 460px;
    margin: 20px auto;
    background-color: rgb(240, 240, 240);
    border: 1px solid rgb(70, 70, 70);
    border-radius: 10px;
    padding: 16px 24px;
    text-align: center;
}
.dashboard-box h2, .dashboard-box h3 { margin-top: 0; }
.dashboard-box ul { list-style: none; padding: 0; margin: 0 0 10px 0; text-align: left; }
.dashboard-box li { margin-bottom: 8px; }
/* Modifikator fuer Kacheln mit laengerem Fliesstext, wo zentrierter Text schlecht lesbar waere. */
.dashboard-box.links { text-align: left; max-width: 660px; }
/* Kleine graue Nebeninfo-Zeile. */
.meta { font-size: 13px; color: #666; }
.dashboard-box form p { text-align: left; }

/* Eigene Board-Liste im Dashboard sowie Favoritenliste (index.php, board_favoriten.php) */
.board-liste-zeile {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.board-liste-zeile:last-child { border-bottom: none; }
.board-liste-zeile .board-titel { font-weight: bold; }
.board-liste-zeile .board-aktionen { font-size: 13px; margin-top: 4px; }
.board-liste-zeile .board-aktionen a, .board-liste-zeile .board-aktionen button.mini-link { margin-right: 12px; }

/* Unauffaelliger Link-Button innerhalb eines <form> (z.B. "Favorit entfernen") */
button.mini-link {
    background: none;
    border: none;
    color: #00F;
    font-weight: normal;
    font-size: 13px;
    padding: 0;
    cursor: pointer;
}
button.mini-link:hover { text-decoration: underline; background: none; }

/* Einzelner Beitrag auf board_ansehen.php */
.board-eintrag {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
}
/* Eigene Beiträge auf board_ansehen.php blassgrün hervorheben, damit man sie auf einem
   fremden Board schnell wiederfindet. */
.board-eintrag-eigen {
    background-color: #dcf3dc;
}
/* Meldungen im Posteingang blassrot hervorheben (posteingang.php, typ='meldung') */
.board-eintrag-meldung {
    background-color: #f6c9c9;
}
.board-eintrag-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 6px;
    font-size: 15px;
}
.board-eintrag-links {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 14px;
}
.board-eintrag-links li { margin-bottom: 4px; }

/* Adressbuch: vertraute Kontakte blassgrün hinterlegt (nachricht_spam.php-Vertrauens-Haken) */
.vertraut {
    background-color: #dcf3dc;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Generische blasse Hintergrund-Pillen (z. B. Aktionslinks in board_ansehen.php) */
.hintergrund-gruen {
    background-color: #dcf3dc;
    padding: 1px 6px;
    border-radius: 4px;
}
.hintergrund-rot {
    background-color: #f6c9c9;
    padding: 1px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   Mobile-Ansicht (23.08.2026 (28)) - AUSKOMMENTIERT (23.08.2026 (29), Nutzerwunsch:
   "gefaellt mir nicht wirklich", moechte stattdessen erstmal nur den erweiterten
   Viewport-Zoom testen, siehe _head.php maximum-scale=5.0). Block bewusst nur
   auskommentiert, nicht geloescht, damit er bei Bedarf wieder aktiviert werden kann.

   #center ist bewusst dauerhaft fest auf 1040px ausgelegt (kein fluides
   Zwischenformat) - der Breakpoint liegt daher knapp darueber, damit ALLES darunter
   (Handy UND Tablet) auf die gestapelte Ansicht wechseln wuerde, statt in einem
   unschoenen "zu schmal fuer zwei Spalten, zu breit fuer einen Handy-Breakpoint"-
   Zwischenzustand haengenzubleiben. Rein CSS, keine Markup-Aenderung noetig
   (Ausnahme: table.board-aktionen-tabelle in board_ansehen.php, siehe unten).

@media (max-width: 1060px) {
    #center {
        width: auto;
        margin: 5px 8px;
    }
    #nav {
        float: none;
        width: auto;
        margin-bottom: 10px;
    }
    #inhaltfenster {
        float: none;
        width: auto;
        box-sizing: border-box;
        padding: 14px 16px;
    }
    #navigation {
        margin-right: 0;
    }

    Tabellen (Board-Details, Favoriten, Rechtsseiten-Tabellen wie
    unterauftragsverarbeiter.php, ...) duerfen auf schmalen Bildschirmen
    horizontal scrollen statt die ganze Seite zu sprengen - display:block
    loest beim <table>-Element ein "Table-Fixup" aus, die Zellen werden
    intern weiterhin wie eine echte Tabelle gerendert (Zebra-Streifen
    bleibt erhalten).
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    Ausnahme: die reine Layout-Tabelle in board_ansehen.php (einzelne Zelle mit
    rechtsbuendigen Aktionslinks per <br> getrennt, keine echten Tabellendaten) -
    display:block+overflow-x:auto ergab hier durch einen Chrome-Rendering-Effekt
    eine faelschlich auf ca. 90px begrenzte Hoehe mit abgeschnittenem Inhalt
    (reproduziert, kein Fehler in der Logik selbst). Fuer diese eine Tabelle bleibt
    daher die normale Tabellen-Darstellung erhalten.
    table.board-aktionen-tabelle {
        display: table;
        overflow: visible;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        max-width: 100%;
    }
}
   ========================================================================== */