/* 
    Document   : cmsadmin
    Created on : 02.02.2012, 13:58:58
    Author     : halil
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

body {
     margin: 1px 1px 1px 1px;
     background-color: #F8F8F6;   /* 2026-08-22: war #F2F2F2 */
     font-size: 12px; font-family: Verdana, Arial, Geneva;
}
table, tr, td, select {
     font-size: 12px; font-family: Verdana, Arial, Geneva;
}
.titel { font-size:16px; font-family: Verdana, Arial, Geneva; color:#000000; border-bottom: 1px dashed #A4A4A4; color: #2F4F4F; }

.cBox  {width: 30px; height: 30px; }
  
a { text-decoration: none; color: #336699; }
a:hover {text-decoration:none; color:#000000; background: none; }

.uline {border-bottom: 1px dashed #707070;}
.line tr:hover{ background-color: #E0F2F7; }
.klein  {font-size:10px; }

.kontakt { font-size:14px;
          font-family: Arial, Verdana, Geneva; }

.artikelEditTitel {
    width:500px; height:24px; border: 1px solid #000000; background-color: #D9E5E5;
}

.artikelEditText {
    width:664px; height:400px; border: 1px solid #000000; background-color: #ffffff;
}

#artikelViewTitel {
    width: 500px; height: 40px; overflow: auto; padding: 2px; background: #ffffff; border: 1px dashed #000000; text-align: left;
}
#artikelViewText {
    width: 664px; height: 400px; overflow: auto; padding: 6px; background: #ffffff; border: 1px dashed #000000;
}

.mytbl { width: 100%; }
.mytbl td { border: 1px solid #ccc; background-color: #F8F8F6;  }
.mytbl td:hover { background-color: #E0F2F7; }

/* =============================================================================
   Hellmodus: Weisstoene vereinheitlichen  ->  #F8F8F6   (2026-08-22)
   =============================================================================
   Wunsch: alles, was weiss wirkt, soll waermer sein. Betroffen sind nicht nur
   #FFFFFF und das Farbwort white, sondern die ganze Familie der Beinahe-Weiss-
   Toene, die ueber die Jahre nebeneinander entstanden ist - allein #FAFAFA an
   ueber 300 Stellen, dazu #F5F5F5, #F2F2F2, #F7F7F7, #F6F6F6 und weitere.
   Dieselbe Technik wie in dark.css: die Werte, die das PHP ohnehin setzt,
   werden ueber Attribut-Selektoren abgegriffen; im Code aendert sich nichts.
   html:not(.dark) haelt den Dunkelmodus heraus.

   BEWUSST NICHT dabei: getoente Pastellflaechen, die eine Bedeutung tragen -
   Hellblau (Auswahl), Beige/Gelb (Hinweis), Rosa (Warnung), Hellgruen (aktiv).
   Die wuerden sonst alle zu derselben Flaeche verschmelzen.
   ============================================================================= */
/* Kurzschreibweise: die AJAX-Fenster (scripts.js, citrumtermin.js) setzen ihre
   Farben selbst und schreiben #fff statt #ffffff - die sechsstelligen
   Selektoren treffen das nicht. */
html:not(.dark) [bgcolor="#fff" i],
html:not(.dark) [style*="background:#fff" i],
html:not(.dark) [style*="background: #fff" i],
html:not(.dark) [style*="background-color:#fff" i],
html:not(.dark) [style*="background-color: #fff" i],
/* jQuery schreibt Hex in rgb() um, sobald es ein Element anfasst - deshalb
   zu jeder Bedingung oben auch die rgb()-Form, sonst bleiben genau die
   Flaechen in den AJAX-Fenstern reinweiss. */
html:not(.dark) [style*="rgb(255, 255, 255)" i],
html:not(.dark) [style*="rgb(248, 248, 255)" i],
html:not(.dark) [bgcolor="white" i],
html:not(.dark) [bgcolor="#FFFFFF" i],
html:not(.dark) [style*="#FFFFFF" i], html:not(.dark) [style*="rgb(255, 255, 255)" i],
html:not(.dark) [bgcolor="#FFFDFF" i],
html:not(.dark) [style*="#FFFDFF" i], html:not(.dark) [style*="rgb(255, 253, 255)" i],
html:not(.dark) [bgcolor="#FAFAFA" i],
html:not(.dark) [style*="#FAFAFA" i], html:not(.dark) [style*="rgb(250, 250, 250)" i],
html:not(.dark) [bgcolor="#F7F7F7" i],
html:not(.dark) [style*="#F7F7F7" i], html:not(.dark) [style*="rgb(247, 247, 247)" i],
html:not(.dark) [bgcolor="#F6F6F6" i],
html:not(.dark) [style*="#F6F6F6" i], html:not(.dark) [style*="rgb(246, 246, 246)" i],
html:not(.dark) [bgcolor="#F5F5F5" i],
html:not(.dark) [style*="#F5F5F5" i], html:not(.dark) [style*="rgb(245, 245, 245)" i],
html:not(.dark) [bgcolor="#F2F2F2" i],
html:not(.dark) [style*="#F2F2F2" i], html:not(.dark) [style*="rgb(242, 242, 242)" i],
html:not(.dark) [bgcolor="#FCFCE9" i],
html:not(.dark) [style*="#FCFCE9" i], html:not(.dark) [style*="rgb(252, 252, 233)" i],
html:not(.dark) [bgcolor="#F3F8F4" i],
html:not(.dark) [style*="#F3F8F4" i], html:not(.dark) [style*="rgb(243, 248, 244)" i],
html:not(.dark) [bgcolor="#FBF8EF" i],
html:not(.dark) [style*="#FBF8EF" i], html:not(.dark) [style*="rgb(251, 248, 239)" i],
html:not(.dark) [bgcolor="#F8F8FF" i],
html:not(.dark) [style*="#F8F8FF" i], html:not(.dark) [style*="rgb(248, 248, 255)" i],
html:not(.dark) [bgcolor="#FFFAFA" i],
html:not(.dark) [style*="#FFFAFA" i], html:not(.dark) [style*="rgb(255, 250, 250)" i],
html:not(.dark) [style*="background: #fff" i],
html:not(.dark) [style*="background-color: #fff" i],
html:not(.dark) [bgcolor="#FAF0E6" i],
html:not(.dark) [style*="#FAF0E6" i], html:not(.dark) [style*="rgb(250, 240, 230)" i],
html:not(.dark) [bgcolor="#F5F5E2" i],
html:not(.dark) [style*="#F5F5E2" i], html:not(.dark) [style*="rgb(245, 245, 226)" i],
html:not(.dark) [style*="background-color:#fff" i]
    { background-color: #F8F8F6 !important; }

/* Auch die Klassen aus den AJAX-Fenstern auf den einheitlichen Weisston
   bringen - sie stehen in eigenen <style>-Bloecken (out/terminin.php,
   out/outKunde.php) und werden von den Attribut-Selektoren oben nicht
   erfasst. */
html:not(.dark) .tmMonat,
html:not(.dark) .tmItem,
html:not(.dark) .kuTable    { background-color: #F8F8F6 !important; }

/* ---------------------------------------------------------------------------
   Bilder nicht versehentlich mitnehmen
   ---------------------------------------------------------------------------
   Verhindert das Ziehen eines Bildes auf den Schreibtisch und das lange
   Antippen auf dem iPhone (dort erscheint sonst "Bild sichern").

   Bewusst KEIN Schutz: wer die Entwicklerwerkzeuge oeffnet oder einen
   Bildschirmabzug macht, kommt weiterhin an jedes Bild. Das laesst sich im
   Browser grundsaetzlich nicht verhindern - was angezeigt wird, ist bereits
   heruntergeladen. Hier geht es nur um den Weg ueber die sichtbare
   Oberflaeche.

   Text bleibt ausdruecklich markierbar und kopierbar - im Alltag wird staendig
   eine Adresse oder eine Nummer herauskopiert. */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;   /* iPhone: kein "Bild sichern" beim langen Tippen */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ===========================================================================
   DREI GETRENNTE DARSTELLUNGEN
   ===========================================================================
     ab 1025px   Schreibtisch - unveraendert, Deckel bei 1000px
     769-1024px  Tablet       - iPad hoch/quer, iPhone QUER
     bis 768px   Telefon      - iPhone hochkant

   Warum nach BREITE und nicht nach Geraet: ein iPhone quer ist rund 850px
   breit, ein iPad hochkant nur 768px - das Telefon ist quer also BREITER als
   das Tablet hochkant. Nach Geraetenamen zu trennen wuerde die beiden
   vertauschen. Fuers Hineinpassen zaehlt allein die Breite.
   Deshalb faellt "iPhone quer" ins Tablet-Band. Das ist kein Versehen: bei
   850px ist der Platz dem iPad naeher als einem hochkant gehaltenen Telefon.
   =========================================================================== */

/* --- Gemeinsam fuer Tablet UND Telefon (alles unter 1025px) ---------------- */
@media (max-width: 1024px) {
    /* Deckel weg: die Breite soll ganz genutzt werden. */
    table[style*="max-width:1000px"] { max-width: 100% !important; }
    /* Mit viewport-fit=cover reicht die Seite bis in die Ecken - quer gehalten
       also auch unter die Kameraaussparung. Diese Raender halten den Inhalt
       davon fern. Auf Geraeten ohne Aussparung sind die Werte 0. */
    body {
        margin: 0;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
    }

    /* Der Inhaltsbereich rollt IN SICH seitlich, statt die ganze Seite breiter
       zu machen als den Bildschirm. Einzelne Module bringen intern feste
       Breiten mit (die Agenda verlangt rund 800px); die alle einzeln umzubauen
       hiesse 283 Tabellen anzufassen. So bleibt die Seite immer genau so breit
       wie das Geraet, und wer eine breite Tabelle sehen will, wischt in ihr zur
       Seite. Die Kopfleiste bleibt fest - sie passt ohnehin. */
    table[bgcolor="#cccccc"] {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Nur Tablet: 769 bis 1024px ------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Genug Platz: Schriftgroessen bleiben wie am Schreibtisch. Nur die
       Schaltflaechen bekommen Hoehe fuer die Fingerkuppe. */
    input[type="submit"], input[type="button"], button, select { min-height: 30px; }
}

/* --- Nur Telefon: bis 768px ------------------------------------------------ */
@media (max-width: 768px) {
    /* Nicht unter 13px: darunter zoomt iOS beim Antippen eines Eingabefeldes
       die Seite von selbst heran. */
    body, td, a, input, select, textarea { font-size: 13px; }
    input[type="submit"], input[type="button"], button, select { min-height: 34px; }
    input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* --- Anmeldung auf Telefon und Tablet mittig ------------------------------- */
@media (max-width: 1024px) {
    /* Hochkant gehalten klebte die Anmeldemaske oben am Rand, darunter blieb
       der halbe Bildschirm leer. Sie sitzt jetzt in der Mitte der Hoehe - dort,
       wo der Daumen ohnehin ist.
       Nur fuer diese Baender: am Schreibtisch bleibt alles, wie es war. */
    form[action="?ss=login"] {
        /* Drei Angaben, absichtlich in dieser Reihenfolge - jeder Browser nimmt
           die letzte, die er versteht:
             100vh  - alte Fassung; auf dem iPhone die Hoehe OHNE Safari-Leiste,
                      also zu viel, solange die Leiste sichtbar ist
             100svh - die garantiert sichtbare Hoehe
             100dvh - waechst und schrumpft mit der Safari-Leiste mit
           Genau daran lag es: im Browser passte es, in der Web-App (ohne
           Adresszeile, dafuer unter der Statusleiste hindurch) sass die Maske
           zu tief. */
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        /* Der Bereich hinter Statusleiste und Home-Strich gehoert zwar zur
           Seite, ist aber nicht frei nutzbar. Ohne das rechnet die Mitte mit
           Platz, den man gar nicht sieht. */
        padding-top: env(safe-area-inset-top, 0px);
        /* Zusaetzliche 8vh unten schieben die Maske etwas nach OBEN. Genau
           mittig wirkt auf einem hohen Bildschirm zu tief - das Auge erwartet
           den Schwerpunkt etwas hoeher. */
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8vh);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    /* Die beiden <br> im Formular wuerden als eigene Flex-Zeilen zaehlen und
       die Maske wieder nach unten druecken. */
    form[action="?ss=login"] br { display: none; }
    /* Eingabefelder gross genug fuer die Fingerkuppe. */
    form[action="?ss=login"] input[type="text"],
    form[action="?ss=login"] input[type="password"] { min-height: 30px; }
}

/* Ausdruecklich hell - siehe die Erklaerung in dark.css. Ohne diese Zeile
   richtet sich der Browser nach dem Betriebssystem, und wer Windows dunkel
   gestellt hat, saehe dunkle Bildlaufleisten in Citrums hellem Modus. */
html:not(.dark) { color-scheme: light; }

/* Die Bildlaufleisten auf denselben Weisston bringen wie alles andere.
   color-scheme allein genuegt dafuer nicht: es sagt dem Browser nur "hell",
   und der nimmt dann SEIN Grau (in Chrome etwa #F1F1F1), nicht unser #F8F8F6.
   Erst scrollbar-color legt den Ton wirklich fest.
   Zwei Schreibweisen, weil beide gebraucht werden: scrollbar-color ist der
   Standard (Firefox, neuere Chrome), ::-webkit-scrollbar der aeltere Weg. */
html:not(.dark) { scrollbar-color: #C9C9C4 #F8F8F6; }
html:not(.dark) ::-webkit-scrollbar             { width: 12px; height: 12px; }
html:not(.dark) ::-webkit-scrollbar-track       { background: #F8F8F6; }
html:not(.dark) ::-webkit-scrollbar-corner      { background: #F8F8F6; }
html:not(.dark) ::-webkit-scrollbar-thumb       { background: #C9C9C4; border-radius: 6px;
                                                  border: 3px solid #F8F8F6; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #AFAFA9; }