/* ===========================================================================
   Mobile.css

   Responsive Anpassungen fuer schmale Viewports.

   EISERNE REGEL: Diese Datei enthaelt AUSSCHLIESSLICH @media-Bloecke auf
   oberster Ebene. Keine einzige Regel ausserhalb eines @media-Blocks.
   Das ist die technische Garantie dafuer, dass sich das Desktop-Rendering
   (> 900px) nicht aendert, und in einem Review in fuenf Sekunden pruefbar.

   Breakpoints:
     900px  Projekt-Konsens (Site.css:30, 510, 517, 3036, 3073, 3302).
     767px  Bootstrap-3-Kante. Bootstrap stellt float erst ab min-width:768px
            her und schaltet Dropdowns unter max-width:767px auf position:static.
     480px  Bereits vorhanden (Site.css:951, 1002). Echte Telefone.

   Ausser Block D ausschliesslich max-width-Queries - eine max-width:900px
   Regel kann bei 901px physikalisch nicht feuern.

   Site.css und bootstrap.css bleiben unveraendert.
   =========================================================================== */


/* ===========================================================================
   BLOCK A - unterhalb des Projekt-Breakpoints 900px
   Kaskadenreparaturen. Der Header wird hier NICHT umgebaut, nur die Regeln
   zurueckgenommen, die ihn stauchen und die zweite Zeile lecken lassen.
   =========================================================================== */
