/* Wir speichern die Farben in Variablen, um sie für das dark-mode überschreiben zu können */
:root {
    --farbe-markierter-text:yellow;
    --farbe-meldung:lightgray;
    --farbe-meldung-titel:silver;
    --farbe-chat-meldende:lightblue;
    --farbe-chat-meldende-titel:lightskyblue;
    --farbe-chat-team:lightgray;
    --farbe-chat-team-titel:silver;
    --farbe-hintergrund:whitesmoke;
    --farbe-text:black;
    --farbe-link:#0000EE;
    --farbe-link-besucht:#551A8B;
}

/* Farben für dark-mode */
@media (prefers-color-scheme: dark) {
    :root {
        --farbe-markierter-text:#5F5F00FF;
        --farbe-meldung:#535353FF;
        --farbe-meldung-titel:#404040FF;
        --farbe-chat-meldende:#2D5866FF;
        --farbe-chat-meldende-titel:#074E7AFF;
        --farbe-chat-team:#535353FF;
        --farbe-chat-team-titel:#404040FF;
        --farbe-hintergrund:#121212;
        --farbe-text:#eee;
        --farbe-link:#A0Afff;
        --farbe-link-besucht:#B58AFB;
    }
}

/* Browser-Voreinstellungen ignorieren */
/* Sollte noch auf das was wirklich zurückgesetzt werden muss reduziert werden */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:none; }
table { border-collapse:collapse; border-spacing:0; }

/* Design-Vorgaben */
body { font-family:sans-serif; font-size:1.0em; background-color:var(--farbe-hintergrund); color:var(--farbe-text); }
input,textarea { font-family:sans-serif; font-size:0.92em; }
#main-content { text-align:left; width:100%; margin:0 auto; padding-top:1em; padding-bottom:0.75em; }
h1 { font-size:1.5em; line-height:1.3em; margin-bottom:0.5em;  font-weight:bold; word-wrap:break-word; }
h2 { font-size:1.1em; line-height:1.2em; margin-bottom:0.25em; font-weight:bold; word-wrap:break-word; }
h3 { font-size:1.0em; line-height:1.1em; margin-bottom:0.1em;  font-weight:bold; word-wrap:break-word; }
/* Es ist in html verboten p tags innerhalb von labels zu setzen. Deshalb span der Klasse p-like als Abhilfe) */
p, .p-like { font-size:1.0em; line-height:1.2em; margin-bottom:1.5em; }
p.footer { font-size:0.8em; }
button { background-color:grey; color:white; padding:0.3em 0.5em; height:3.6em; }
span { /*display:inline-block;*/ word-wrap:break-word; }
span.markiert { background-color:var(--farbe-markierter-text); }
a { color:var(--farbe-link); }
a:visited { color:var(--farbe-link-besucht); }

/* Bilder Einstellungen */
img.at { height:1em; vertical-align:middle; }
.logo { display:inline-block; max-width:250px; max-height:50px; margin-bottom:1em; float:right; }

/* Spezielle Fonts */
.font-normal  { font-style: normal; font-weight:normal; }
.font-erfolg  { color:green; }
.font-fehler  { color:red; }
.font-status-abgeschlossen { color:green; }
.font-status-offen         { color:blue; }
.font-status-anderer       { color:red; }

/* Spezielle Schriftfelder */
/* hinweis-eingabe wird verwendet von JS-Funktion um verbleibende Zeichen anzuzeigen */
.hinweis-eingabe { position: absolute!important; color:rgb(128,128,128); font-size:small;  }
.hinweis-titel   { margin-bottom:0.5em; color:rgb(128,128,128); font-size:small; }

/* Hilfsklassen für Positionierung und Abstände */
.eingerueckt    { margin-left:2em; }
/* clear:both stellt sicher, dass ein Element die volle Breite einnimmt, wenn darüber z.B. Elemente mit
   unterschiedlichen float Einstellungen stehen. Z.B. eins mit float:left und eins mit float:right.
   Alternative: .clearfix::after { content: ""; clear: both; display: table; } */
