/* =========================================================================
   responsive.css
   Angelegt: 12.07.2026  |  Projekt: CRM-Modernisierung IMMOFUX

   ZWECK
   Macht das bestehende CRM auf Tablets und Handys bedienbar, OHNE die
   Desktop-Darstellung zu veraendern. Deshalb steht ALLES hier in
   @media-Bloecken (max-width). Auf breiten Bildschirmen (PC) ist diese
   Datei praktisch wirkungslos - dort bleibt alles exakt wie bisher.

   WICHTIG
   - Diese Datei MUSS in der Seitenhuelle als LETZTE CSS-Datei eingebunden
     sein (ist in layout/index.php bereits so). Nur dann kann sie die
     bestehenden festen Breiten auf kleinen Bildschirmen ueberschreiben.
   - Farb-Logik: Rot/Gruen wird NICHT als alleiniger Bedeutungstraeger
     verwendet. Akzente in Blau/Orange/Grau, zusaetzlich sichtbare Umrisse.
   ========================================================================= */


/* =========================================================================
   NEUE MOBIL-NAVIGATION
   Standardmaessig (auf dem PC) ausgeblendet - dort gilt die alte Icon-Leiste
   unveraendert weiter. Diese eine Zeile betrifft ausschliesslich das neue
   Element .mobilnav, aendert also nichts am bestehenden Desktop-Aussehen.
   ========================================================================= */
.mobilnav { display: none; }

/* =========================================================================
   1) TABLET UND KLEINER  (bis 900px)
   ========================================================================= */