@media (max-width: 900px) {

    /* Site.css:30-35 staucht den Header mobil auf 45px, Site.css:3073-3077
       setzt die zweite Zeile auf height:0 - aber Site.css:3065-3071 gewinnt
       mit display:flex. Ergebnis: eine 0px hohe, sichtbare Flexbox, deren
       Kinder (#WorkingTimeControls, .prgVersion) herauslaufen und den
       Seiteninhalt ueberlagern. Das ist der graue "Strich" im Screenshot.
       Loesung: Header wieder auf volle 80px, zweite Zeile auf echte 35px.
       Die Level-2-NAVIGATION geht dabei nicht verloren - sie existiert gar
       nicht: GetAllLevel2Items() in BaseController.cs:29-35 liefert immer
       eine leere Liste, _Layout.cshtml:245 rendert die <ul> also nie. */
    body.HolyGrail > header.shownavbarlevel2 {
        min-height: 80px;
        height: 80px;
        flex: 0 0 auto;
    }

    /* schlaegt Site.css:3036-3040 (0,2,0) mit (0,2,2) */
    body.HolyGrail > header .navbar-container {
        height: 80px;
    }

    /* schlaegt Site.css:3065-3077 und Site.css:510-515 (je 0,3,0 / 0,2,0)
       mit (0,3,2) */
    body.HolyGrail > header .navbar-container .navbarlevel2 {
        height: 35px;
        min-height: 35px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    /* Site.css:3799-3846: max-height:calc(100% - 3px) bezog sich auf die
       0px hohe Zeile und ergab die ~6px Restleiste. Mit 35px Elternhoehe
       stimmt die Rechnung wieder; nur min-width:114px muss weichen. */
    body.HolyGrail > header .navbarlevel2 #WorkingTimeControls {
        min-width: 0;
        flex: 0 0 auto;
    }

    /* Site.css:977-980 */
    body.HolyGrail > header .navbarlevel2 .prgVersion {
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 11px;
        white-space: nowrap;
    }

    /* _Layout.cshtml:77 traegt navbar-fixed-top -> bootstrap.css:4253-4269
       macht daraus position:fixed mit z-index:1030. Der <header> reserviert
       aber nur seine eigene Hoehe, also legt sich jeder Ueberlauf ueber den
       Content statt ihn zu schieben. Im Flex-Column-Body ist fixed ohnehin
       unnoetig. relative statt static, damit absolut positionierte Kinder
       ihren Bezugsrahmen behalten. */
    header .navbar-container.navbar-fixed-top {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        /* Nur position:fixed muss weg, nicht der Stapelwert: .ContentContainer
           ist position:relative (Site.css:70-74), also ebenfalls positioniert.
           Bliebe der Header auf z-index:auto, entschiede allein die
           DOM-Reihenfolge, und Inhalte mit eigenem Stapelkontext koennten sich
           ueber ein geoeffnetes Navigations-Dropdown legen. */
        z-index: 1030;
        border-width: 0;
    }

    /* Site.css:438-443: 47x39px mit margin:-8px -10px sprengt die Zeile.
       Auf dieselben 28x23 wie die uebrigen Leisten-Icons (.nav-img,
       Site.css:385-390) - das Seitenverhaeltnis 47:39 ergibt bei 28px Breite
       23,2px Hoehe, passt also genau. background-size ist Pflicht: .nav-img
       setzt keines, ohne wuerde die Grafik abgeschnitten statt verkleinert.
       ID noetig, um (1,0,0) zu schlagen -> (1,1,1). */
    header .navbarlevel1 #administration-img {
        width: 28px;
        height: 23px;
        margin: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Site.css:3743-3750 positioniert .badge nur ueber margin:-15px, und
       .icon-wrapper (Views\Shared\RequestStatus.cshtml:20) hat gar keine
       CSS-Regel. Auf den Header gescopet - aber NICHT auf .navbarlevel1:
       die Zaehler werden auf schmalen Geraeten per JS in die zweite Zeile
       umgehaengt (siehe unten), die Regeln muessen dort weitergelten. */
    header .icon-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
    }

    header .icon-wrapper > .nav-img {
        float: none;
        width: 24px;
        height: 24px;
        margin: 0;
        background-size: contain;
    }

    header .icon-wrapper > .badge {
        position: absolute;
        top: -2px;
        right: -6px;
        margin: 0;
        min-width: 15px;
        padding: 1px 4px;
        font-size: 10px;
        line-height: 13px;
        border-radius: 8px;
    }

    /* --- Antrags-Zaehler in der zweiten Zeile ----------------------------
       In Zeile 1 belegen die drei Zaehler 152px und druecken die
       Hauptnavigation auf 28px zusammen - bei 375px bleibt von sechs
       Navigations-Icons ein angeschnittenes uebrig. Zeile 2 enthaelt sonst
       nur den Timer und die Versionsnummer und hat den Platz frei.
       Das Umhaengen erledigt _Layout.cshtml nach dem AJAX-Load, und nur
       wenn ueberhaupt Zaehler gerendert wurden (sie sind permission-gated,
       Views\Shared\RequestStatus.cshtml). */
    header .navbarlevel2 > ul#requestStatus {
        order: -1; /* ganz links, vor #WorkingTimeControls */
        display: flex;
        flex: 0 0 auto;
        float: none;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        header .navbarlevel2 > ul#requestStatus > li {
            float: none;
            display: flex;
            align-items: center;
            height: 100%;
        }

            header .navbarlevel2 > ul#requestStatus > li > a {
                display: flex;
                align-items: center;
                height: 100%;
                padding: 0 8px;
            }

    /* Die Icons sind weisse SVGs fuer den schwarzen Balken. Auf dem grauen
       Grund der zweiten Zeile (#B2B2B2, Site.css:3066) waeren sie praktisch
       unsichtbar - brightness(0) macht sie schwarz. Gleiches Mittel wie
       Site.css:707-709 fuer die ActionBar, nur in die andere Richtung. */
    header .navbarlevel2 #requestStatus .icon-wrapper {
        width: 24px;
        height: 24px;
    }

        header .navbarlevel2 #requestStatus .icon-wrapper > .nav-img {
            width: 20px;
            height: 20px;
            filter: brightness(0);
        }

    header .navbarlevel2 #requestStatus .fake-li div {
        border-left-color: #6b6b6b;
    }

    /* Site.css:676-690 rechnen mit calc(100vh - 65px) bzw. - 85px.
       Bei 80px Headerhoehe hier gegen Rundung abgesichert. */
    header .navbar-nav .open .dropdown-menu,
    header .dropdown-menu[aria-labelledby="administration-img"] {
        max-height: calc(100vh - 90px);
    }

    /* .ContentContainer erbt von .flex-container (Site.css:46-53) ein
       overflow-x:hidden, und html,body sind overflow:hidden (Site.css:1-11).
       Alles, was breiter ist als der Viewport - Grids, breite Tabellen,
       Kacheln mit fester Pixelbreite - wird damit ersatzlos abgeschnitten,
       ohne dass man hinscrollen koennte. Auf schmalen Geraeten ist
       Wischen-Koennen besser als Inhalt-Verlieren.
       (0,2,1) schlaegt .flex-container (0,1,0). */
    body.HolyGrail > .flex-container.ContentContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Site.css:1344-1347 klemmt Labels auf 235px. Deutsche Beschriftungen wie
       "Benachrichtigung bei Dokumentenablauf" brechen darin auf drei Zeilen,
       obwohl die volle Breite zur Verfuegung stuende. (0,3,0) schlaegt (0,2,0).
       Bootstraps text-align:right auf .control-label steckt bereits in
       @media (min-width:768px) (bootstrap.css:2982-2988), da ist nichts zu tun. */
    .form-horizontal .form-group .control-label {
        max-width: none;
        width: auto;
        text-align: left;
    }

    /* Site.css:1092-1096: 620px min-width + 2x72px margin = 764px - das passt
       auch im Band 768-900px nicht. */
    .admin-tile-big {
        min-width: 0;
        width: auto;
        margin: 0 10px 20px 10px;
    }

    /* Site.css:2794-2813 gibt .EditTable-Zellen je 250px bei bis zu elf
       Spalten, also bis ~2750px - das laeuft in jedem Viewport ueber.
       display:block auf einem <table> erzeugt eine anonyme Table-Box: das
       interne Tabellenlayout bleibt erhalten, der Kasten wird scrollbar.
       Notloesung, kein Design - aber ohne Markup-Eingriff in den 23
       betroffenen Views. */
    .form-horizontal .EditTable,
    .form-horizontal .DetailTable {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Tab-Leiste ------------------------------------------------------
       themes\base\tabs.css:19-33 setzt float:left + white-space:nowrap auf
       li und .ui-tabs-anchor. Bei 15-25 sichtbaren Tabs (Views\Contacts\
       Edit.cshtml hat 35 permission-gated <li>) bricht das auf bis zu acht
       Zeilen um und frisst die Panel-Hoehe. Alle neun Tab-Views benutzen
       dieselbe ID #tabs - ein Selektor genuegt.
       #tabs traegt .flex-container (Site.css:46-53) mit overflow-x:hidden;
       das stoert ein scrollendes Kind nicht. */
    #tabs > .ui-tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        flex: 0 0 auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        #tabs > .ui-tabs-nav::-webkit-scrollbar {
            height: 0;
            display: none;
        }

    /* themes\base\tabs.css:19-28 ist (0,2,1); mit der ID sind wir (1,2,1). */
    #tabs .ui-tabs-nav > li {
        float: none;
        flex: 0 0 auto; /* kein Schrumpfen -> echtes Scrollen statt Quetschen */
        margin: 1px 2px 0 0;
        top: 0;
    }

        /* themes\base\tabs.css:34-37 verschiebt den aktiven Tab um 1px; in der
           Flex-Reihe erzeugt das nur einen Versatz. */
        #tabs .ui-tabs-nav > li.ui-tabs-active {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        /* Die Tabs sind heute nur ~29px hoch: font-size:12px
           (Override.jqx.base.css:12-16) x line-height 1.4286 = 17px, plus
           2 x .5em Padding = 2 x 6px (em bezieht sich auf die 12px des Ankers).
           min-height statt Padding-Arithmetik, damit die 44px auch halten,
           wenn "Open Sans" von Google Fonts nicht laedt. */
        #tabs .ui-tabs-nav > li > .ui-tabs-anchor {
            float: none;
            display: flex;
            align-items: center;
            min-height: 44px;
            padding: 0 14px;
            white-space: nowrap;
        }

    /* themes\base\tabs.css:46-51 gibt padding: 1em 1.4em.
       Das horizontale Padding darf NICHT unter 15px fallen: Bootstrap setzt
       .form-horizontal .form-group { margin: 0 -15px } (bootstrap.css:2978-2981),
       die Form-Groups ragen also 15px aus dem Panel heraus und wuerden von
       .ContentContainer { overflow-x:hidden } abgeschnitten. */
    #tabs > .ui-tabs-panel {
        flex: 1 1 auto;
        min-height: 0;
        padding: 10px 15px;
    }
}