.neue-zeile     { clear:both; }
.nach-rechts    { float:right; }
.label-rechts   { width:40%!important; float:right!important; }
.volle-breite   { width:100% }
.wenig-abstand  { margin-top: 0.5em; }
.abstand        { margin-top: 1.0em; }
.viel-abstand   { margin-top: 1.5em; }

/* Klassen für Positionierung und Abstände bestimmter Elemente */
.token-container  { margin-top:0.25em; margin-bottom:0.25em; }
.pw-switch-button { float:right; width:fit-content!important; margin-top:0!important; margin-right:5px; }

/* Standardklasse für Formulare in denen für jedes Formularfeld links daneben das Label stehen soll.
   In der mobilen Version wird umgebrochen, also das Label über dem entsprechenden Formularfeld angezeigt.
   (siehe weiter unten) */
form.label-links > label { display:flex; flex-wrap:nowrap; width:100%; margin-top:1em }
form.label-links > label :nth-child(odd)  { width:40%; }
form.label-links > label :nth-child(even) { width:60%; }
form.label-links button { width:100%; margin-top:1em; }

/* Die Klasse für die beiden Knöpfe auf der Startseite. Sie sollen nebeneinander stehen, über die voll Breite. */
.partner-button-container > form:nth-child(odd)           { width:50%; margin-top:0.5em; float:left; display:inline-block;  }
.partner-button-container > form:nth-child(even)          { width:50%; margin-top:0.5em; float:right; }
.partner-button-container > form:nth-child(odd)  > button { width:100%; }
.partner-button-container > form:nth-child(even) > button { width:100%; }

/* Die Klasse für die Container der Meldungen in der Listenansicht unter /team. */
.meldung-container { box-sizing:border-box; display:flex; flex-wrap:wrap; width:100%; background:var(--farbe-meldung); margin-bottom:1em }
.meldung-container > :nth-child(3n + 1) { width:100%; padding:1em; background:var(--farbe-meldung-titel); }
.meldung-container > :nth-child(3n + 2) { width:75%; padding:1em; }
.meldung-container > :nth-child(3n + 3) { width:calc(25% - 2em); margin:auto; horiz-align:right; }

/* Die Klassen für die Darstellung des Nachrichtenverlaufs einer Meldung. */
.chat-text { word-wrap:break-word; white-space:pre-wrap; margin-bottom:0; }
.chat-meldende-person { box-sizing:border-box; margin-bottom:1em; background:var(--farbe-chat-meldende); margin-right:2em }
.chat-meldende-person > * { padding:1em; }
.chat-meldende-person > :nth-child(odd) { background:var(--farbe-chat-meldende-titel); }
.chat-team { box-sizing:border-box; margin-bottom:1em; background:var(--farbe-chat-team); margin-left:2em }
.chat-team > * { padding:1em; }
.chat-team > :nth-child(odd) { background:var(--farbe-chat-team-titel); }
.chat-system { box-sizing:border-box; margin-bottom:1em; margin-left:2em; margin-right:2em; font-style: italic; }

/* Haben wir weniger als 600px Breite zur Verfügung brechen wir viele Ansichten um.
   Die meisten Elemente erstrecken sich dann über 100% der verfügbaren Breite. */
@media all and ( min-width:600px ) {
  div#main-content { max-width:600px; }
}
@media all and ( max-width:600px ) {
    #main-content { width:92%; max-width:92%; }

    .label-rechts { width:100%!important; float:left!important; }

    form.label-links > label { flex-wrap:wrap; }
    form.label-links > label :nth-child(odd) { width:100%; margin-bottom:0.5em; }
    form.label-links > label :nth-child(even) { width:100%; }

    .partner-button-container > form:nth-child(odd)           { width:100%; }
    .partner-button-container > form:nth-child(even)          { width:100%; }
    .partner-button-container > form:nth-child(odd)  > button { width:100%; }
    .partner-button-container > form:nth-child(even) > button { width:100%; }

    .meldung-container :nth-child(3n + 2), .meldung-container :nth-child(3n + 3) { width:100%; }
    .meldung-container > :nth-child(3n + 3) { margin-bottom:0.5em; }
}