@media (max-width: 900px) {

    /* --- Neue Mobil-Navigationsleiste (nur Handy/Tablet) ----------------
       Normale Links im gewohnten Look, mit Symbol UND Text. Keine alten
       Maus-Skripte dahinter -> reagiert zuverlaessig auf Fingertipp. */
    .mobilnav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #1f6feb;              /* Blau */
        padding: 6px 8px;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .mobilnav a {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        min-height: 54px;
        padding: 6px 8px;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        line-height: 1.1;
        border-radius: 8px;
        white-space: nowrap;
    }
    .mobilnav a:active { background: rgba(255,255,255,.20); }
    .mobilnav img {
        height: 22px;
        width: auto;
        margin-bottom: 3px;
        filter: brightness(0) invert(1);   /* Symbole weiss einfaerben */
    }
    .mobilnav .mobilnav-logout {
        margin-left: auto;
        background: #a01830;               /* dunkler Ton NUR fuer Logout,
                                              zusaetzlich mit Text beschriftet */
    }


    /* Textgroesse auf Mobilgeraeten nicht automatisch aufblasen */
    html, body {
        -webkit-text-size-adjust: 100%;
        margin: 0;
    }

    /* --- Grundgeruest fluessig machen ------------------------------------
       Die alten festen Breiten (z.B. 960px/1000px) werden auf kleinen
       Schirmen zu "so breit wie noetig, aber nie breiter als der Bildschirm". */
    #center,
    #content,
    #footer,
    #navigation,
    #subnavigation,
    .navigationCenter {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
        float: none !important;
    }

    #center {
        margin: 0 auto !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    #content {
        /* Zu breite Inhalte (z.B. Tabellen) duerfen hier seitlich scrollen,
           statt die ganze Seite breit zu ziehen. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Hauptnavigation --------------------------------------------------
       Am Handy wird die ALTE Icon-Leiste ausgeblendet (ihre Icons haengen an
       den alten Maus-Skripten und reagieren nicht auf Finger). Stattdessen
       erscheint die neue .mobilnav-Leiste (siehe unten). */
    #navigation .buttonNavigation,
    #navigation .r {
        display: none !important;
    }
    #navigation,
    #navigation .navigationCenter {
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        min-height: 0 !important;
        height: auto !important;
        border: 0 !important;
    }

    /* Fussleisten-Floats trotzdem entstapeln */
    #footer .r {
        float: none !important;
        margin: 0 !important;
    }

    /* --- Unternavigation (Textlinks je Seite) ---------------------------- */
    #subnavigation {
        padding: 4px 8px;
    }
    #subnavigation .subnavigationHidden a,
    #subnavigation a {
        display: inline-block;
        padding: 8px 10px;
        line-height: 1.2;
    }

    /* --- Tabellen (Kundenliste, Suche ...) ------------------------------- */
    /* DataTables verpackt Tabellen in .dataTables_wrapper -> dort scrollen. */
    .dataTables_wrapper {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Tabelle behaelt eine lesbare Mindestbreite und scrollt seitlich,
       statt die Spalten unleserlich zu quetschen. */
    table.dataTables,
    table.display,
    #last100,
    #search {
        width: auto !important;
        min-width: 620px;
    }
    /* Zeilen luftiger + groessere Tippziele in Tabellen */
    table.dataTables th,
    table.dataTables td,
    table.display th,
    table.display td {
        padding: 10px 8px !important;
    }
    /* Der kleine "oeffnen"-Pfeil in der ersten Spalte wird groesser */
    #last100 td:first-child a img {
        height: 26px;
        width: auto;
        padding: 4px;
    }

    /* --- Formulare / Eingaben -------------------------------------------- */
    /* Volle Breite, und 16px Schrift verhindert das nervige Auto-Zoomen
       beim Antippen auf iPhones/iPads. */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px !important;
        min-height: 42px;
        padding: 8px 10px;
    }
    textarea {
        min-height: 96px;
    }

    /* Klick-/Absende-Buttons und die "positive/negative"-Links gross genug */
    .positive,
    .negative,
    .button,
    input[type="submit"],
    input[type="button"],
    button {
        width: auto !important;
        min-height: 44px;
        box-sizing: border-box;
        padding: 10px 14px;
    }

    /* Der "Neuen Kundendatensatz anlegen"-Link hat inline width:240px -
       auf schmalen Schirmen darf er die volle Breite nutzen. */
    a.positive[style] {
        display: block;
        width: 100% !important;
        text-align: center;
        box-sizing: border-box;
    }

    /* --- Suchformular & andere Formulare: 2 Spalten -> 1 Spalte ----------
       Die Formulare bauen ihr Layout mit <table> INNERHALB von <fieldset>
       auf. Auf dem Handy werden diese Tabellen "aufgebrochen", damit jedes
       Feld einzeln, untereinander und in voller Breite steht - so laesst
       sich ueberall bequem hineintippen.
       Die Ergebnistabelle (#search) steht NICHT in einem fieldset und
       bleibt davon unberuehrt. */
    fieldset {
        min-width: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    fieldset legend { font-weight: bold; }

    fieldset table,
    fieldset tbody,
    fieldset tr,
    fieldset td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    fieldset td { padding: 4px 0 !important; }

    /* ALLE Eingaben im Formular voll breit und gut tippbar - auch, wenn im
       Original gar kein type="text" gesetzt ist (deshalb hier ganz breit). */
    fieldset input,
    fieldset select,
    fieldset textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        font-size: 16px !important;
        min-height: 42px;
        padding: 8px 10px;
    }
    /* Ausnahme: Haekchen und Auswahlpunkte NICHT auf volle Breite ziehen */
    fieldset input[type="checkbox"],
    fieldset input[type="radio"] {
        width: auto !important;
        min-height: 0;
        display: inline-block;
        margin-right: 6px;
        padding: 0;
    }

    /* Alte "chosen"-Auswahlfelder auf volle Breite bringen */
    .chosen-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Fusszeile ------------------------------------------------------- */
    #footer {
        text-align: center;
        padding: 12px 8px;
    }
    #footer .r {
        display: block;
        margin-top: 6px !important;
    }

    /* --- Zugaenglichkeit: sichtbarer Fokus (Tastatur/Sprungmarken) ------- */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid #1f6feb;   /* Blau - farbenblind-sicher */
        outline-offset: 1px;
    }
}


/* =========================================================================
   2) HANDY  (bis 560px) - noch kompakter
   ========================================================================= */
@media (max-width: 560px) {

    /* Icon-Leiste zentrieren und bei Bedarf umbrechen */
    #navigation .navigationCenter {
        justify-content: center;
    }

    /* Ueberschriften etwas kleiner, damit nichts ueberlaeuft */
    #content h1 { font-size: 20px; }
    #content h2 { font-size: 18px; }

    /* Unternavigations-Links als gut trennbare Bloecke */
    #subnavigation .subnavigationHidden a,
    #subnavigation a {
        padding: 10px 12px;
    }

    /* Etwas weniger Seitenrand, mehr Platz fuer Inhalt */
    #center {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* =========================================================================
   3) Bewegung reduzieren, wenn der Nutzer das im System eingestellt hat
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}