/* ===========================================================================
   BLOCK B - Header-Zeile 1 und ActionBar als Flex-Reihe

   Unter 768px hat .navbar-nav kein float:left, > li kein float:left,
   .navbar-right kein float:right (bootstrap.css:4355-4367, 4484-4495),
   dafuer aber margin: 7.5px -15px (bootstrap.css:4324). Zusammen mit
   height:100% auf .navbar-nav und li (Site.css:3146-3149) stapeln sich die
   drei <ul> als 45px-Bloecke untereinander und haengen seitlich aus dem
   Balken.

   Der Block greift aber bereits ab 900px, nicht erst ab 767px: im Messlauf
   bei 768px ist die Leiste trotz funktionierender Bootstrap-Floats 90px hoch
   in einer 45px-Box, weil 15 Icons schlicht nicht in eine Zeile passen und
   die Floats umbrechen. Dasselbe bei der ActionBar - dort 140px statt 70px.
   Beides ist im Band 768-900px also genauso kaputt wie darunter, und 900px
   ist ohnehin der Mobile-Breakpoint des Projekts.

   Statt Bootstraps Floats zu restaurieren (fragil: float, margin, clearfix
   und width muessten gleichzeitig getroffen werden) wird .navbarlevel1 als
   Flex-Row aufgebaut - die scrollt bei Ueberlauf, statt umzubrechen.
   =========================================================================== */
@media (max-width: 900px) {

    header .navbar-container .navbarlevel1 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        height: 45px;
        min-width: 0;
    }

    /* schlaegt bootstrap.css:4324 (0,1,0) mit (0,2,2) */
    header .navbar-container .navbarlevel1 > ul.navbar-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        float: none;
        margin: 0;
        padding: 0;
        height: 100%;
        min-width: 0;
    }

        header .navbar-container .navbarlevel1 > ul.navbar-nav > li {
            float: none;
            flex: 0 0 auto;
            height: 100%;
            display: flex;
        }

            /* Der zweite Selektor ist kein Schoenheitsfehler: beim Profil-Item
               schiebt Html.BeginForm ein <form id="logoutForm"> zwischen <li>
               und <a> (_Layout.cshtml:171), der Anker ist dort also
               li > form > a. Ohne diese Zeile bekommt ausgerechnet der
               Profil-Button kein Padding und klebt 26px breit am
               Bildschirmrand. */
            header .navbar-container .navbarlevel1 > ul.navbar-nav > li > a,
            header .navbar-container .navbarlevel1 > ul.navbar-nav > li > form > a {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                padding: 0 10px;
                line-height: normal;
            }

    /* Das dazwischenliegende <form> muss die Hoehe durchreichen, sonst
       zentriert der Anker gegen eine falsche Bezugshoehe. */
    header .navbar-container .navbarlevel1 > ul.navbar-nav > li > form {
        display: flex;
        align-items: stretch;
        height: 100%;
        margin: 0;
    }

    /* Auf dem Desktop kehrt float:right die DOM-Reihenfolge der beiden
       rechten <ul> um - das zuerst stehende Profil-<ul> landet ganz rechts.
       Im Flex-Row waere es andersherum, also per order die gewohnte Optik
       wiederherstellen. */
    header .navbar-container .navbarlevel1 > ul.navbar-nav {
        order: 0;
    }

    header .navbar-container .navbarlevel1 > ul#requestStatus {
        order: 1;
    }

    header .navbar-container .navbarlevel1 > ul.nav-right:not(#requestStatus) {
        order: 2;
    }

    /* Die Center-Navi ist der einzige elastische Block und scrollt
       horizontal; die rechten Bloecke bleiben immer sichtbar. */
    header .navbar-container .navbarlevel1 > ul.navbar-nav:not(.nav-right) {
        flex: 1 1 0%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        header .navbar-container .navbarlevel1 > ul.navbar-nav:not(.nav-right)::-webkit-scrollbar {
            height: 0;
            display: none;
        }

    header .navbar-container .navbarlevel1 > ul.nav-right {
        flex: 0 0 auto;
        overflow: visible; /* Dropdowns duerfen ausbrechen */
    }

    /* Solange ein Untermenue offen ist, darf die Navi NICHT scrollen:
       ein Dropdown ist ein Nachfahre des Scroll-Containers und wuerde von
       dessen overflow beschnitten - es waere unsichtbar, obwohl es offen ist.
       Die Klasse setzt _Layout.cshtml auf shown/hidden.bs.dropdown.
       (0,5,2) schlaegt die Scroll-Regel oben mit (0,4,2). */
    header .navbar-container .navbarlevel1 > ul.navbar-nav:not(.nav-right).dropdown-open {
        overflow: visible;
    }

    header .navbarlevel1 .nav-right .fake-li {
        width: 1px;
        padding: 0;
    }

    header .navbarlevel1 .list-text,
    header .navbarlevel1 .caret {
        display: none;
    }

    /* ... aber NICHT in den Untermenues. Die Beschriftungen der Unterpunkte
       stehen dort ebenfalls in <span class="list-text"> (_Layout.cshtml:118),
       und Site.css:373 blendet die global aus; Site.css:517 zeigt sie erst ab
       min-width:900px wieder. Ohne diese Regel klappt das Menue auf und ist
       leer. In der obersten Leiste bleibt es ausgeblendet - dort sind nur die
       Icons gewollt. (0,3,1) schlaegt die Regel darueber mit (0,2,1). */
    header .navbarlevel1 .dropdown-menu .list-text {
        display: inline-block;
    }

    /* Zweite Zeile ebenfalls scrollbar, falls Timer und Version nicht
       nebeneinander passen. */
    header .navbar-container .navbarlevel2 {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* bootstrap.css:4331-4354 setzt Dropdowns unter 767px auf position:static
       -> das Menue schiebt den Header auseinander statt zu overlayen. */
    header .navbar-nav .open > .dropdown-menu,
    header .navbar-nav .dropdown.open > .dropdown-menu {
        position: absolute;
        float: none;
        top: 100%;
        right: 0;
        left: auto;
        width: auto;
        min-width: 200px;
        max-width: 90vw;
        margin-top: 0;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.15);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
        z-index: 1040;
    }

    header .navbarlevel1 > ul.navbar-nav:not(.nav-right) .open > .dropdown-menu {
        right: auto;
        left: 0;
    }

    header .navbar-nav .open > .dropdown-menu > li > a {
        padding: 10px 15px;
        line-height: 20px;
        white-space: normal;
    }

    /* --- ActionBar -------------------------------------------------------
       70px sind an drei Stellen gesetzt: Site.css:102-111 (0,0,1),
       113-116 (0,1,1), 128-132 (0,1,1). footer .container traegt !important
       nur auf width, nicht auf height - wir kommen ohne !important aus.
       52px = 30px Icon + 2x11px Padding, ueber der 44px-Touchtarget-Grenze.
       Die Icons bleiben 30px: das Sprite Images/Icons_30x30.png hat ein
       festes 30px-Raster mit ~110 background-position-Regeln, die sich ohne
       Build-Step nicht sauber umrechnen lassen - und das eigentliche Problem
       ist die Anzahl (8-10 Buttons), nicht die Groesse. */
    body.HolyGrail > footer {
        min-height: 52px;
        height: 52px;
    }

        body.HolyGrail > footer > .footer-inner {
            height: 52px;
            position: relative;
        }

            body.HolyGrail > footer > .footer-inner > .container {
                height: 52px;
                padding: 0;
                text-align: left;
            }

    footer .container > ul#CommonAppBar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        height: 52px;
        margin: 0;
        padding: 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        footer .container > ul#CommonAppBar::-webkit-scrollbar {
            height: 0;
            display: none;
        }

    /* Anordnung wie auf dem Desktop: linke Gruppe am linken Rand, mittlere
       Gruppe zentriert, rechte Gruppe am rechten Rand. Dort erledigen das
       float:left / float:right (Site.css:1272-1278) zusammen mit
       text-align:center auf dem Container (Site.css:130).
       Im Flex-Container uebernehmen zwei gleich starke Fuellstuecke diese
       Rolle - eines zwischen linker und mittlerer, eines zwischen mittlerer
       und rechter Gruppe. Weil beide dieselbe Wachstumsrate haben, teilen sie
       den freien Platz haelftig und die Mitte landet mittig.
       Passen die Buttons nicht mehr in die Zeile, schrumpfen beide auf 0
       (flex-basis 0) und die Leiste wird wieder eine reine Scrollreihe. */
    footer .container > ul#CommonAppBar::before,
    footer .container > ul#CommonAppBar::after {
        content: "";
        flex: 1 1 0;
        min-width: 0;
    }

    footer .container > ul#CommonAppBar::before {
        order: 1;
    }

    footer .container > ul#CommonAppBar::after {
        order: 3;
    }

    /* Site.css:134-137 ist (0,1,2), hier (0,1,3). */
    body footer .nav > li {
        display: flex;
        flex: 0 0 auto;
        float: none;
        order: 2;
    }

        body footer .nav > li.floatLeft {
            order: 0;
        }

        body footer .nav > li.floatRight {
            order: 4;
        }

        /* Site.css:951-963 (max-width:480px) setzt padding:15px 5px mit
           (0,1,3). Hier (0,1,4) -> gewinnt auch unterhalb 480px. */
        body footer .nav > li > a {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 52px;
            padding: 11px 9px;
        }

            body footer .nav > li > a span {
                display: none;
            }

    body footer .nav .img {
        margin: 0;
        flex: 0 0 30px;
    }

    /* Scrollhinweis: dezenter Verlauf am rechten Rand in der Leistenfarbe
       #3d444f (Site.css:109). Sitzt auf .footer-inner, nicht auf dem
       Scroll-Container selbst - sonst wuerde er mitscrollen. */
    body.HolyGrail > footer > .footer-inner::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 18px;
        height: 52px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(61,68,79,0), rgba(61,68,79,1));
    }
}


/* ===========================================================================
   BLOCK B2 - Inhaltsbereich unterhalb der Bootstrap-3-Kante

   Hier stehen die Regeln, die im Band 768-900px NICHT gebraucht werden:
   dort funktionieren die Floats der Filterzeile noch, die 478px-Kachel passt,
   und ein Dialog hat genug Platz. Erst unter 768px bricht das.
   =========================================================================== */
@media (max-width: 767px) {

    /* --- Zeilen ragen links aus dem Bild -----------------------------------
       Bootstrap gibt .row je -15px links und rechts (bootstrap.css:1611-1614),
       gedacht als Ausgleich fuer die 15px Innenabstand der Spalten. Der
       Container muss diese 15px mitbringen; .ContentContainer hat aber nur 5px
       (Site.css:70-74). Jede oberste Zeile ragt damit 10px ueber beide Raender.
       Rechts faellt das kaum auf, links ist es fatal: dorthin laesst sich nicht
       scrollen, der Anfang jeder Beschriftung ist schlicht weg.
       Auf dem Desktop faengt Site.css:291 das fuer die Filterzeile mit
       margin-left:25px auf - eine Regel, die weiter unten fuer die einspaltige
       Anordnung auf 0 gesetzt wird und den Ueberhang damit sichtbar macht.
       Nur oberste Zeilen: verschachtelte .row liegen in einer Spalte, deren
       15px Innenabstand den Ueberhang korrekt ausgleicht. */
    body.HolyGrail > .ContentContainer > .row,
    body.HolyGrail > .ContentContainer .row-search {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- Filter-/Suchleiste in Index-Ansichten ---------------------------
       Erzeugt von ScriptsApp\Core\SearchPanel\SearchPanel.ts (InitRendering
       ab Z.338). Site.css:268-293 stellt alles auf float:left mit 15/25px
       Margins.
       Der z-index-Konflikt mit der Topbar loest sich von selbst: Block A
       nimmt der Topbar position:fixed, damit kann sich weder die Legende
       (z-index 9999) darueberlegen noch #AddFilterList (999) dahinter
       verschwinden. Es bleibt die Breitenklemmung. */
    .row-search {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

        .row-search > div {
            float: none;
        }

            .row-search > div:first-child {
                margin-left: 0;
            }

        .row-search .inner-addon {
            float: none;
            flex: 1 1 100%;
            margin: 0;
        }

        .row-search .marker {
            float: none;
            margin: 0;
            flex: 0 0 26px;
        }

        /* Site.css:295-301 setzt 231px fix auf die Auswahl-Buttons. */
        .row-search .inner-addon Button.ui-state-default {
            width: 100%;
        }

    /* position:relative als Anker fuer das Filter-Overlay, siehe unten.
       Die Klasse wird erst per JS gesetzt (SearchPanel.ts:341 ersetzt das
       komplette class-Attribut des Host-Divs). */
    .row-search > .SearchPanel {
        position: relative;
    }

    .SearchPanel #filterList {
        float: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .SearchPanel #btnAddFilter {
        float: none;
    }

    /* Content\Core\SearchPanel.css:13-24: 430x300px fix. Die 430px werden bei
       375px Viewport von .ContentContainer { overflow-x:hidden } abgeschnitten,
       ersatzlos und ohne Scrollmoeglichkeit - das ist der eigentliche Defekt,
       nicht der vermeintliche z-index-Konflikt mit der Topbar: .ContentContainer
       ist position:relative und clippt, ein Nachfahre kann die Topbar
       geometrisch gar nicht erreichen.
       Absolut gegen .SearchPanel statt fixed, damit das Overlay am Button
       verankert bleibt, wenn der Inhalt scrollt. */
    .SearchPanel #AddFilterList {
        position: absolute;
        top: 36px;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }

        /* SearchPanel.css:25-30 fixiert height:25px - zu klein fuer den Finger. */
        .SearchPanel #AddFilterList .ConditionOption {
            display: flex;
            align-items: center;
            height: auto;
            min-height: 40px;
            padding: 0 8px;
        }

    /* #totalrecords traegt ein Inline-style="float:right; margin-right:20px"
       im Razor (z.B. Views\Projects\Index.cshtml:16). Kein !important noetig:
       .row-search ist oben ein Flex-Container, und Flex-Items ignorieren
       float per Spezifikation. */
    #totalrecords {
        text-align: right;
    }

    /* Site.css:3384-3396: die Legenden sind 460px breit. */
    .legend-container .legend {
        width: auto;
        max-width: calc(100vw - 16px);
    }

    /* --- Formulare -------------------------------------------------------
       Es gibt im Projekt keine einzige col-xs-*-Klasse (0 Treffer), nur
       col-md-* (2735) und col-sm-* (561). In Bootstrap 3 greifen die erst
       ab 992px bzw. 768px - darunter sind es schlicht Block-Elemente mit
       voller Breite. Die 272 form-horizontal-Views stapeln auf dem Handy
       also bereits von selbst einspaltig. Zu reparieren sind nur die festen
       Pixelbreiten der Container. */

    /* Site.css:3384-3392: 478px Tile + 2x20px Margin = 518px. */
    .tile-container {
        padding: 10px;
    }

    .tile {
        width: 100%;
        margin: 10px 0;
    }

    /* Die Ergebnis-Overlays der Custom-Picker (Content\Core\*.css) sind mit
       min-width:350px breiter als der verfuegbare Platz (375px minus Panel-
       und Grid-Padding ~ 315px) und werden abgeschnitten. */
    .peoplePickerResultArea,
    .peoplePickerGroupArea,
    .contactPickerResultArea,
    .contactPickerGroupArea,
    .materialPickerResultArea,
    .materialPickerGroupArea,
    .groupPickerResultArea,
    .projectPickerResultArea {
        min-width: 0;
        width: 100%;
        max-height: 55vh;
        -webkit-overflow-scrolling: touch;
    }

    .peoplePickerGroupTable,
    .peoplePickerGroupRow,
    .contactPickerGroupTable,
    .contactPickerGroupRow {
        width: 100%;
    }

    /* themes\base\datepicker.css:81-87 gibt den Tageszellen padding:.2em,
       also ~22px Hoehe - mit dem Finger kaum treffbar. Position und z-index
       brauchen dagegen nichts: der Datepicker haengt an <body> und
       Site.css:2168-2170 setzt bereits z-index:99999. */
    .ui-datepicker {
        width: 20em;
        font-size: 14px;
    }

        .ui-datepicker td span,
        .ui-datepicker td a {
            padding: 9px 2px;
            min-height: 38px;
            text-align: center;
        }

    /* --- Dialoge und Flyouts ---------------------------------------------
       Site.css:1251-1254 setzt max-height:800px !important und schlaegt
       damit das Inline-max-height:90vh aus _Layout.cshtml:310. Auf einem
       667px-Screen waere der Flyout hoeher als der Bildschirm. !important
       ist unvermeidbar, weil die Ausgangsregel selbst !important traegt. */
    .Flyout {
        max-height: calc(100vh - 140px) !important;
    }

    /* Site.css:1256-1259 */
    .ui-dialog {
        margin-top: 10px;
        max-width: calc(100vw - 16px);
    }
}


/* ===========================================================================
   BLOCK C - echte Telefone
   =========================================================================== */
@media (max-width: 480px) {

    /* --- Hauptmenue: alle Punkte sichtbar, Schaltflaechen so gross wie moeglich
       Der begrenzende Wert ist die Breite der Mittelspalte:
           Mittelspalte = Viewport - Marke - rechte Gruppe
       Bei 375px und sieben Hauptpunkten gemessen (Button = Icon + 2x Abstand):

         Icon  Abst  Marke  rechts(Icon/Abst)  Mittelspalte  Button   sichtbar
           28    10     50        30 / 10           180       48x45     3 von 7
           24     3     44        24 /  5           226       30x45     7 von 7
           28     3     36        24 /  4           240       34x45     7 von 7
           28     4     36        28 /  4           232       36x45     6 von 7
           28     3     34        28 /  3           240       34x45     7 von 7  <- gewaehlt

       ALLE Icons der Leiste bleiben damit in voller Groesse (28x23, wie auf
       dem Desktop), auch das Zahnrad. Den Platz gibt allein der engere
       Abstand und die schmalere Marke her.
       7 x 34 = 238px bei 240px Mittelspalte, also 2px Reserve.
       Bei 320px bleiben 5 ganz sichtbar plus einer angeschnitten - der Rest
       ist weiterhin durch Wischen erreichbar (Block B).
       Die Hoehe bleibt unveraendert: Leiste 45px, Header 80px. */
    header .navbar-container .navbarlevel1 > ul.navbar-nav:not(.nav-right) > li > a {
        padding: 0 3px;
    }

    /* Site.css:416-420 und 426-430 geben diesen beiden per ID 30x30 und machen
       ihre Schaltflaeche 2px breiter als die uebrigen - damit ginge die
       Rechnung oben nicht mehr auf. Auf die einheitlichen 28px bringen.
       background-size ist dabei Pflicht, nicht Kosmetik: .nav-img
       (Site.css:385-390) setzt keines, ein schmalerer Kasten wuerde die
       Grafik abschneiden statt sie zu verkleinern. (1,3,2) schlaegt (1,0,0). */
    header .navbarlevel1 > ul.navbar-nav:not(.nav-right) #faktura-img,
    header .navbarlevel1 > ul.navbar-nav:not(.nav-right) #auswertung-img {
        width: 28px;
        height: 28px;
        background-size: contain;
        background-position: center;
    }

    /* Rechte Gruppe: Icons bleiben in voller Groesse (28x23 aus Site.css:385,
       Zahnrad ebenso ueber die Regel in Block A). Den Platz fuer die
       Hauptnavigation gibt allein der engere Abstand her - drei
       Schaltflaechen mal 2px sind 6px. */
    header .navbar-container .navbarlevel1 > ul.nav-right > li > a,
    header .navbar-container .navbarlevel1 > ul.nav-right > li > form > a {
        padding: 0 3px;
    }

    /* Site.css:3110-3118: brand-container ist 90px fix. */
    header .navbar-container .brand-container {
        width: 34px;
        flex: 0 0 34px;
    }

        header .navbar-container .brand-container .brand {
            width: 24px;
            height: 23px;
        }

    /* Site.css:3773-3781: left:calc(100% - 375px). Bei genau 375px Viewport
       ist das 0, und der Close-Button (left:-14px) liegt ausserhalb des
       Bildschirms. body-Praefix -> (1,1,1) schlaegt (1,1,0). */
    body #WorkingTimeControlPanelContainer.open {
        left: 0;
        width: 100%;
    }

        body #WorkingTimeControlPanelContainer.open #WorkingTimeControlPanelClose {
            left: auto;
            right: 8px;
            top: 8px;
        }

    /* ControlPanelStyles.css:1-9 -> 375x700px fix. */
    body #WorkingTimeControlPanel {
        width: 100vw;
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    /* Die drei Antrags-Zaehler (Views\Shared\RequestStatus.cshtml) bleiben
       auch auf dem Telefon sichtbar - sie sind der Einstieg in die
       Mitarbeiteranfragen und wurden hier zeitweise ausgeblendet.
       Sie kosten drei Slots in der Icon-Leiste; die Leiste scrollt dafuer
       horizontal (Block B). */
}


/* ===========================================================================
   BLOCK D - Untermenues per Tippen statt per Hover

   Site.css:3176-3178 oeffnet die Menues ueber :hover. Auf Touch bleibt der
   Hover-Zustand nach dem Tippen haengen und laesst sich nicht mehr schliessen.
   Unterhalb 900px uebernimmt deshalb Bootstrap ueber die Klasse .open, die
   _Layout.cshtml per data-toggle ausloest.

   Der Breakpoint ist bewusst derselbe wie im Skript (max-width: 900px) und
   NICHT (hover: none): sonst wuerde auf einem Touch-Geraet oberhalb 900px der
   Hover abgeschaltet, ohne dass das Skript data-toggle gesetzt hat - die
   Menues waeren dann gar nicht mehr erreichbar.
   =========================================================================== */
@media (max-width: 900px) {

    /* (0,4,3) schlaegt Site.css:3176-3178 mit (0,3,2). */
    header .navbarlevel1 li.dropdown:hover > ul.dropdown-menu {
        display: none;
    }

    header .navbarlevel1 li.dropdown.open > ul.dropdown-menu {
        display: block;
    }
}