/* =====================================================================
   App-CSS der Werkzeugoberflaeche (frueher tools/templates/werkzeug_partials/
   _styles.html + _styles_seitenpanel.html, dort inline hinter </body>).

   Ausgelagert am 18.08.2026 (TD-025): als Datei im <head> steht das Design vor
   dem ersten Bildaufbau fest -- vorher zeigte der Browser bei jedem
   Seitenwechsel kurz das rohe Layout. Zusaetzlich faellt es aus jedem
   HTML-Dokument heraus (rund 170 kB je Seite) und wird vom Browser gecacht.

   Bildpfade sind relativ zu dieser Datei (/static/router_app/).
   Reihenfolge unveraendert; die Kaskade dreht sich dadurch: seitenspezifische
   <style>-Bloecke im Dokument stehen jetzt dahinter und gewinnen.
   ===================================================================== */

#mybody {
        background: white;
        overflow-x: hidden;
    }

    .toolsearchholder {
        position: relative;
        background: rgb(181, 255, 236);
        background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);
        /* background: rgb(245, 245, 245); */
        border-radius: 10px;
        /* border: solid 1px grey; */
        margin-top: 20px;
        padding-left: 20px;
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        box-shadow: -1px 2px 8px 1px rgb(56 56 56 / 69%);
    }

    .showPassword {
        border: solid 1px grey;

        /* background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%); */
        border-radius: 20px;
        padding-right: 7px;
        padding-left: 7px;
        padding-top: 2px;
        padding-bottom: 2px;
        cursor: pointer;
        position: absolute;
        top: 32px;
        z-index: 2;
        right: 5%;
        opacity: 0.6;
    }

    .showPassword2 {
        border: solid 1px grey;

        /* background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%); */
        border-radius: 20px;
        padding-right: 7px;
        padding-left: 7px;
        padding-top: 2px;
        padding-bottom: 2px;
        cursor: pointer;
        position: absolute;
        top: 32px;
        z-index: 2;
        right: 10%;
        opacity: 0.6;
    }

    .headlineBlock {
        margin-top: 10px
    }

    .textfield {
        margin-top: 10px;
        background: transparent;
        border: solid 1px black;
        border-radius: 10px;
        /* border-bottom: solid 1px black; */
    }

    .textfield2 {
        margin-left: 20px;
        margin-top: 10px;
        background: transparent;
        color: white;
        border: solid 1px rgb(255, 255, 255);
        border-radius: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        /* border-bottom: solid 1px black; */
    }

    .textfield3 {

        margin-top: 1px;
        height: 60px;
        background: transparent;

        border: solid 1px black;
        border-radius: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        /* border-bottom: solid 1px black; */
    }

    .normaltext {
        text-align: left;
        margin-top: 20px;
    }

    #werkzeugSuchenbtn,
    #MonteurWerkzeugpoolfilterbtn,
    .savephonenumber,
    #QrCodesbtn,
    #AnleitungMonteurWebplattform,
    #Werkzeugkisteladen,
    #WerkzeugkisteladenInaktivtools,
    #ScanDevicesladen,
    #ChecklistAlleAktivierenBtn,
    #ChecklistAlleDeaktivierenBtn,
    .hasHover,
    .WerkzeugEinlagernBtn,
    #WerkzeugReparaturLaden,
    #FirmenDatenAktualisieren,
    #LogbuchMitarbeiter,
    #InventurlistePdfBtn,
    #WartungsuebersichtBtn {
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    #videos,
    #faceRegister {
        margin: auto;
        padding: 3px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: rgb(169, 221, 193);
        cursor: pointer;
        margin-top: 23px;
        color: white;
        width: 170px;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .off {
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;

        cursor: pointer;
        margin-top: 20px;
        color: rgb(0, 0, 0);
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .off2 {
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        opacity: 0.4;
        background-color: #ebebeb;
        cursor: pointer;
        margin-top: 20px;
        color: rgb(0, 0, 0);
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .QrCodesbtnErstellungDeaktivieren {
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        opacity: 1;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    #werkzeugSuchenbtn:hover,
    #MonteurWerkzeugpoolfilterbtn:hover,
    .savephonenumber:hover,
    #QrCodesbtn:hover,
    #AnleitungMonteurWebplattform:hover,
    #Werkzeugkisteladen:hover,
    #WerkzeugkisteladenInaktivtools:hover,
    #ScanDevicesladen:hover,
    #ChecklistAlleAktivierenBtn:hover,
    #ChecklistAlleDeaktivierenBtn:hover,
    .WerkzeugEinlagernBtn:hover,
    .QrCodesbtnErstellungDeaktivieren:hover,
    #WerkzeugReparaturLaden:hover,
    #videos:hover,
    #faceRegister:hover,
    #FirmenDatenAktualisieren:hover,
    #LogbuchMitarbeiter:hover,
    #InventurlistePdfBtn:hover,
    #WartungsuebersichtBtn:hover {

        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        /* color: black; */


    }

    .hasHover:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        /* color: black; */
    }

    .phoneinputTF {
        margin-top: 25px;
        background-color: #ffffffc7;
        height: 40px;
        font-size: 20px;
        text-align: center;
        border-radius: 20px;
        border: 2px solid transparent;
    }

    .UsernameAudio {
        font-size: 15px;
        width: 234px;
        top: 250px;
        text-align: left;
        left: 12px;
        border-radius: 9px;
        background-color: rgb(240 243 244);
    }

    .hinweisreparatur {
        text-align: center;
        font-size: 18px;
        color: #5A6268;
        margin-top: 30px;
    }

    .rahmen2 {
        border: solid 1px rgb(194, 194, 194);
        border-radius: 10px;
        cursor: pointer;
        display: block;
        padding-top: 5px;
        padding-bottom: 10px;
        margin: 0px auto;
        overflow: hidden;
        width: 290px;
        max-width: 100%;
        margin-top: 20px;
        box-shadow: -1px 2px 8px 1px rgb(56 56 56 / 69%);
        background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);

    }

    /* Korrektur für den Übergangsbereich von col-lg-4 (3 pro Zeile) zu col-xl-3 (4 pro Zeile):
       Zwischen 1200 px und 1296 px ist die col-xl-3-Spalte nur 300-324 px breit – die feste
       290-px-rahmen2 ragt dann über die Spalten-Innenseite, und die absolut positionierten
       Icon-Buttons (toolVerleihen, moreinfotool, toolWartung, toolnotes, WerkzeugLagerConfig,
       toolverlinkung, toolmoreimages) – die mit `right:` von der Spaltenkante aus positionieren –
       rutschen dadurch sichtbar nach links. Im fraglichen Bereich daher 3 statt 4 Kacheln pro Zeile. */
    @media (min-width: 1200px) and (max-width: 1580px) {
        /* Obergrenze 1580 statt 1296: ab 1200 zieht der fixe Drawer 300px vom Body ab
           (body padding-left, _drawer.html) — die col-xl-3-Spalte ist real erst ab
           ~1580px Viewport breit genug fuer die 290px-Kachel. */
        .toolkachelEinzelsuche.col-xl-3 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
    }

    /* Herstellerkacheln: JS vergibt col-md-3 (4 pro Zeile ab 768px) — mit fester
       290px-rahmen2 kollidieren die Kacheln bis weit ueber 1200px hinaus.
       Gleiche Spaltenlogik wie die Werkzeugkacheln: 2 / 3 / 4 pro Zeile. */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .herstellerkachel.col-md-3 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (min-width: 992px) and (max-width: 1580px) {
        .herstellerkachel.col-md-3 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }
    }

    /* ================= Karten-Redesign v2 (nur Werkzeug-Grids; Werkzeugkiste/Reparaturliste behalten das Alt-Layout) =================
       Prinzip: alle Aktions-Elemente behalten IDs/Klassen (delegierte Handler + substr-ID-Parsing bleiben unberührt),
       wandern aber in das Overlay-Menü .aktionenMenueV2 und werden dort per CSS zu beschrifteten Zeilen. */
    .rahmen2.karteV2 {
        display: flex;
        flex-direction: column;
        padding: 0 !important; /* !important gegen Bootstrap col-12 (15px links/rechts) — sonst Foto/Fuss eingerueckt */
        border: solid 4px #D5EDE3; /* Zuordnungsfarbe (lila/cyan) setzt das Render-JS rundum wie im Alt-Design */
        border-radius: 14px;
        background: linear-gradient(45deg, #e2f5f7, #428c9a);
        box-shadow: 0 2px 8px rgba(20, 60, 50, 0.10);
        position: relative;
    }

    /* Badges (Nummer, Zuordnung) sind Kinder des Foto-Containers — Positionierung folgt dem Foto,
       egal wie hoch der Titelstreifen ist */
    .karteV2 .kachelbild { order: 1; margin: 0; width: 100%; border-radius: 0; line-height: 0; position: relative; }
    /* Foto fuellt die Kachel immer in voller Breite (auch kleinere Uploads werden skaliert); Ratio bleibt via height:auto */
    .karteV2 .toolbild { display: block; margin: 0; width: 100%; max-width: none; height: auto; }

    /* Titelstreifen oben wie im Alt-Design: Mint-Gradient mit Werkzeugnamen */
    .karteV2 .ToolnameBild {
        order: 0;
        text-align: center;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.25;
        white-space: normal;
        padding: 8px 12px;
        color: #22272B;
        background: linear-gradient(122deg, #e2f5f7, #9bdae6);
        border-bottom: solid 1px #B7E8D6;
    }

    /* Hersteller- (Herstellersuche) bzw. Niederlassungs-Zeile: unter dem Aktionen-Button im Kachelfuss */
    .karteV2 .HerstellerbezTool,
    .karteV2 .HerstellerbezStatisch,
    .karteV2 .FirmenbezTool {
        order: 4;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #505050;
        background: linear-gradient(176deg, #e2f5f7, #428c9a);
        white-space: normal;
        margin: 0;
        padding: 0 12px 8px 12px;
    }

    .karteV2 .placemaker { display: none; }

    .karteV2 .ToolNummerBild {
        position: absolute;
        top: 10px;
        left: 10px;
        margin: 0;
        width: auto;
        min-width: 60px;
        padding: 2px 12px;
        font-weight: 600;
        line-height: 1.5;
        z-index: 20;
    }

    .karteV2 .toolzuordnung {
        left: auto !important;
        right: 10px;
        top: 10px !important; /* !important: JS setzt inline-top je Namenslaenge – hier neutralisiert */
        width: 42px;
        height: 42px;
        padding: 0 !important;
        border-radius: 10px;
        border: solid 1px rgba(255, 255, 255, 0.65);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }
    .karteV2 .toolzuordnung .platzhalterbild { height: 26px; width: 28px; }
    /* Hover wie im Alt-Design: Badge stretcht nach unten (top haengt fest am Foto) */
    .karteV2 .toolzuordnung:hover { height: 50px; }

    .karteV2 .ubernahmeWrap {
        order: 3;
        margin-top: auto;
        padding: 10px 12px 8px 12px;
        font-size: inherit;
        background: linear-gradient(19deg, #e2f5f7, #428c9a);
        border-top: none;
    }
    .karteV2 .ubernahmeWrap .Werkzeugubernahme,
    .karteV2 .ubernahmeWrap .WerkzeugEinlagern,
    /* Werkzeugkiste eines Mitarbeiters (Adminpanel): eigener Knopf, gleiche Rolle */
    .karteV2 .ubernahmeWrap .WerkzeugEinlagernBtn {
        display: block;
        width: 100%;
        margin: 0 0 6px 0;
        padding: 8px 8px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
    }

    /* Status-Hinweise der Werkzeugkisten stehen zwischen Foto und Knopf; der Text
       sitzt waagrecht und senkrecht mittig im gelben Band (vorher klebte er an der
       Unterkante, weil das Band unten kein Innenabstand hatte). */
    .karteV2 .StatusAusleihenWerkzeugkiste,
    .karteV2 .StatusAusleihenWerkzeugkisteMitarbeiter {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin: 0;
        padding: 6px 12px;
        text-align: center;
        line-height: 1.3;
    }

    /* Reparaturliste: Melder und Sprachnachricht sitzen im Kartenfuss. Die
       Alt-Regeln schoben beide mit festen Offsets (top/margin-top 250px) unter
       das Foto — im Kartenfluss braucht es das nicht mehr. */
    .karteV2 .UsernameAudio {
        width: 100%;
        top: auto;
        left: auto;
        margin: 0 0 6px 0;
        padding: 4px 10px;
        font-size: 14px;
        font-weight: 600;
    }

    .karteV2 .audiocontroller {
        margin: 0;
        width: 100%;
    }
    .karteV2 .ubernahmeWrap .WerkzeugEinlagern { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28); }
    /* Hover-Feedback wie im Alt-Design (Schatten waechst, 0.3s aus der Basisregel) — flache Schattensprache */
    .karteV2 .ubernahmeWrap .Werkzeugubernahme:hover,
    .karteV2 .ubernahmeWrap .WerkzeugEinlagern:not(.lagerEinlagernDisabled):hover {
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        transform: translateY(-1px);
    }
    .karteV2 .WerkzeugEinlagern.lagerEinlagernDisabled {
        /* ausgegraut: gedimmtes Sidebar-Dunkel (Button-Grundfarbe #0A3242) */
        background-color: #0A3242;
        color: #ffffff;
        opacity: 0.45;
        filter: none;
        box-shadow: none;
    }

    /* Ausgemusterte-Geräte-Karten: Reaktivieren + Gerätehistorie als volle Footer-Pills.
       Neutralisiert die Alt-Regeln (.Werkzeugreaktivieren = 100px-Pill mit Negativ-Margins,
       .moreinfotool = absolut positionierter 35px-Kreis) im karteV2-Fuss. */
    .karteV2 .ubernahmeWrap .Werkzeugreaktivieren,
    .karteV2 .ubernahmeWrap .moreinfotool {
        display: block;
        position: static;
        width: 100%;
        height: auto;
        margin: 0 0 6px 0;
        padding: 8px 8px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        background: #0A3242;
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
        overflow: visible;
        opacity: 1;
        cursor: pointer;
        transition-duration: 0.3s;
    }
    .karteV2 .ubernahmeWrap .Werkzeugreaktivieren:hover,
    .karteV2 .ubernahmeWrap .moreinfotool:hover {
        width: 100%;
        padding: 8px 8px;
        border: none;
        opacity: 1;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        transform: translateY(-1px);
    }

    .btnAktionenV2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 8px 8px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #ffffff;
        /* Hellblau fuer den "Mehr"-Button (bewusst abgesetzt von den tuerkisen Aktions-Buttons) */
        background: #0A3242;
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        transition-duration: 0.2s;
    }
    /* bleibt hellblau beim Hovern (kein Farbwechsel), nur Lift/Schatten als Feedback */
    .btnAktionenV2:hover { background: #0A3242; color: #ffffff; }
    .btnAktionenV2 img {
        height: 14px;
        width: 14px;
        object-fit: contain;
        filter: brightness(0) invert(1); /* weisse Icons auf Teal = kontrastreich */
        opacity: 0.95;
        transition-duration: 0.2s;
    }
    .btnAktionenV2:hover img { opacity: 1; }
    .btnAktionenV2 span { padding: 0 2px; }
    .btnAktionenV2:hover { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transform: translateY(-1px); }

    /* Aktionen-Menue: Overlay in der Kachel, oeffnet ueber dem Kachel-Fuss */
    .aktionenMenueV2 {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 8px;
        max-height: calc(100% - 16px);
        overflow-y: auto;
        background: #ffffff;
        border: solid 1px #C8EBDC;
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(15, 25, 30, 0.3);
        padding: 8px;
        z-index: 60;
    }

    /* Aktions-Elemente werden im Menue zu beschrifteten Zeilen – harte Resets gegen das Alt-Layout.
       :not(.sr-only) ist Pflicht: sonst wuerde display:flex!important die per sr-only versteckten
       Staff-Zeilen (Wartung/Historie/Verwaltung) fuer Nicht-Staff sichtbar machen. */
    .aktionenMenueV2 > div:not(.sr-only) {
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important; /* Alt-Kreis-Buttons (toolverlinkung, LagerConfig) zentrieren sonst */
        gap: 10px;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 8px !important; /* kompakt: alle Zeilen inkl. Zuordnung muessen ohne Scrollen in die Kachel passen */
        background: transparent !important;
        border: none !important;
        border-radius: 8px;
        box-shadow: none !important;
        opacity: 1 !important;
        color: #2B3237;
        font-size: 15px;
        text-align: left;
        overflow: visible !important;
        cursor: pointer;
        transition-duration: 0.15s;
    }
    .aktionenMenueV2 > div:not(.sr-only):hover { background: #E4F8F0 !important; }

    .aktionenMenueV2 img {
        position: static !important;
        height: 15px !important;
        width: 15px !important;
        object-fit: contain;
        padding: 4px;
        box-sizing: content-box;
        background: #E2F5EC;
        border-radius: 7px;
        flex-shrink: 0;
    }
    .aktionenMenueV2 .toolWartung img,
    .aktionenMenueV2 .toolnotes img { background: #FFEAD1; }
    /* "keine Verlinkung"-Zustand: grau bleibt als Signal, aber Icon-Chip nicht fast unsichtbar */
    .aktionenMenueV2 .toolverlinkung.toolverlinkung-ohne-verbindung img { filter: grayscale(1); opacity: 0.8; }
    .aktionenMenueV2 .WerkzeugLagerConfig img { background: #756287; }
    .aktionenMenueV2 .toolAnfragenUmschlag {
        position: static !important;
        height: 30px !important;
        width: 30px !important;
        background-color: #E2F5EC;
        background-size: 18px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* Buchstaben-Buttons (R/U/A/C): Buchstabe wird per ::before zum Icon-Chip, Label kommt per ::after */
    .aktionenMenueV2 .reservation,
    .aktionenMenueV2 .Werkzeugumbenennen,
    .aktionenMenueV2 .WerkzeugChecklistToggle,
    .aktionenMenueV2 .Werkzeugdelete { font-size: 0 !important; gap: 0 !important; }
    .aktionenMenueV2 .reservation::before,
    .aktionenMenueV2 .Werkzeugumbenennen::before,
    .aktionenMenueV2 .WerkzeugChecklistToggle::before,
    .aktionenMenueV2 .Werkzeugdelete::before {
        margin-right: 10px; /* gap:0 oben: der Buchstaben-Textknoten wuerde sonst einen zweiten Flex-Gap erzeugen */
        display: flex;
        align-items: center;
        justify-content: center;
        height: 23px;
        width: 23px;
        border-radius: 7px;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .aktionenMenueV2 .reservation::before { content: "R"; background: #D9F6FA; color: #007A8C; }
    .aktionenMenueV2 .Werkzeugumbenennen::before { content: "U"; background: #E1F0FF; color: #2D6FE0; }
    .aktionenMenueV2 .WerkzeugChecklistToggle::before { content: "C"; background: #E7F6E1; color: #3D8B2F; }
    .aktionenMenueV2 .Werkzeugdelete::before { content: "A"; background: #FFE3E3; color: #C93030; }

    /* Zuordnungs-Zeile: geteilter Farbchip (cyan/lila = Monteur/Allgemein) statt Icon —
       ein filter auf dem img wuerde auch den Chip-Hintergrund schwaerzen */
    .aktionenMenueV2 .menueZuordnungV2 img { display: none !important; }
    .aktionenMenueV2 .menueZuordnungV2::before {
        content: "";
        display: flex; /* explizit: Safari rendert inline-::before-Flexkinder sonst groesser */
        box-sizing: border-box;
        height: 23px;
        width: 23px;
        border-radius: 7px;
        background: linear-gradient(90deg, #00C4DE 50%, #756287 50%);
        flex-shrink: 0;
    }

    /* Menue-Beschriftungen */
    .aktionenMenueV2 > div::after { font-size: 14px; font-weight: 500; }
    .aktionenMenueV2 .menueZuordnungV2::after { content: "Zuordnung ändern"; }
    .aktionenMenueV2 .toolVerleihen::after { content: "Werkzeug verleihen"; }
    .aktionenMenueV2 .toolAnfragen::after { content: "Werkzeug anfragen"; }
    .aktionenMenueV2 .reservation::after { content: "Reservieren"; }
    .aktionenMenueV2 .toolWartung::after { content: "Wartung"; }
    .aktionenMenueV2 .toolnotes::after { content: "Notizen & Anhänge"; }
    .aktionenMenueV2 .moreinfotool::after { content: "Historie & Auswertung"; }
    .aktionenMenueV2 .toolmoreimages::after { content: "Weitere Fotos"; }
    .aktionenMenueV2 .toolverlinkung::after { content: "Verlinkte Werkzeuge"; }
    .aktionenMenueV2 .WerkzeugLagerConfig::after { content: "Lagerplatz konfigurieren"; }
    .aktionenMenueV2 .WerkzeugChecklistToggle::after { content: "Übergabe-Checkliste"; }
    .aktionenMenueV2 .Werkzeugumbenennen::after { content: "Werkzeug umbenennen"; }
    .aktionenMenueV2 .Werkzeugdelete::after { content: "Werkzeug löschen"; color: #C93030; }

    .aktionenMenueV2 .verwaltungLabelV2 {
        border-top: solid 1px #DDEFE6 !important;
        border-radius: 0;
        margin: 4px 4px 0 4px !important;
        padding: 6px 12px 0 12px !important;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #8C969C;
        cursor: default;
    }
    .aktionenMenueV2 .verwaltungLabelV2:hover { background: transparent !important; }

    /* X zum Schliessen des Mehr-Menues: eigene Kopfzeile, rechtsbuendig — bewusst OHNE
       position:absolute (Safari rendert den Anker sonst anders als Chrome) */
    .aktionenMenueV2 > div.menueSchliessenV2 {
        width: 26px !important;
        height: 26px !important;
        flex: 0 0 auto;
        margin-left: auto !important;
        margin-bottom: 2px !important;
        justify-content: center !important;
        padding: 0 !important;
        border-radius: 8px;
        background: #F1F4F5 !important;
        color: #33393E;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }
    .aktionenMenueV2 > div.menueSchliessenV2:hover { background: #E3E8EA !important; }

    /* ===== Smartphone: Tap-Targets im Aktionen-Menue + Adminpanel-QR-Box ===== */
    @media (max-width: 650px) {
        /* Menuezeilen und X auf fingertaugliche Groesse (Desktop bleibt kompakt) */
        .aktionenMenueV2 > div:not(.sr-only) {
            min-height: 42px;
            padding: 8px !important;
        }
        .aktionenMenueV2 > div.menueSchliessenV2 {
            width: 38px !important;
            height: 38px !important;
            min-height: 0;
            font-size: 16px;
        }
        /* Toggle + Hilfe-Button der QR-Box in den Textfluss — absolut positioniert
           kollidierten sie mit der umbrechenden Headline (gleicher Fall wie das @-Icon) */
        #togleswitch {
            position: static !important;
            margin: 10px 12px 0 15px;
        }
        #helpbuttonInaktivMitarbeiter {
            position: static !important;
            display: inline-block;
            margin-top: 10px;
        }
        .explainbox {
            top: 44px;
            right: 12px;
            border-bottom-right-radius: 20px;
        }
        /* iOS zoomt beim Fokussieren von Inputs <16px in die Seite — seit Zoom wieder
           erlaubt ist (user-scalable entfernt), brauchen Eingabefelder mind. 16px */
        .textfield,
        .textfield2,
        .textfield3 {
            font-size: 16px;
        }
        /* Suchfelder auf Handy: mittig in der Karte (wie der Button darunter, der seine
           Zentrierung aus margin:auto zieht) und gleiche Hoehe wie das Herstellerfeld —
           auf Desktop bekommt #toolbez die 66px durch Flex-Stretch neben dem Button,
           beim Umbruch faellt das weg */
        .textfield {
            margin-left: auto;
            margin-right: auto;
            height: 66px;
        }
    }

    /* Foto-Klick-Details: EINE dunkle Leiste, per CSS an der Foto-Unterkante verankert
       (Overlay ist Kind des Foto-Containers — robust auch wenn das Foto noch laedt) */
    .karteV2 .toolinfoholder {
        left: 8px;
        right: 8px;
        top: auto !important;      /* Alt-CSS/Alt-JS setzen top — hier zaehlt nur bottom */
        bottom: 6px;
        width: auto;
        transform: none !important;
        line-height: 1.4;          /* kachelbild hat line-height:0 */
        z-index: 40;
        background: rgba(14, 30, 26, 0.9);
        border-radius: 10px;
        padding: 8px 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .karteV2 .toolinfoholder:empty { display: none; } /* Container existiert ab Render leer */
    .karteV2 .toolinfoholder .ToolInfo,
    .karteV2 .toolinfoholder .ToolInfo1 {
        background: transparent;
        color: #ffffff;
        text-align: center;
        font-size: 13.5px;
        line-height: 1.45;
        margin: 0 !important;
        padding: 2px 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* ================= Ende Karten-Redesign v2 ================= */

    /* ================= Modal-Redesign v2 (alle Werkzeug-Modals einheitlich, Referenz: Verleihen-Popup) =================
       Prinzip: Klassen ersetzen die Inline-Styles der statischen Overlay/Panel-Divs. IDs und JS-Handler unveraendert.
       Overlay behaelt inline nur noch style="opacity:0" (Teil der animate-Oeffnen/Schliessen-Mechanik). */
    .modalV2-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 100%;
        height: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* kein Scroll-Chaining auf die Seite dahinter */
        background-color: #000000b2;
        z-index: 2000;
    }

    /* Ab 1200px ist der Drawer eine feste 300px-Sidebar (body padding-left:300px).
       Das fixed-Overlay ignoriert das padding. NICHT per left:300 verschieben — das
       verschiebt die Bootstrap-Zentrierung und laesst das Panel rechts ueberlaufen.
       Stattdessen wie der Body ein padding-left:300px (mit border-box), damit das
       Panel sauber im Raum rechts der Sidebar zentriert und nirgends abgeschnitten wird. */
    @media (min-width: 1200px) {
        .modalV2-overlay {
            padding-left: 300px;
            box-sizing: border-box;
        }
    }

    .modalV2-panel {
        position: relative; /* nie fixed: Panel scrollt intern, Header bleibt sichtbar */
        /* Volle verfuegbare Breite (zwischen Sidebar und rechtem Rand, per Overlay-
           padding-left:300px), nur ~20px Rand links/rechts — keine feste 680er-Kappung.
           flex:0 0 auto ueberschreibt die Bootstrap-col-lg-8 flex-basis (66%), sonst
           bliebe das Panel schmal statt zu fuellen. */
        flex: 0 0 auto;
        width: 100%;
        max-width: calc(100% - 40px);
        margin: clamp(16px, 5vh, 56px) auto;
        box-sizing: border-box;
        /* Panel selbst scrollt (auf allen Breakpoints), damit Sticky-Header sichtbar bleibt
           und nur der Inhalt scrollt, nicht die Seite dahinter */
        max-height: min(92dvh, calc(100dvh - 48px));
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        overflow-wrap: break-word; /* lange Strings brechen um statt geclippt zu werden */
        border-radius: 16px;
        padding: clamp(12px, 3vw, 20px) clamp(10px, 3vw, 15px) clamp(16px, 3vw, 24px);
        background-color: #DDF3F5; /* Tuerkis wie App-Design (User-Wunsch, statt weiss) */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30);
        z-index: 2001;
    }

    /* Bootstrap-Row-Negativmargins (-15px) kappen -> kein horizontaler Ueberlauf */
    .modalV2-overlay > .row {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .modalV2-title {
        /* Titel scrollt mit dem Inhalt weg (kein sticky, User-Wunsch) */
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        color: #22272B;
        margin: 4px 0 10px 0;
        /* lange Werkzeugnamen/URLs brechen sauber um statt das Layout zu sprengen */
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    .modalV2-title-danger { color: #C7201F; }

    /* Erfolgs-Variante: gruenes Panel (fuer die alten Erfolgs-Popups), Titel weiss */
    .modalV2-panel--erfolg { background-color: rgb(36, 177, 151); }
    .modalV2-panel--erfolg .modalV2-title { color: #ffffff; }

    .modalV2-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        border: solid 2px #22272B;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 700;
        color: #22272B;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        transition-duration: 0.2s;
    }
    .modalV2-close:hover { background: #f0f4f3; transform: scale(1.05); }

    /* Im 'Neue Wartung erstellen'-Schritt kein X: dort wird ueber 'Zurück' geschlossen.
       Greift genau wenn der Zurück-Button dieses Schritts sichtbar ist. */
    #ToolWartungsScreen:has(.backToOverviewWartung:not(.sr-only)) .modalV2-close {
        display: none;
    }

    /* Sekundaer-/Abbrechen-Buttons: Ghost-Stil (auf tuerkisem Panel: weiss-transparent) */
    .modalV2-panel .deletechooser {
        border: none;
        background: rgba(255, 255, 255, 0.75);
        color: #33393E;
        font-weight: 500;
        border-radius: 12px;
        box-shadow: none;
    }
    .modalV2-panel .deletechooser:hover { background: #ffffff; }

    /* Primaer-Buttons im Modal: flach, weicher Schatten statt Klotz-Schatten */
    .modalV2-panel .reservechooser {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        font-weight: 600;
    }
    .modalV2-panel .reservechooser:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

    /* Einheitliche Button-Hoehe: .deletechooser hatte global kein padding und war flacher
       als .reservechooser (padding:15px) -> beide gleich hoch + gute Touch-Groesse */
    .modalV2-panel .reservechooser,
    .modalV2-panel .deletechooser {
        min-height: 46px;
        padding: 12px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border: solid 1px transparent; /* deletechooser hatte border:none -> 2px flacher als reserve */
    }

    /* Signalfarbe fuer destruktive Bestaetigung (Loeschen): roter, gefuellter Button */
    .modalV2-panel .deletechooser.modalV2-danger-btn {
        background: #E5484D;
        color: #ffffff;
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    .modalV2-panel .deletechooser.modalV2-danger-btn:hover { background: #D03B40; }

    /* ===== Einheitliche Button-Leiste: Desktop nebeneinander, Smartphone gestapelt =====
       Nicht sticky -> scrollt mit dem Inhalt, sitzt aber einheitlich unten & zentriert. */
    .modalV2-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding-top: 12px;
        margin-top: 12px;
    }
    .modalV2-footer > * {
        /* kein grow -> Buttons dehnen sich nicht zu den Raendern; sitzen als Gruppe
           mittig zusammen (justify-content:center) mit dem gap dazwischen.
           margin:0 !important killt das Basis-Button margin:auto — das absorbiert
           sonst als Flex-Item den freien Platz und spreizt die Buttons an die Raender. */
        flex: 0 1 auto;
        min-width: 160px;
        max-width: 260px;
        margin: 0 !important;
    }
    /* Smartphone: gestapelt, zentriert (align-items:center — die Buttons sind knapp
       schmaler als der Footer, sonst waeren sie linksbuendig ohne die alten margins) */
    @media (max-width: 650px) {
        .modalV2-footer { flex-direction: column; gap: 8px; align-items: center; }
        .modalV2-footer > * { flex: 1 1 auto; max-width: none; width: 100%; }
    }

    /* Tage-Auswahlboxen (Verleihen): moderne Chips */
    .modalV2-panel .choosebox {
        border: solid 1.5px #D2D8DB;
        border-radius: 10px;
        background-color: #ffffff;
        color: #33393E;
        box-shadow: none;
    }

    /* Zuordnungs-Kacheln: Original-Farben (Monteur cyan, Allgemein lila), weisse Icons,
       JS-Auswahl (weisser Rand + Opacity) funktioniert darauf weiter.
       right:0 neutralisiert die Alt-Hover-Animation (schob die Kacheln seitlich aus dem Panel). */
    .modalV2-panel #toggleHolderZuordnung {
        display: flex;
        gap: 10px;
        margin: 12px 0 0 0;
        padding: 0 4px;
        flex-wrap: wrap;
    }
    .modalV2-panel .ZuordnungFelder {
        flex: 1 1 0;
        max-width: calc(50% - 5px);
        border-radius: 14px !important;
        margin-top: 0;
        padding: 14px 6px;
        text-align: center;
        color: #ffffff;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
        right: 0 !important;
    }
    .modalV2-panel .MonteurwerkzeugBtn { background: #00C4DE; }
    .modalV2-panel .AllgemeinBtn { background: #756287; }
    .modalV2-panel .MonteurwerkzeugBtn:hover,
    .modalV2-panel .AllgemeinBtn:hover {
        right: 0 !important;
        padding-left: 6px;
        padding-right: 6px;
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
    }
    /* SMS-Tage-Stepper: [-] 14 Tage [+] in einer Reihe statt absoluter +/- Klötze */
    .modalV2-panel .zuordnungStepBtn {
        position: static;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background-color: #0A3242;
        color: #ffffff;
        font-size: 26px;
        line-height: 44px;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
        flex-shrink: 0;
    }
    .modalV2-panel .zuordnungStepBtn:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }

    /* "Neue Wartung erstellen" war absolut positioniert (right:21) und ueberdeckte die Headline */
    .modalV2-panel .WartungsMaskeErstellenOpen {
        position: static;
        margin: 10px auto 4px auto;
        padding: 10px 14px;
    }

    /* Innen-Elemente, die fuer dunkle Alt-Panels weiss gestylt waren: dunkle Variante auf mint */
    .modalV2-panel .lagerCfgLabel { color: #22272B; }
    .modalV2-panel .lagerCfgHint { color: #5A6268; }
    .modalV2-panel .textfield2 {
        color: #22272B;
        border-color: #33393E;
    }
    .modalV2-panel .textfield2::placeholder { color: #7C838A; }

    /* '+'-Button der E-Mail-Verwaltung: oben links, damit er nicht mit dem X kollidiert */
    .modalV2-panel .add-email {
        left: 15px;
        right: auto;
    }

    /* Staff-@-Icon (Emailliste) im Modal: oben links, damit es nicht mit dem X kollidiert */
    .modalV2-panel .Emailliste {
        position: absolute;
        top: 12px;
        left: 14px;
        width: auto;
        text-align: left;
        z-index: 9;
    }

    /* ===== Smartphone: Bottom-Sheet (Variante A) — Panel gleitet von unten hoch ===== */
    @media (max-width: 650px) {
        .modalV2-overlay {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        .modalV2-overlay > .row {
            margin: 0 !important;
            padding: 0 !important;
            width: 100%;
        }
        .modalV2-panel {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 auto;
            margin: 0 !important;
            border-radius: 20px 20px 0 0;
            max-height: 90dvh; /* dvh statt vh: korrekte Hoehe trotz mobiler Browser-Leisten */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            touch-action: pan-y; /* vertikale Gesten selbst behandeln (Swipe-to-dismiss) */
            padding: 8px 10px 28px 10px;
            animation: modalV2SheetHoch 0.28s ease-out;
        }
        /* Grabber-Strich oben im Sheet */
        .modalV2-panel::before {
            content: "";
            display: block;
            width: 42px;
            height: 4px;
            border-radius: 4px;
            background: #D2D8DB;
            margin: 4px auto 14px auto;
        }
        /* Mobil kein X: Schliessen ueber Abbrechen-Zeile + Tipp auf den Hintergrund.
           Ausnahme .modalV2-close--immer: Modals ohne eigenen Abbrechen-Button (Historie, MehrFotos, Wartungsuebersicht) */
        .modalV2-close { display: none; }
        .modalV2-close--immer { display: flex; }
        .modalV2-title { font-size: 18px; }
        .modalV2-panel .reservechooser,
        .modalV2-panel .deletechooser {
            flex: none;
            /* nicht 100%: Bootstrap-rows haben -15px-Margins, Buttons wuerden randlos kleben */
            width: calc(100% - 24px);
            max-width: calc(100% - 24px);
            margin-left: 12px;
            margin-right: 12px;
        }
    }

    /* Nur weiches Einblenden, keine Positions-Bewegung mehr (Modal soll nicht "springen") */
    @keyframes modalV2SheetHoch {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    /* Lade-Pill: verzoegert einblenden (schnelle Ajax-Calls bleiben unsichtbar) */
    .myloader {
        opacity: 0;
        animation: myloaderZeigen 0.01s linear 0.35s forwards;
    }
    .myloader.sr-only {
        animation: none; /* Reset: beim naechsten Einblenden startet die Verzoegerung neu */
        opacity: 0;
    }
    @keyframes myloaderZeigen { to { opacity: 1; } }
    .myloaderPill {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #ffffff;
        border-radius: 999px;
        padding: 6px 20px 6px 8px;
        margin-top: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        color: #33393E;
        font-size: 14px;
        font-weight: 600;
    }
    .myloaderPill .lds-roller {
        display: inline-block;
        width: 80px;
        height: 80px;
        transform: scale(0.4);
        transform-origin: center;
        margin: -24px;
    }
    /* ===== Historie- & Wartungs-Modal: Inhalte mobil gestapelt (alle Infos bleiben sichtbar) ===== */
    @media (max-width: 650px) {
        /* --- Historie --- */
        .modalV2-panel .toolbildhistorie {
            position: static;
            display: block;
            margin: 0 auto 10px auto;
            height: 90px;
            border-radius: 8px;
        }
        .modalV2-panel #euroField { width: 140px; height: 38px; }
        .modalV2-panel #editvalue {
            position: static;
            width: auto;
            display: inline-block;
            margin: 6px 0 0 0;
        }
        .modalV2-panel #Auswertungschart { margin-left: 0; }
        .modalV2-panel #Auswertungschart .col-8,
        .modalV2-panel #Auswertungschart .col-4 {
            flex: 0 0 100%;
            max-width: 100%;
            padding-left: 0;
        }
        .modalV2-panel .glass-container { height: auto; }
        .modalV2-panel .glass-container2 { margin-top: 12px; text-align: center; }
        .modalV2-panel .bar-container { flex-wrap: wrap; padding: 4px 6px; }
        .modalV2-panel .bar-label { min-width: 0; flex: 0 0 100%; margin-bottom: 2px; }
        .modalV2-panel .bar-value {
            position: static;
            margin-left: 8px;
            font-size: 12px;
            white-space: nowrap;
        }
        .modalV2-panel .bar { height: 22px; }
        /* Timeline: Tages-Chip als eigene Zeile (Info bleibt), Karten volle Breite, Deko-Dots weg */
        .modalV2-panel .historyholder .tagesabstand {
            width: auto !important;
            flex: 0 0 100%;
            max-width: 100%;
            text-align: left;
            padding-left: 6px;
        }
        .modalV2-panel .historyholder .BetragWertWerkzeuganzeige {
            position: static;
            display: inline;
            margin-left: 8px;
        }
        .modalV2-panel .historyholder .placeholderhistory { display: none; }
        .modalV2-panel .historyholder .card {
            flex: 0 0 96%;
            max-width: 96%;
        }
        .modalV2-panel .historyholder [class*="offset-"] { margin-left: 2%; }

        /* --- Wartung --- */
        .modalV2-panel #overViewErstellteWartungen { margin-top: 16px; }
        .modalV2-panel .headlineEingestellteWartungenRow > div {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .modalV2-panel .EditEingestellteWartungklein,
        .modalV2-panel .WartungDidklein,
        .modalV2-panel .DeleteEingestellteWartung {
            position: static;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 6px 6px 0 0;
            z-index: auto;
        }
        .modalV2-panel .headlinehistory {
            position: static;
            left: auto;
            width: 100%;
            padding: 4px 8px 0 8px;
        }
        .modalV2-panel .datehistory {
            position: static;
            top: auto;
            right: auto;
            text-align: left;
            padding: 0 8px 4px 8px;
            font-size: 12px;
            color: #5A6268;
        }
        .modalV2-panel .WartungHistoryblock {
            min-height: auto;
            padding-bottom: 8px;
        }
    }
    /* ===== Ende Historie/Wartung mobil ===== */

    /* ================= Ende Modal-Redesign v2 ================= */

    /* Overlay-Container für die ToolInfo-Zeilen – absolut positioniert,
       damit das Einblenden die Höhe der Werkzeug-Kachel nicht mehr verändert.
       z-index niedrig: liegt HINTER den Buttons (reservation, toolVerleihen, moreinfotool,
       toolWartung, toolnotes, Werkzeugumbenennen, Werkzeugdelete, WerkzeugLagerConfig,
       toolverlinkung, toolmoreimages – alle z-index 10+), aber über dem Bild. */
    .toolinfoholder {
        position: absolute;
        top: 106px;                     /* fester Startwert; per JS auf "ToolNummerBild-Top + 66 px" verfeinert */
        left: 50%;
        transform: translateX(-50%);
        width: 280px;
        z-index: 1;
        pointer-events: none;
    }
    .toolinfoholder > * {
        pointer-events: auto;
    }
    .toolinfoholder .ToolInfo,
    .toolinfoholder .ToolInfo1 {
        margin: 4px 0 0 0 !important;   /* überschreibt die alten -226px / 10px-Margins */
        padding: 4px 8px;
        background: rgba(255, 255, 255, 0.92);
        text-align: center;
        border-radius: 4px;
        font-size: 13px;
        color: #222;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    .toolinfoholder .placeholderTools {
        display: none;                  /* nur Spacer – im Overlay nicht nötig */
    }

    .audiocontroller {
        margin-left: -20px;
        width: 270px;
        margin-top: 250px;

    }

    .ToolNummerBild {
        text-align: center;
        background: rgb(0, 0, 0);
        border-radius: 20px;
        border: solid 1px black;
        padding-left: 3px;
        padding-right: 3px;
        width: 100px;
        color: white;
        z-index: 2;
        position: relative;
        margin-top: -280px;
        margin-left: -10px;

    }

    .nmbrwerkzeug {
        text-align: center;
        background: rgb(0, 0, 0);
        border-radius: 20px;
        border: solid 1px black;
        padding-left: 3px;
        padding-right: 3px;
        width: 100px;
        color: white;
        margin-top: 40px;
        position: absolute;
        z-index: 3;

    }

    .rahmenWerkzeukkisteMitarbeiter {
        padding-bottom: 10px;
        background: rgba(255, 255, 255, 0.5);
        border: solid 1px black;
        border-radius: 10px;
        text-align: center;
        margin-top: 20px;
    }

    .werkzeugbild {
        margin-top: 20px;
        background: red;
        height: 200px;
        width: 170px;
    }


    .moreinfotool {
        margin-left: 107px;
        right: 242px;
        height: 35px;
        width: 35px;
        position: absolute;
        top: 189px;
        overflow: hidden;
        z-index: 10;
        background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);
        padding: 5px;
        border-radius: 120px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .moreinfotool:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .moreinfopic {
        height: 33px;

    }

    .aushleihenpic {
        height: 25px;

    }

    .wartungpic {
        height: 25px;

    }

    .noteattachmentpic {
        height: 25px;

    }


    .toolVerleihen {
        margin-left: 107px;
        right: 242px;
        height: 35px;
        width: 35px;
        position: absolute;
        top: 189px;
        overflow: hidden;
        z-index: 10;
        background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);
        padding: 5px;
        border-radius: 120px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .toolVerleihen:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .toolVerleihen {
        height: 33px;

    }


    .toolAnfragen {


    height: 35px;
    /* width: 35px; */
    position: relative;
    overflow: hidden;
    z-index: 10;
    background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);
    padding: 5px;
    border-radius: 120px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    transition-duration: 0.4s;
    opacity: 0.8;
    margin-top: -39px;

    }
    .toolAnfragenUmschlag {
        background: url('Images/umschlag.png') no-repeat center;
        background-size: 22px;
    height: 25px;
    /* width: 13px; */
    position: relative;
    z-index: 10;
      

    }

    .toolAnfragen:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .toolWartung {
        margin-left: 107px;
        right: 242px;
        height: 35px;
        width: 35px;
        position: absolute;
        margin-top: -71px;
        overflow: hidden;
        z-index: 10;
        background: orange;
        padding: 5px;
        border-radius: 120px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .toolWartung:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .toolWartung {
        height: 33px;

    }

    .toolmoreimages {
        margin-left: 64px;
        right: 23px;
        height: 37px;
        width: 35px;
        position: absolute;
        margin-top: -33px;
        /* overflow: hidden; */
        z-index: 10;
        /* background: orange; */
        /* padding: 5px; */
        /* border-radius: 120px; */
        /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); */
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .toolverlinkung {
        align-items: center;
    background: rgb(0 0 0);
    border: solid 1px rgb(165, 239, 255);
    border-radius: 111px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    display: flex;
    height: 35px;
    justify-content: center;
    margin-top: -23px;
    opacity: 0.8;
    position: absolute;
    right: 63px;
    transition-duration: 0.3s;
    width: 35px;
    z-index: 10;
    }

    .toolverlinkung:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        opacity: 1;
        border: solid 1px white;
    }

    /* Verlinkungs-Icon bleibt sichtbar, aber ausgegraut wenn keine aktive Verknüpfung */
    .toolverlinkung.toolverlinkung-ohne-verbindung {
        opacity: 0.5;
        border-color: rgba(120, 120, 120, 0.6);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
    }

    .toolverlinkung.toolverlinkung-ohne-verbindung .imageToolverlinkungpic {
        filter: grayscale(1);
        opacity: 0.65;
    }

    .toolverlinkung.toolverlinkung-ohne-verbindung:hover {
        opacity: 0.72;
        border-color: rgba(165, 239, 255, 0.5);
    }

    .imageToolverlinkungpic {
        height: 20px;
        width: 20px;
    }

    #mitarbeiterVerlinkungList option:disabled {
        color: #888888;
        background-color: #ececec;
    }

    .toolmoreimages:hover {
        box-shadow: 15px 15px 9px rgba(32, 32, 32, 0.692);
        transition-duration: 0.4s;
        padding: 1px;
        opacity: 1;

    }

    .toolmoreimages {
        height: 33px;

    }

    .imageToolmoreimagespic {
        height: 57px;
    }

    /* .toolmoreimages {
        margin-left: 107px;
        right: 200px;
        height: 35px;
        width: 35px;
        position: absolute;
        margin-top: -71px;
        overflow: hidden;
        z-index: 10;
        background: rgba(0, 255, 204, 0);
        padding: 5px;
        border-radius: 120px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .toolmoreimages:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .toolmoreimages {
        height: 33px;

    } */

    .toolnotes {
        margin-left: 107px;
        right: 242px;
        height: 35px;
        width: 35px;
        position: absolute;
        margin-top: -22px;
        overflow: hidden;
        z-index: 10;
        background: orange;
        padding: 5px;
        border-radius: 120px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.4s;
        opacity: 0.8;

    }

    .toolnotes:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        padding: 6px;
        opacity: 1;
        border: solid 1px white
    }

    .toolnotes {
        height: 33px;

    }





    .editMitarbeiter {
        height: 30px;
        position: absolute;
        top: 5px;
        right: 5px;
        transition-duration: 0.3s;
        cursor: pointer;
        opacity: 0.7;

    }

    .editMitarbeiter:hover {
        height: 35px;
        transition-duration: 0.3s;
        opacity: 1;
    }

    .helpbutton {
        width: 30px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        padding-bottom: 10px;
        height: 30px;
        border-radius: 50px;
        background-color: #ffb226;
        border: solid 1px black;
        color: white;
        position: absolute;
        top: 10px;
        right: 9px;
        cursor: pointer;
    }

    .explainbox {
        width: 300px;
        max-width: calc(100vw - 48px);
        padding: 32px;
        opacity: 0;
        border: solid 1px black;
        background-color: #ffb226;
        color: white;
        position: absolute;
        right: 24px;
        top: -314px;
        z-index: 3;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;

    }

    #togleswitch {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 20px;
    }


    .Werkzeugdelete {
        text-align: center;
        background: rgb(255, 57, 57);
        border-radius: 20px;
        border: solid 1px rgb(255, 64, 64);
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 3px;
        width: 35px;
        color: white;
        z-index: 2;
        position: relative;
        margin-top: -50px;
        margin-left: 80px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        height: 35px;
        z-index: 10;
        opacity: 0.7;
    }

    .Werkzeugdelete:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;
        opacity: 1;
        border: solid 1px white
    }

    .reservation {
        text-align: center;
        background: #DDF3F5;
        border-radius: 20px;
        border: solid 1px rgb(45 138 135);
        padding-left: 5px;
        padding-right: 3px;
        padding-top: 0px;
        width: 35px;
        color: rgb(0, 0, 0);
        z-index: 2;
        position: relative;
        margin-top: -48px;
        margin-left: -10px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        height: 35px;
        z-index: 100;
        opacity: 0.7;
        top: -185px;
        font-size: 22px;
    }

    .reservation:hover {
        opacity: 1;
        border: solid 1px white;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        transition-duration: 0.4s;

    }

    .ScanDevicedelete {
        text-align: center;
        background: rgb(255, 57, 57);
        border-radius: 20px;
        border: solid 1px rgb(255, 64, 64);
        height: 30px;
        width: 60px;
        color: white;
        z-index: 2;
        position: relative;


        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .ScanDevicedelete:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 105px;
        transition-duration: 0.3s;
    }


    .delterWartungsart {
        text-align: center;
        background: rgb(255, 57, 57);
        border-radius: 20px;
        border: solid 1px rgb(255, 64, 64);
        height: 30px;
        width: 150px;
        color: white;
        z-index: 2;
        position: relative;
        margin-top: 3px;
        padding-top: 3px;

        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .delterWartungsart:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 155px;
        transition-duration: 0.3s;
    }

    .NOTdelterWartungsart {
        text-align: center;
        color: rgb(255, 255, 255);
        background: #0A3242;
        border-radius: 20px;
        margin-top: 10px;
        height: 30px;
        width: 150px;
        color: white;
        z-index: 2;
        position: relative;
        padding-top: 3px;


        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .NOTdelterWartungsart:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 155px;
        transition-duration: 0.3s;
    }


    .delterWartungen {
        text-align: center;
        background: rgb(255, 57, 57);
        border-radius: 20px;
        border: solid 1px rgb(255, 64, 64);
        height: 30px;
        width: 228px;
        color: white;
        z-index: 2;
        position: absolute;
        margin-top: 42px;
        padding-top: 3px;

        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        right: 10;
    }

    .delterWartungen:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 232px;
        transition-duration: 0.3s;
    }

    .NOTdelterWartungen {
        text-align: center;
        color: rgb(255, 255, 255);
        background: #0A3242;
        border-radius: 20px;
        margin-top: 85px;
        height: 30px;
        width: 150px;
        color: white;
        z-index: 2;
        position: absolute;
        padding-top: 3px;


        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        right: 10;
    }

    .NOTdelterWartungen:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 155px;
        transition-duration: 0.3s;
    }


    .delterAnhang {
        text-align: center;
        background: rgb(255, 57, 57);
        border-radius: 20px;
        border: solid 1px rgb(255, 64, 64);
        height: 30px;
        width: 228px;
        color: white;
        z-index: 2;
        position: absolute;
        margin-top: -6px;
        padding-top: 3px;

        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        right: 10;
    }

    .delterAnhang:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 232px;
        transition-duration: 0.3s;
    }

    .NOTdelterAnhang {
        text-align: center;
        color: rgb(255, 255, 255);
        background: #0A3242;
        border-radius: 20px;
        margin-top: 32px;
        height: 30px;
        width: 150px;
        color: white;
        z-index: 2;
        position: absolute;
        padding-top: 3px;


        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        right: 10;
    }

    .NOTdelterAnhang:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 155px;
        transition-duration: 0.3s;
    }

    .picholder {
        text-align: center;
    }

    .phoneholder2 {
        margin-top: 30px;
    }

    .platzhalterbild {
        height: 36px;
        width: 39px;
    }

    .toolzuordnung {
        font-size: 30px;
        position: absolute;
        padding-left: 1px;
        padding-right: 1px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        color: white;
        border: solid 1px white;
        left: 217px;
        top: 33px;
        padding-bottom: 7px;
        padding-top: 5px;
        transition-duration: 0.3s;
    }

    .toolzuordnung:hover {
        padding-bottom: 10px;
        padding-top: 8px;
        transition-duration: 0.3s;
    }

    .Werkzeugumbenennen {
        text-align: center;
        background: rgb(57, 120, 255);
        border-radius: 111px;
        border: solid 1px rgb(57, 120, 255);
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 5px;
        height: 35px;
        width: 35px;
        color: white;
        z-index: 2;
        position: relative;
        top: 0px;
        margin-top: -35px;
        margin-left: 36px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
        z-index: 10;
        opacity: 0.7;
    }


    .Werkzeugumbenennen:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        /* width: 105px; */
        transition-duration: 0.3s;
        opacity: 1;
        border: solid 1px white
    }


    .Werkzeugreaktivieren {
        text-align: center;
        background: rgb(57, 120, 255);
        border-radius: 20px;
        border: solid 1px rgb(57, 120, 255);
        padding-left: 3px;
        padding-right: 3px;
        width: 100px;
        color: white;
        z-index: 2;
        position: relative;
        margin-top: -26px;
        margin-left: -10px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .Werkzeugreaktivieren:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        width: 105px;
        transition-duration: 0.3s;
    }

    .ToolnameBild {
        text-align: center;
        font-weight: 300;
        white-space: nowrap;

    }
 
    .FirmenbezTool, .HerstellerbezTool {
        text-align: center;
        font-weight: 200;
        white-space: nowrap;
        margin-top: 5px;
        cursor: pointer;

    }

    .FirmenbezTool:hover, .HerstellerbezTool:hover {
        text-decoration: underline;
    }

    /* Gleiche Zeile, aber reine Angabe: in der Werkzeugsuche ist der Hersteller
       nur Information — kein Zeiger, kein Unterstrich, kein Klick. */
    .HerstellerbezStatisch {
        text-align: center;
        font-weight: 200;
        white-space: nowrap;
        margin-top: 5px;
        cursor: default;
    }

    .kachelbild {
        border-radius: 10px;
        margin-left: -16px;
        margin-top: 5px;


    }

    .kachelbild_werkzeugkiste,
    .kachelbild_reparaturliste {
        border-radius: 10px;
        margin-left: -16px;
        margin-right: -15px;
        margin-top: 5px;
    }

    /* Feste Fotohöhe 280px: Badge (-280px) und .placemaker (260px) rechnen mit dieser
       Höhe — ohne Regel rendern Uploads in Originalgröße und das Badge verrutscht */
    .toolbild_werkzeugkiste,
    .toolbild_reparaturliste {
        display: block;
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

    .placemaker {
        height: 260px;
    }

    .Werkzeugubernahme {
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        margin-top: 30px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    /* Container, der die zwei halben Buttons (Übernehmen / Einlagern) nebeneinander zeigt */
    .ubernahmeWrap {
        width: 100%;
        box-sizing: border-box;
        padding: 0 12px;
        margin-top: 30px;
        text-align: center;
        font-size: 0; /* entfernt den Whitespace-Spalt zwischen den inline-block Buttons */
    }

    .ubernahmeWrap .Werkzeugubernahme,
    .ubernahmeWrap .WerkzeugEinlagern {
        display: inline-block;
        vertical-align: top;
        width: 47%;
        margin: 0 1%;
        padding: 14px 6px;
        font-size: 14px;
    }

    .WerkzeugEinlagern {
        margin: auto;
        margin-top: 30px;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 0, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .Werkzeugubernahme:hover,
    .WerkzeugEinlagern:hover {
        transition-duration: 0.3s;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    /* Runder Konfig-Button in der Werkzeug-Kachel (wie .toolverlinkung), nur für Staff sichtbar */
    .WerkzeugLagerConfig {
        align-items: center;
        background: rgb(120, 98, 135);
        border: solid 1px rgb(165, 239, 255);
        border-radius: 111px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        display: flex;
        height: 35px;
        width: 35px;
        justify-content: center;
        align-items: center;
        margin-top: -23px;
        right: 105px;
        position: absolute;
        z-index: 10;
        opacity: 0.85;
        overflow: hidden;
        transition-duration: 0.3s;
    }

    .WerkzeugLagerConfig:hover {
        transition-duration: 0.3s;
        opacity: 1;
        border: solid 1px white;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    .lagerconfigpic {
        height: 22px;
    }

    .lagerFotoVorlagenRow {
        padding: 6px 10px;
        margin-top: 6px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.4);
        color: #22272B;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .lagerFotoDeleteBtn {
        cursor: pointer;
        background: rgb(255, 57, 57);
        color: white;
        border-radius: 6px;
        padding: 2px 8px;
        font-size: 13px;
    }

    .lagerFotoAufnehmenBtn {
        cursor: pointer;
        background: #0A3242;
        color: white;
        border-radius: 6px;
        padding: 4px 10px;
        font-size: 13px;
    }

    .lagerFotoDone {
        color: #1B7A3D;
        font-weight: bold;
    }

    .lagerThumb {
        height: 38px;
        border-radius: 4px;
        margin-left: 6px;
    }

    /* ---- Lager-Rückgabe Popups: aufgeräumtes Layout, dunkle Felder/Placeholder
       (Panels sind modalV2/mint — weiße Schrift wäre dort unlesbar) ---- */
    #LagerRuckgabeConfigScreen input:not([type=checkbox]),
    #LagerBuchenScreen input:not([type=checkbox]) {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        background: rgba(255, 255, 255, 0.5);
        color: #22272B;
        border: solid 1px #33393E;
        border-radius: 8px;
        padding: 9px 11px;
        font-size: 15px;
    }

    #LagerRuckgabeConfigScreen input:not([type=checkbox])::placeholder,
    #LagerBuchenScreen input:not([type=checkbox])::placeholder {
        color: #7C838A;
        opacity: 1;
    }

    #LagerRuckgabeConfigScreen input:not([type=checkbox]):focus,
    #LagerBuchenScreen input:not([type=checkbox]):focus {
        outline: none;
        border-color: rgb(120, 98, 135);
        background: rgba(255, 255, 255, 0.8);
    }

    .lagerCfgBlock {
        width: 92%;
        margin-top: 16px;
    }

    /* =====================================================================
       LAGER-RUECKGABE KONFIGURIEREN (Popup an der Werkzeugkarte)
       Bis 18.08.2026 standen acht Bloecke mit zehn Eingabefeldern gleichzeitig
       im Bild — auch bei ausgeschalteter Funktion. Jetzt: ein Schalter, danach
       nur der Teil, der zur gewaehlten Nachweisart gehoert; Karte, Koordinaten
       und Umkreis liegen im aufklappbaren "Ort".
       ===================================================================== */
    .lagerCfgWerkzeug {
        text-align: center;
        color: #42606B;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .lagerCfgInhalt {
        width: 92%;
        max-width: 560px;
    }

    /* Der Schalter blendet den Rest ohne JS ein und aus — er steht als
       Geschwister VOR .lagerCfgRest. */
    .cfgSchalterInput {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .lagerCfgRest { display: none; }
    .cfgSchalterInput:checked ~ .lagerCfgRest { display: block; }

    .cfgSchalterZeile {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #FFFFFF;
        border: 1px solid #DCE7EA;
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0;
        cursor: pointer;
    }

    .cfgSchalterText { flex: 1 1 auto; }
    .cfgSchalterTitel { display: block; font-weight: 700; color: #0A3242; font-size: 15px; }
    .cfgSchalterHint { display: block; font-size: 12.5px; color: #42606B; margin-top: 2px; }

    .cfgSchalterSpur {
        position: relative;
        flex: 0 0 auto;
        width: 46px;
        height: 26px;
        border-radius: 999px;
        background: #C6D8DD;
        transition: background .15s;
    }

    .cfgSchalterSpur::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #FFFFFF;
        transition: left .15s;
    }

    .cfgSchalterInput:checked + .cfgSchalterZeile .cfgSchalterSpur { background: #0A3242; }
    .cfgSchalterInput:checked + .cfgSchalterZeile .cfgSchalterSpur::after { left: 23px; }
    .cfgSchalterInput:focus-visible + .cfgSchalterZeile { outline: 2px solid #4BBFC8; outline-offset: 2px; }

    .cfgAbschnitt { margin-top: 18px; }

    .cfgAbschnittTitel {
        font-size: 13px;
        font-weight: 700;
        color: #08313E;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .cfgAbschnittHint {
        font-size: 12.5px;
        color: #42606B;
        margin-top: 3px;
        line-height: 1.45;
    }

    /* Nachweisart als zwei Karten statt zweier Radiozeilen */
    .cfgWahl { display: flex; gap: 10px; margin-top: 10px; }

    .cfgWahlInput {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .cfgWahlKarte {
        flex: 1 1 0;
        background: #FFFFFF;
        border: 1px solid #DCE7EA;
        border-radius: 10px;
        padding: 12px;
        margin: 0;
        text-align: center;
        cursor: pointer;
    }

    .cfgWahlInput:checked + .cfgWahlKarte {
        border-color: #0A3242;
        box-shadow: inset 0 0 0 1px #0A3242;
    }

    .cfgWahlInput:focus-visible + .cfgWahlKarte { outline: 2px solid #4BBFC8; outline-offset: 2px; }

    .cfgWahlIcon { display: block; font-size: 22px; line-height: 1.1; }
    .cfgWahlTitel { display: block; font-weight: 700; color: #0A3242; font-size: 14px; margin-top: 4px; }
    .cfgWahlHint { display: block; font-size: 12px; color: #42606B; margin-top: 2px; line-height: 1.35; }

    .cfgFeld { margin-top: 14px; }

    .cfgFeldLabel {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #0A3242;
        margin-bottom: 4px;
    }

    .cfgFeld input[type="text"],
    .cfgFeld input[type="number"] {
        width: 100%;
        height: 44px;
        padding: 0 12px;
        border: 1px solid #C6D8DD;
        border-radius: 9px;
        background: #FFFFFF;
    }

    /* Ausnahme-Regel als eigene Zeile, nicht als Fliesstext mit Kaestchen */
    .cfgZeileSchalter {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #FFFFFF;
        border: 1px solid #DCE7EA;
        border-radius: 10px;
        padding: 10px 12px;
        margin: 10px 0 0 0;
        font-size: 13.5px;
        color: #24505C;
        cursor: pointer;
    }

    .cfgZeileCheck { transform: scale(1.25); flex: 0 0 auto; }

    /* Einrichtungssachen aufklappbar */
    .cfgDetails {
        margin-top: 10px;
        background: #FFFFFF;
        border: 1px solid #DCE7EA;
        border-radius: 10px;
        overflow: hidden;
    }

    .cfgDetailsKopf {
        list-style: none;
        cursor: pointer;
        padding: 11px 14px;
        font-size: 13.5px;
        font-weight: 600;
        color: #0A3242;
    }

    .cfgDetailsKopf::-webkit-details-marker { display: none; }
    .cfgDetailsKopf::after { content: ' ▾'; color: #42606B; }
    .cfgDetails[open] .cfgDetailsKopf::after { content: ' ▴'; }
    .cfgDetails[open] .cfgDetailsKopf { border-bottom: 1px solid #DCE7EA; }
    .cfgDetailsInhalt { padding: 12px 14px 14px 14px; }

    .cfgListe { margin-top: 8px; }

    .lagerCfgLabel {
        color: #22272B;
        font-size: 15px;
        display: block;
        margin-bottom: 5px;
    }

    .lagerCfgHint {
        color: #5A6268;
        font-size: 13px;
        margin-top: 3px;
    }

    .lagerInlineRow {
        display: flex;
        gap: 8px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

    .lagerInlineRow input {
        flex: 1 1 120px;
    }

    .lagerInlineBtn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 14px;
        border-radius: 8px;
        background: #0A3242;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 5px rgba(40, 40, 40, 0.5);
        transition-duration: 0.2s;
    }

    .lagerInlineBtn:hover {
        box-shadow: 5px 5px 6px rgba(40, 40, 40, 0.5);
    }

    /* Foto-Vorlagen-/Foto-Zeilen in den Popups */
    .lagerFotoVorlagenRow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 10px;
        margin-top: 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.4);
        color: #22272B;
    }

    .lagerFotoVorlagenRow .lagerFotoVorlagenBez {
        flex: 1 1 140px;
        min-width: 120px;
    }

    .lagerBeispielThumb {
        height: 90px;
        border-radius: 6px;
        border: solid 2px rgba(0, 0, 0, 0.35);
        object-fit: cover;
        max-width: 100%;
    }

    /* Vorlage-/Beispielfoto, das der Monteur beim Einlagern sieht – groß angezeigt */
    .lagerBeispielUserThumb {
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 8px;
        border: solid 2px rgba(0, 0, 0, 0.35);
        margin-top: 4px;
        object-fit: contain;
    }

    /* Foto-Aufnahme-Zeile beim Einlagern: Vorlage links, eigenes Foto rechts */
    .lagerFotoTitleLine {
        width: 100%;
        font-weight: bold;
        color: #22272B;
        margin-bottom: 6px;
        font-size: 15px;
    }

    .lagerFotoVergleichRow {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        width: 100%;
    }

    .lagerFotoVergleichBox {
        flex: 1 1 130px;
        min-width: 120px;
        text-align: center;
        color: #22272B;
    }

    .lagerFotoVergleichLabel {
        font-size: 12px;
        opacity: 0.9;
        margin-bottom: 4px;
    }

    .lagerBuchenAntwortHolder {
        width: 100%;
    }

    .lagerBuchenAntwortThumb {
        width: 100%;
        max-width: 320px;
        height: auto;
        border-radius: 8px;
        border: solid 2px rgba(120, 255, 120, 0.85);
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

    .lagerFotoPlatzhalter {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 18px 8px;
        border: dashed 2px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        color: #5A6268;
        font-size: 12px;
        font-style: italic;
        text-align: center;
    }

    /* "Werkzeug einlagern"-Button ausgegraut, solange für das Werkzeug nicht freigeschaltet */
    .WerkzeugEinlagern.lagerEinlagernDisabled {
        opacity: 0.42;
        filter: grayscale(0.65);
        cursor: not-allowed;
    }

    .lagerFotoBeispielBtn {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.5);
        color: #22272B;
        border-radius: 6px;
        padding: 5px 9px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Historie: Karte "Einlager-Fotos ansehen" – gleiche Optik wie Übernahmefoto-Karte */
    .lagerprotokollhistoriecard {
        cursor: pointer;
        margin-top: 6px;
        padding: 8px 6px;
        border-radius: 8px;
        text-align: center;
        background: rgba(43, 92, 135, 0.18);
        border: solid 1px rgba(43, 92, 135, 0.6);
        transition-duration: 0.2s;
    }

    .lagerprotokollhistoriecard:hover {
        background: rgba(43, 92, 135, 0.32);
    }

    /* Foto-Ansicht-Popup: ein Foto + Admin-Vorlage nebeneinander */
    .lagerFotoViewRow {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
        margin-top: 14px;
        padding: 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
    }

    .lagerFotoViewItem {
        flex: 1 1 180px;
        text-align: center;
        color: #5A6268;
        font-size: 13px;
    }

    .lagerFotoViewItem img {
        width: 100%;
        max-width: 320px;
        border-radius: 6px;
        cursor: pointer;
    }


    .hinweisMessage {
        text-align: center;
        font-size: 18px;
        color: #5A6268;
        font-weight: 400;
        margin-top: 30px;
    }


    .deletechooser {
        border: solid 2px white;
        text-align: center;
        margin-top: 20px;
        color: white;
        cursor: pointer;
        border-radius: 10px;
        transition-duration: 0.3s;
        background: transparent;

    }

    .deletechooser:hover {
        background: rgba(255, 255, 255, 0.226);
        transition-duration: 0.3s;
    }

    .reservechooser {
        /* border: solid 2px black;
        text-align: center;
        margin-top: 20px;
        color: black;
        cursor: pointer;
        border-radius: 10px;
        transition-duration: 0.3s;
        background: transparent; */

        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);

    }

    .reservechooser:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);


    }

    .center-button {
        display: flex;
        justify-content: center;
        /* Zentriert horizontal */
        align-items: center;
        /* Zentriert vertikal */
        height: 60px;
        /* Optional: Stellt sicher, dass das Elternteil die volle Höhe hat */
    }

    .wejournbtn {

        display: inline-block;
        /* Ändere den Display-Typ auf inline-block */
        width: 300px;
        max-width: 100%;
        box-sizing: border-box;
        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 150px;
        background-color: rgb(0, 0, 0);
        cursor: pointer;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);

    }

    .wejournbtn:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);


    }

    .WartungsMaskeErstellenOpen {
        /* border: solid 2px black;
        text-align: center;
        margin-top: 20px;
        color: black;
        cursor: pointer;
        border-radius: 10px;
        transition-duration: 0.3s;
        background: transparent; */

        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        margin-top: 20px;
        right: 21;
        position: absolute;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);

    }

    .WartungsMaskeErstellenOpen:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);


    }




    /* Rot-pinke ID-Button-Gruppe entfernt (Modal-Redesign v2):
       #noAusleihenTool, #AbbrechenjetztWartungBuchen und #BackToWarungsOverView
       sind jetzt normale Sekundaerbuttons (.deletechooser) im modalV2-Panel. */

    .noWartungstyp {
        /* border: solid 2px black;
        text-align: center;
        margin-top: 20px;
        color: black;
        cursor: pointer;
        border-radius: 10px;
        transition-duration: 0.3s;
        background: transparent; */

        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: rgb(248, 55, 84);
        cursor: pointer;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);

    }

    .noWartungstyp:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    .ToolNameForWartung {
        font-weight: 600;
    }

    #overViewErstellteWartungen {
        margin-top: 75px;


    }

    .ErstellteWartung {
        border: solid 1px #223534;
        margin-top: 30px;
    }

    .headlineEingestellteWartungen {
        min-height: 60px;
        background: #223534;
        color: white;
        padding-top: 10px;
        padding-bottom: 10px;
    }


    .WartungHistoryblock {
        min-height: 90px;
        background: #223534;
        color: white;
        padding-top: 10px;
        padding-bottom: 14px;
        border-radius: 10px;
        margin-top: 15px;
        overflow: hidden;
        box-shadow: -1px 2px 8px 1px rgb(56 56 56 / 69%);
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .WartungHistoryblock:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        /* color: black; */
        border: solid 1px rgba(255, 255, 255, 0.463);
    }

    .historylogowhite {
        height: 60px;
        margin-top: -8px;
        background-size: 50px;
    }

    .headlinehistory {
        color: white;
        font-size: 22px;
        margin-top: 5px;
        position: absolute;
        left: 60px;
    }

    .placemakerwartunghistory {
        height: 20px;
    }


    .datehistory {
        color: white;
        font-size: 25px;
        text-align: right;
        position: absolute;
        top: 2px;
        right: 10px;


    }

    .filehistoryholder {
        height: 104px;
        background-color: rgba(255, 0, 0, 0);
        overflow: scroll;
    }

    .notizhistoryholder {
        height: 50px;

    }

    .placeholderhistory {
        height: 10px;
    }



    .Printerlogo {
        position: absolute;
        border: solid 1px white;
        border-radius: 20px;
        width: 121px;
        height: 34px;
        right: 112px;
        text-align: center;
        margin-top: -1px;
        transition-duration: 0.3s;
        z-index: 3;
    }

    .printerlogowhite {
        height: 32px;
        background-size: 28px;

    }

    .Printerlogo:hover {
        height: 39px;
        transition-duration: 0.3s;
        padding-top: 3px;
        cursor: pointer;
        background: #ffffff40;
    }

    .ErstellteWartung {
        padding-bottom: 5px;
    }

    .EditEingestellteWartung {
        text-align: right;
        margin: auto;
        padding: 5px;
        text-align: center;
        border: solid 1px #DDF3F5;
        border-radius: 10px;
        /* background-color: #0A3242; */
        cursor: pointer;
        width: 100px;
        position: absolute;
        right: 56px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .EditEingestellteWartung:hover {
        transition-duration: 0.3s;
        border: solid 2px #DDF3F5;
    }


    .EditEingestellteWartungklein {
        text-align: right;
        margin: auto;
        padding: 5px;
        text-align: center;
        border: solid 1px #DDF3F5;
        border-radius: 10px;
        background-color: rgb(34 53 52);
        cursor: pointer;
        width: auto;
        white-space: nowrap;
        padding-left: 10px;
        padding-right: 10px;
        position: absolute;
        right: 5px;
        color: white;
        margin-top: 50px;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        z-index: 2;
    }

    .EditEingestellteWartungklein:hover {
        transition-duration: 0.3s;
        border: solid 2px #DDF3F5;
    }

    .WartungDidklein {
        text-align: right;
        margin: auto;
        padding: 5px;
        text-align: center;
        border: solid 1px #DDF3F5;
        border-radius: 10px;
        background-color: rgb(34 53 52);
        cursor: pointer;
        width: auto;
        white-space: nowrap;
        padding-left: 10px;
        padding-right: 10px;
        position: absolute;
        right: 5px;
        color: white;
        margin-top: 100px;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        z-index: 2;
    }

    .WartungDidklein:hover {
        transition-duration: 0.3s;
        border: solid 2px #DDF3F5;
    }

    .WartungDid {
        text-align: right;
        margin: auto;
        padding: 5px;
        text-align: center;
        border: solid 1px white;
        border-radius: 10px;
        background-color: transparent;
        cursor: pointer;
        width: 189px;
        position: absolute;
        right: 168px;
        color: white;
        transition-duration: 0.3s;

        margin-top: 0px;

    }

    .WartungDid:hover {
        transition-duration: 0.3s;
        border: solid 2px #DDF3F5;
    }

    .DeleteEingestellteWartung {
        background: url('Images/deletelogo.png') no-repeat center;
        background-size: 30px;
        text-align: right;
        margin: auto;
        padding: 5px;
        text-align: center;
        border: solid 1px #DDF3F5;
        border-radius: 10px;
        /* background-color: #0A3242; */
        cursor: pointer;
        width: 40px;
        height: 36px;
        position: absolute;
        right: 5px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .DeleteEingestellteWartung:hover {
        transition-duration: 0.3s;
        border: solid 2px #e30909;
    }

    .DeleteAnhangWartung,
    .DeleteAnhangTool {
        background: url('Images/deletelogo.png') no-repeat center;
        background-size: 30px;
        text-align: right;
        margin: auto;
        top: -51px;
        padding: 5px;
        text-align: center;
        border: solid 1px #DDF3F5;
        border-radius: 10px;
        /* background-color: #0A3242; */
        cursor: pointer;
        width: 40px;
        height: 36px;
        position: relative;
        right: -195px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .DeleteAnhangWartung:hover,
    .DeleteAnhangTool:hover {
        transition-duration: 0.3s;
        border: solid 2px #e30909;
    }

    /* Zurueck/Abbrechen oben in den Unteransichten: in-flow, links, immer sichtbar
       (frueher position:absolute + margin-top:-40px -> wurde nach oben rausgezogen) */
    .backToOverviewWartung,
    .backToOverviewWartung2,
    .backToOverviewWartung3 {
        position: static;
        flex: 0 0 auto;
        align-self: flex-start;
        margin: 0 auto 12px 0;
        width: auto;
        min-width: 96px;
        padding: 7px 14px;
        text-align: center;
        border: solid 1px #0A3242;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
        color: #22272B;
        font-weight: 500;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .backToOverviewWartung:hover,
    .backToOverviewWartung2:hover .backToOverviewWartung3:hover {
        transition-duration: 0.3s;
        border: solid 2px #1e3635;
    }

    .DetailBez {
        margin-top: 5px;
    }

    .DetailWartung {
        margin-top: 5px;
    }

    .Fileholder {
        /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='black' stroke-width='7' stroke-dasharray='6%2c 14' stroke-dashoffset='13' stroke-linecap='square'/%3e%3c/svg%3e");
        border-radius: 10px;
        height: 300px;
        width: 300px;
        text-align: center; */

    }

    .Notizholder {
        border: solid 1px black;
        border-radius: 10px;
        height: 300px;
        width: 300px;
        text-align: center;

    }

    .UploadedFileholder {}

    .filecontent {
        transition-duration: 0.3s;
        cursor: pointer;
        background-color: #ffffff59;
        height: 60px;
        overflow: hidden;
        margin-top: -28px;
    }

    .filecontenthistory {
        transition-duration: 0.3s;
        cursor: pointer;
        padding-bottom: 32px;
        height: 20px;
        overflow: hidden;
        margin-top: 12px;
    }

    .filenotizhistory {
        transition-duration: 0.3s;
        cursor: pointer;
        padding-bottom: 32px;
        height: 20px;

        margin-top: 12px;
    }

    .filecontent:hover {
        transition-duration: 0.3s;
        background-color: rgba(79, 79, 79, 0.257);
    }

    .filetypeimg {
        height: 60px;
        width: 60px;
        background-color: #edeef1;
        text-align: center;
        padding-top: 17px;
        font-weight: 600;
        border: solid 1px #e0d3d3;
        border-radius: 4px;
        position: relative;
        right: 15px;

    }

    .filetypeimghistory {
        height: 21px;
        width: 38px;
        background-color: #edeef1;
        text-align: center;

        font-weight: 600;
        border: solid 1px #e0d3d3;
        border-radius: 4px;

        left: 10px;

        color: #223534;


        padding-bottom: 23px;


    }

    .notizimghistory {
        height: 21px;
        width: 48px;
        background-color: #edeef1;
        text-align: center;

        font-weight: 600;
        border: solid 1px #e0d3d3;
        border-radius: 4px;

        left: 10px;

        color: #223534;


        padding-bottom: 23px;


    }

    .filedetails {
        font-weight: 600;
        text-align: left;
        margin-top: -59px;
        margin-left: 75px;


    }

    .filedetailshistory {
        font-weight: 200;
        color: white;
        font-size: 13px;
        margin-top: -23px;
        margin-left: 44px;

    }

    .notizdetailshistory {
        font-weight: 200;
        color: white;
        font-size: 15px;
        margin-top: -23px;
        margin-left: 61px;
        hyphens: auto;
        padding-bottom: 10px;
        overflow: scroll;
        height: 79px;

    }

    .filedetailsStampdate {
        font-weight: 300;
        font-size: 13px;
        text-align: left;
        color: #727272;
        margin-left: 75px;

    }


    .trennung {
        height: 1px;
        background: grey;
        margin-top: 5px;

    }

    .hinweiswenntoolausgeliehenist {
        color: red;
        text-align: center;
    }

    #closecalender {
        position: fixed;
        bottom: 20px;
        z-index: 2003;
        color: white;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: rgb(56 173 169);
        cursor: pointer;
        margin-top: 20px;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    /* .ZuordnungSave / .abbrechenSaveZuordnung entfernt (Modal-Redesign v2):
       Buttons nutzen jetzt .reservechooser / .deletechooser */

    .choosebox {
        border: solid 1px rgb(87, 87, 87);
        color: rgb(87, 87, 87);
        border-radius: 10px;
        /* min-height statt fixe 50px: mehrzeilige Chips ('Eine Woche', '1,5 Wochen')
           quollen sonst unter die Box */
        min-height: 50px;
        margin-top: 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
        padding: 6px 4px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .choosebox:hover {
        margin-top: 12px;
        transition-duration: 0.3s;
    }

    .chooseboxWartung {
        border: solid 1px rgb(87, 87, 87);
        color: rgb(87, 87, 87);
        border-radius: 10px;
        /* min-height statt fixe 50px: 'alle 3 Monaten' ist mehrzeilig und quoll sonst
           unter den Button und ueberlappte die naechste Reihe */
        min-height: 56px;
        margin-top: 15px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.25;
        padding: 8px 6px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .chooseboxWartungsArt {
        border: solid 1px rgb(87, 87, 87);
        color: rgb(87, 87, 87);
        border-radius: 10px;
        /* min-height: lange Wartungstyp-Namen sollen die Box nicht sprengen */
        min-height: 50px;
        margin-top: 15px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .OwnchooseboxWartungsArt {
        border: solid 1px rgb(87, 87, 87);
        color: rgb(87, 87, 87);
        border-radius: 10px;
        height: 50px;
        margin-top: 15px;

        text-align: right;
        padding-top: 0px;
        padding-right: 30px;
        cursor: pointer;
        transition-duration: 0.3s;
        overflow: hidden;

    }

    .OwnChooseboxText {
        position: absolute;
        z-index: 2;
        right: 10px;
    }

    .backgroundPlus {
        height: 40px;
        position: absolute;
        left: 10px;
        top: 4px;
    }



    .chooseboxWartung:hover,
    .chooseboxWartungsArt:hover,
    .OwnchooseboxWartungsArt:hover {
        margin-top: 12px;
        transition-duration: 0.3s;
    }

    #errechnetesDatum {
        text-align: center;
        font-size: 20px;
        margin-top: 30px;
    }

    #errechnetesDatumNextWartung {
        text-align: center;
        font-size: 20px;
        margin-top: 30px;

    }

    #enddatum {
        font-weight: 800;
    }

    .notchangeable {
        background-color: transparent;
        font-style: italic;
        border: solid 0px transparent;
        text-align: center;

    }

    .changeable {
        font-style: italic;
        color: rgb(255, 255, 255);
        background: #0A3242;
        border-radius: 20px;
        text-decoration: underline;
        cursor: pointer;
        padding: 2px;
        padding-left: 2px;
        padding-right: 2px;
        text-align: center;
        width: 300px;
        transition-duration: 0.3s;
    }

    #Kundenname {
        font-weight: 800;
    }

    #ToolAusleihenBez {
        font-weight: 800;
        hyphens: auto;
    }

    .Reservierungserinnerung {
        font-weight: 800;
        color: red;
        margin-top: 10px;
        text-align: center;
    }

    .fatfont {
        font-weight: 800;
    }

    #explainTxtAusleihen {
        text-align: center;
        font-weight: 300;
        margin-top: 20px;
        font-size: 15px;
    }

    .pointer {
        width: 200px;
        height: 40px;
        position: relative;
        background: #0A3242;
        text-align: center;
        padding-top: 6px;
        color: white;
        cursor: pointer;
        margin-top: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .pointer:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid #b0faf3;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

    .pointer:before {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid #4BBFC8;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;

    }

    .pointer:hover {
        transition-duration: 0.3s;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    .pointer2 {
        width: 200px;
        height: 40px;
        position: relative;
        background: #0A3242;
        text-align: center;
        padding-top: 6px;
        color: white;
        cursor: pointer;
        margin-top: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
        transition-duration: 0.3s;
    }

    .pointer2:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid #abf5f9;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

    .pointer2:before {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 20px solid #4BBFC8;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;

    }

    .pointer2:hover {
        transition-duration: 0.3s;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }


    .kachelbild2 {
        padding-left: 0;
        padding-right: 0;
        width: 100px;
        margin-left: 7px;
        transition-duration: 0.3s;
        background: url('Images/logofolgt.png') no-repeat center;
        background-size: 100px;

    }

    .herstellerLogoBildChoosen {

        width: 200px;
        margin-left: 7px;
        transition-duration: 0.3s;
        text-align: center;
    }

    .herstellerkachel {
        text-align: center;
        cursor: pointer;
    }

    .herstellerrahmen {
        transition-duration: 0.3s;
    }

    .herstellerrahmen:hover {
        transition-duration: 0.3s;
        box-shadow: 7px 12px 17px rgba(56, 56, 56, 0.692);
    }

    .setStartLetter {
        background: linear-gradient(122deg, #e2f5f7, #9bdae6);
        margin-top: 20px;
        font-size: 20px;
        padding: 5px;
        font-weight: bold;
    }

    /* .setStartLetterMA (Buchstabengruppe der Mitarbeiterliste) steht seit dem
       25.08.2026 in _styles_mitarbeiter.html — zusammen mit dem Kartenraster,
       zu dem sie gehoert, und nur auf der Seite, die sie braucht (TD-008). */

    .filterHidden {
        display: none !important;
    }

    /* Niederlassungen: Kachel-Badge.
       Die Filter-Pillen (.nlChip/.nlChipAktiv) sind am 24.08.2026 entfallen — der
       Filter ist seither EINE Auswahl im Seitenkopf (_kopf_niederlassung.html), ihre
       Regeln stehen in _styles_niederlassungsfilter.html. Die Pillen-Formsprache
       lebt dort in der weissen Pille des Auswahlfeldes weiter. */

    /* Niederlassung auf der Werkzeugkarte. Ohne eigenen Hintergrund schien der
       Verlauf der Karte durch, die Zeile war dadurch mehrfarbig und der Text
       stand stellenweise auf dunklem Grund. Jetzt eine einfarbige Flaeche mit
       dem dunklen Blau der Ueberschriften darauf. */
    .nlBadgeKachel {
        font-size: 12.5px;
        font-weight: 600;
        text-align: center;
        color: #FFFFFF;
        background: #0A3242;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Normale Feldhoehe (wie .textfield3 im Seitenpanel). Bis 20.08.2026 66px, damit
       das Feld an den Sammel-QR-Knoepfen darunter fluchtet — die gibt es nicht mehr,
       und als einziges Element der Box wirkte der Block ueberdimensioniert. */
    #mitarbeiterSuche {
        margin-top: 10px;
        height: 44px;
    }

    /* Mitarbeiter-Gruppen: Listenzeilen + Aktions-Buttons */
    .gruppeZeile {
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
    }

    .gruppeEditBtn,
    .gruppeDeleteBtn {
        display: inline-block;
        padding: 6px 16px;
        margin-left: 8px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        vertical-align: middle;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .gruppeEditBtn {
        background-color: #0A3242;
        border: solid 1px #0A3242;
        color: white;
    }

    .gruppeDeleteBtn {
        background-color: transparent;
        border: solid 1px #c0392b;
        color: #c0392b;
    }

    .gruppeEditBtn:hover,
    .gruppeDeleteBtn:hover {
        transition-duration: 0.3s;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    }

    /* Kleiner Select für Listenzeilen (neben gruppeEditBtn/gruppeDeleteBtn) */
    .zeilenSelect {
        display: inline-block;
        padding: 6px 12px;
        margin-left: 8px;
        border: solid 1px black;
        border-radius: 10px;
        background-color: transparent;
        font-size: 14px;
        cursor: pointer;
        vertical-align: middle;
    }

    #checkSmallQrCodes,
    #checkMitarbeiterStaff {

        height: 25px;
        cursor: pointer;

        margin-left: 20px;
        text-align: right;

    }

    .checkQrCodesAusschalten {
        height: 25px;
        cursor: pointer;
        margin-top: 10px;
        margin-left: 20px;
        text-align: right;

    }

    #txtsmallqrcodes,
    .txtMitarbeiterqrcodes {
        font-size: 16px;


    }

    .mitarbeiterplatzhalterdiv {
        height: 1px;
    }

    .placeholdermitarbeiter2 {
        height: 10px;
    }

    .placeholdercheckbox {
        height: 10px
    }

    .checkboxholder {
        border: solid 1px black;
        padding-top: 8px;
        padding-bottom: 8px;
        padding: auto;
        border-radius: 10px;
        margin-top: 13px;
        margin-left: 20px;
        min-height: 68px;
        /* Checkbox + Name vertikal mittig in der Karte, auch bei 2-3-zeiligen Namen */
        display: flex;
        align-items: center;
    }

    .checkboxholder > .row {
        flex: 1 1 auto;
        align-items: center;
    }

    .checkboxholder2 {
        border: solid 1px black;
        padding-top: 8px;
        padding-bottom: 8px;
        padding: auto;
        border-radius: 10px;
        margin-top: 13px;
        margin-left: 20px;
        min-height: 68px;
        hyphens: auto;
    }

    .checkboxholder3 {
        border: solid 1px black;
        padding-top: 12px;
        padding-bottom: 8px;
        padding: auto;
        border-radius: 10px;
        margin-top: 13px;

        min-height: 68px;
        hyphens: auto;
    }

    .ToolInfo {
        margin-top: -226px;
        background: #ffffffe0;
        text-align: center;
        border-radius: 4px;
    }

    .ToolInfo1 {
        margin-top: 10px;
        background: #ffffffe0;
        text-align: center;
        border-radius: 4px;
    }

    .toolbildhistorie {
        position: absolute;
        right: 20px;
        /* Glass-Boxen (backdrop-filter = eigener Stacking-Context) malten sonst über das Bild */
        z-index: 5;
        border-radius: 8px;
    }

    /* Werkzeugbild ist absolut oben rechts (150px hoch); Inhalt darunter nach unten
       versetzen, damit die 'Zusammengefasst'-Box nicht ins Bild ragt */
    #ToolhistorieScreen .container-fluid {
        margin-top: 100px;
    }

    .diagramm {
        height: 200px;
        background-color: red;
    }



    .placeholderTools {
        margin-top: 144px;
    }

    .StatusAusleihenWerkzeugkiste {
        background: gold;
    }

    .StatusAusleihenWerkzeugkisteMitarbeiter {
        background: gold;
        margin-top: 10px;
    }

    /* Modal-Redesign v2: WerkzeugkisteMitarbeiter-, MehrFotos-, NotesAndAttachments-,
       Toolhistorie- und MitarbeiterAnpassen-Screen aus dieser Alt-Regel geloest
       (nutzen jetzt .modalV2-panel) */
    #QRCodeAusschaltenScreen {
        box-shadow: 1px 2px 9px 0px rgb(181 126 126);
        position: fixed;
        border-radius: 10px;
        margin-top: 100px;
        padding-bottom: 20px;
        background: linear-gradient(163deg, #E4F6F7 0%, #C6EBF0 55%, #4BBFC8 100%);
        z-index: 2001;
        padding-top: 20px;
        padding-bottom: 40px;
        height: 80%;
        overflow: scroll;
    }

    .werkzeugbezeichnungWerkzeugkiste {
        hyphens: auto;
    }

    .activeUser {
        padding: 5px;
        border: solid 1px black;
        position: absolute;
        right: 30px;
        margin-top: -15px;
        cursor: pointer;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #7cfb7c;
        box-shadow: 2px 1px 17px rgb(139 139 139 / 69%);
        transition-duration: 0.3s;
        opacity: 1;

    }

    .inactiveUser {
        padding: 5px;
        border: solid 1px black;
        position: absolute;
        right: 80px;
        margin-top: -15px;
        cursor: pointer;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background: #898989;
        box-shadow: -3px 4px 17px rgb(139 139 139 / 69%);
        transition-duration: 0.3s;
        opacity: 0.5;
    }


    .placeholderreservierung {
        margin-top: 30px;
    }



    .AllgemeinBtn {
        padding: 5px;
        border: solid 1px black;
        position: relative;
        right: 0px;
        margin-top: 15px;
        cursor: pointer;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #785181;
        color: white;
        box-shadow: 2px 1px 17px rgb(139 139 139 / 69%);
        transition-duration: 0.3s;
        opacity: 1;
        text-align: center;

    }

    .MonteurwerkzeugBtn {
        padding: 5px;
        border: solid 1px black;
        position: relative;
        right: 0px;
        margin-top: 15px;
        cursor: pointer;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        color: rgb(0, 0, 0);
        background: #45f9ff;
        box-shadow: -3px 4px 17px rgb(139 139 139 / 69%);
        transition-duration: 0.3s;
        opacity: 1;
        text-align: center;
    }

    .MonteurwerkzeugBtn:hover {
        padding-left: 10px;
        padding-right: 10px;
        transition-duration: 0.3s;
        right: 20px;
        border: solid 2px white;
    }

    .AllgemeinBtn:hover {

        padding-right: 10px;
        padding-left: 10px;
        transition-duration: 0.3s;
        right: -20px;
        border: solid 2px white;
    }

    .deleteReservation {
        background: url('Images/deletelogo.png') no-repeat center;
        padding-left: 0;
        padding-right: 0;
        right: -30px;
        margin-left: 7px;
        transition-duration: 0.3s;
        width: 100px;
        background-size: 30px;
        height: 40px;
        text-align: right;
        position: absolute;
        top: 8px;
        cursor: pointer;
    }

    .deleteReservation:hover {
        background-size: 35px;
        transition-duration: 0.3s;
    }

    .deleteWartungsart {
        background: url('Images/deletelogo.png') no-repeat center;
        padding-left: 0;
        padding-right: 0;
        right: 1px;
        margin-left: 7px;
        transition-duration: 0.3s;
        width: 26px;
        background-size: 30px;
        height: 40px;
        text-align: right;
        position: absolute;
        top: -2px;
        cursor: pointer;
    }

    .deleteWartungsart:hover {
        background-size: 35px;
        transition-duration: 0.3s;
    }

    .askForDelete {
        margin-top: 20px;
    }


    .headlineReservierung{
        margin-top: 20px;
        text-align: left;
    }
    .messageReservierungAnsicht{
        margin-top: 5px;
        text-align: left;
    }

    .editreservation{
        height: 200px;
    }

    .saveeditreservation{
        margin-top: 10px;
        cursor: pointer;
        background: #0A3242;
        color: white;
        padding: 5px;
        border-radius: 10px;
        height: 35px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .saveeditreservation:hover{
        background: #00c3ff;
    }



.canceleditreservation {
      
        padding: 5px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: rgb(255, 0, 4);
        cursor: pointer;
        margin-top: 10px;
        height: 35px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }


    .btndeletereservation {

        margin: auto;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;

        cursor: pointer;
        margin-top: 20px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    .btndeletereservation:hover {
        transition-duration: 0.3s;
        /* background-color: rgb(97, 237, 247); */
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
        /* color: black; */


    }

    .btndeletereservationyes {
        background-color: tomato;
    }

    .btndeletereservationno {
        background-color: #0A3242;
    }


    .lds-roller {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }

    .lds-roller div:after {
        content: " ";
        display: block;
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #fff;
        margin: -4px 0 0 -4px;
    }

    .lds-roller div:nth-child(1) {
        animation-delay: -0.036s;
    }

    .lds-roller div:nth-child(1):after {
        top: 63px;
        left: 63px;
    }

    .lds-roller div:nth-child(2) {
        animation-delay: -0.072s;
    }

    .lds-roller div:nth-child(2):after {
        top: 68px;
        left: 56px;
    }

    .lds-roller div:nth-child(3) {
        animation-delay: -0.108s;
    }

    .lds-roller div:nth-child(3):after {
        top: 71px;
        left: 48px;
    }

    .lds-roller div:nth-child(4) {
        animation-delay: -0.144s;
    }

    .lds-roller div:nth-child(4):after {
        top: 72px;
        left: 40px;
    }

    .lds-roller div:nth-child(5) {
        animation-delay: -0.18s;
    }

    .lds-roller div:nth-child(5):after {
        top: 71px;
        left: 32px;
    }

    .lds-roller div:nth-child(6) {
        animation-delay: -0.216s;
    }

    .lds-roller div:nth-child(6):after {
        top: 68px;
        left: 24px;
    }

    .lds-roller div:nth-child(7) {
        animation-delay: -0.252s;
    }

    .lds-roller div:nth-child(7):after {
        top: 63px;
        left: 17px;
    }

    .lds-roller div:nth-child(8) {
        animation-delay: -0.288s;
    }

    .lds-roller div:nth-child(8):after {
        top: 56px;
        left: 12px;
    }

    @keyframes lds-roller {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .blink_me {
        animation: blinker 3s linear infinite;
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }

    .historyholder {
        padding: 10px;
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .tagesabstand {
        width: 14px;
        /* height: 14px; */
        padding-bottom: 1px;
        border-radius: 7px;
        background: linear-gradient(250deg, #07f7cb, #689cd3);
        color: white;
        margin-top: 97px;
        z-index: 21;
        max-height: 53px;
    }

    .reservationframe,
    .ToolReservationScreen {
        padding: 10px;
        margin-top: 100px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }


    .AuswertungWerkzeugeinsatzproMonteur {
        padding: 10px;
        margin-top: 100px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        height: 677px;
    }

    .headlineReservierungen {
        font-weight: bold;
        margin-top: 20px;
    }

    #intervallTxt {
        text-align: center;
        margin-top: 20px;
        font-size: 20px;
        font-weight: 500;
    }

    #IntervallbeginnDatum {
        text-align: center;
        margin-top: 10px;
    }

    .tagesabstand {
        width: 14px;
        /* height: 14px; */
        padding-bottom: 1px;
        border-radius: 7px;
        background: linear-gradient(250deg, #07f7cb, #689cd3);
        color: white;
        margin-top: 97px;
        z-index: 21;
        position: relative;            /* Anker für BetragWertWerkzeuganzeige darunter */
        align-self: flex-start;         /* nicht mit der Karte rechts mitwachsen */
        height: auto;                   /* nur so hoch wie eine Zeile Text */
    }

    /* Zusatzzeile in der Historie (z.B. "↳ trotzdem eingelagert ...") – kleiner, nimmt kaum Platz */
    .lagerHistorieZusatz {
        font-size: 12px;
        opacity: 0.85;
        margin-top: 2px;
        line-height: 1.25;
        font-weight: 400;
    }

    .ausgemustert {
        text-align: center;
        font-weight: bold;
        color: red;

    }

    .dot {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: black;
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .phonepic {
        height: 300px;
    }

    .phoneholder {
        text-align: center;
    }

    .phonetxt {
        text-align: center;
        font-weight: bold;
    }



    .doteinsatz {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: rgb(11 165 110);
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .dotausleihen {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: #ff15e8;
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .dotlager {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: orange;
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .dotheute {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: rgb(0, 0, 0);
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .dotreparieren {
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background: red;
        margin-top: 47px;
        position: absolute;
        z-index: 21;
    }

    .line {
        height: 292px;
        width: 3px;
        background-color: rgb(0, 0, 0);
        margin-top: 56px;
        position: absolute;
        left: 5px;
    }

    .last_line {
        height: 30px;
        width: 3px;
        background: black;
        margin-top: 56px;
        position: absolute;
        left: 5px;
        z-index: 20;
    }

    /* #closertab1 ist jetzt ein modalV2-close (X oben rechts wie bei allen Modals) —
       kein Alt-Slide/top:0 mehr, sonst klebt es am oberen Rand */
    #closertab1 {
        top: 10px;
        transition-duration: 0.3s;
    }

    #closertab1:hover {
        top: 10px;
        transition-duration: 0.3s;
    }


    #closertab2 {
        top: 0px;
        transition-duration: 0.3s;
    }

    #closertab2:hover {
        top: 5px;
        transition-duration: 0.3s;
    }
    

    .linequer {
        width: 50px;
        background-color: black;
        height: 10px;
    }

    .cardeinsatz {
        padding: 15px;
        background: linear-gradient(134deg, rgba(255, 255, 255, 0.774), rgba(255, 255, 255, 0.774), rgb(11 165 110 / 58%));
        border-radius: 20px;
        border-radius: 20px;
        box-shadow: 1px 2px 9px 0px rgb(86 84 84);
        margin-top: 7px;
        hyphens: auto;
    }

    .cardausleihen {
        padding: 15px;
        background: linear-gradient(134deg, rgba(255, 255, 255, 0.774), rgba(255, 255, 255, 0.774), #ff15e894);

        border-radius: 20px;
        border-radius: 20px;
        box-shadow: 1px 2px 9px 0px rgb(86 84 84);
        margin-top: 7px;
        hyphens: auto;
    }

    .cardlager {
        padding: 15px;
        background: linear-gradient(134deg, rgba(255, 255, 255, 0.774), rgba(255, 255, 255, 0.774), #ffa500ab);
        border-radius: 20px;
        box-shadow: 1px 2px 9px 0px rgb(86 84 84);
        margin-top: 7px;
        hyphens: auto;
    }

    .cardrepaieren {
        padding: 15px;
        background: linear-gradient(134deg, rgba(255, 255, 255, 0.774), rgba(255, 255, 255, 0.774), #ff00007d);
        border-radius: 20px;
        box-shadow: 1px 2px 9px 0px rgb(86 84 84);
        margin-top: 7px;
        hyphens: auto;
    }

    .card {
        padding: 15px;
        background: #ffffffc2;
        border-radius: 20px;
        box-shadow: 1px 2px 9px 0px rgb(86 84 84);
        margin-top: 7px;
        hyphens: auto;
    }

    .headlinehistoriecard {
        font-weight: bold;
        font-size: 18px;
        text-align: left;

    }

    .statushistoriecard {
        font-weight: 400;
        margin-top: 10px;
    }

    .checklisthistoriecard, .webuebernahmehistoriecard {
        font-weight: 400;
        margin-top: 10px;
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }

    .infotext {
        font-weight: 600;
        font-style: italic;
        font-size: 14px;
        margin-top: 10px;
    }

    .beschreibunghistoriecard {
        font-weight: 300;
        margin-top: 10px;
    }

    .form-switch {
        display: inline-block;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .form-switch i {
        position: relative;
        display: inline-block;
        margin-right: .5rem;
        width: 46px;
        height: 26px;
        background-color: #e6e6e6;
        border-radius: 23px;
        vertical-align: text-bottom;
        transition: all 0.3s linear;
    }

    .form-switch i::before {
        content: "";
        position: absolute;
        left: 0;
        width: 42px;
        height: 22px;
        background-color: #898989;
        border-radius: 11px;
        transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
        transition: all 0.25s linear;
    }

    .form-switch i::after {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 22px;
        background-color: #fff;
        border-radius: 11px;
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
        transform: translate3d(2px, 2px, 0);
        transition: all 0.2s ease-in-out;
    }

    .form-switch:active i::after {
        width: 28px;
        transform: translate3d(2px, 2px, 0);
    }

    .form-switch:active input:checked+i::after {
        transform: translate3d(16px, 2px, 0);
    }

    .form-switch input {
        display: none;
    }

    .form-switch input:checked+i {
        background-color: #0A3242;
    }

    .form-switch input:checked+i::before {
        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
    }

    .form-switch input:checked+i::after {
        transform: translate3d(22px, 2px, 0);
    }


    /* 'Wann war die letzte Wartung'-Stepper: +/Zahl/- sauber untereinander zentrieren.
       Die Toggle-Buttons sind sonst position:absolute mit ungueltigen Offsets (right:30/
       left:15 ohne px) -> Buttons lagen 50px neben der Zahl. Nur hier scopen, damit die
       anderen Stepper (WartungDone, LagerBringen) unberuehrt bleiben. */
    .wartungLetzteStepper .col-6 { text-align: center; }
    .wartungLetzteStepper .plustogglebtn,
    .wartungLetzteStepper .minustogglebtn,
    .wartungLetzteStepper .plustogglebtnyear,
    .wartungLetzteStepper .minustogglebtnyear,
    .wartungLetzteStepper .plustogglebtnWartungDone,
    .wartungLetzteStepper .minustogglebtnWartungDone,
    .wartungLetzteStepper .plustogglebtnyearWartungDone,
    .wartungLetzteStepper .minustogglebtnyearWartungDone {
        position: static;
        display: block;
        margin: 0 auto;
    }

    .plustogglebtn,
    .plustogglebtnDaysBackToLagerBringen,
    .plustogglebtnWartungDone {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        right: 30;
        font-size: 30px;
        position: absolute;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }


    .minustogglebtnDaysBackToLagerBringenDefault {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        right: 30;
        font-size: 30px;
        position: absolute;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }


    .plustogglebtnDaysBackToLagerBringenDefault {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        right: 30;
        font-size: 30px;
        position: absolute;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .minustogglebtn,
    .minustogglebtnDaysBackToLagerBringen,
    .minustogglebtnWartungDone {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        right: 30;
        font-size: 30px;
        position: absolute;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .plustogglebtnyear,
    .plustogglebtnyearWartungDone {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        left: 15;
        font-size: 30px;
        position: absolute;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .minustogglebtnyear,
    .minustogglebtnyearWartungDone {
        text-align: center;
        background-color: #0A3242;
        width: 50px;
        left: 15;
        font-size: 30px;
        position: absolute;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        cursor: pointer;
        transition-duration: 0.3s;
    }

    .plustogglebtn:hover,
    .plustogglebtnyear:hover,
    .minustogglebtn:hover,
    .minustogglebtnyear:hover .plustogglebtnWartungDone:hover,
    .plustogglebtnyearWartungDone:hover,
    .minustogglebtnWartungDone:hover,
    .minustogglebtnyearWartungDone:hover,
    .plustogglebtnDaysBackToLagerBringen:hover,
    .minustogglebtnDaysBackToLagerBringenDefault:hover,
    .plustogglebtnDaysBackToLagerBringenDefault:hover,
    .minustogglebtnDaysBackToLagerBringen:hover {
        transition-duration: 0.3s;
        font-size: 35px;
    }

    #noteswartung,
    #noteswartung2,
    #notestool {
        height: 100px;
        margin-top: 20px;
        background: #5b5b5b33;
        border-radius: 7px;
        padding-top: 9px;
        transition-duration: 0.3s;
        cursor: pointer;
        overflow: scroll;
        padding-bottom: 10px;
    }

    #noteswartung:hover,
    #noteswartung2:hover,
    #notestool {
        background: #c8c7c733;
        transition-duration: 0.3s;
    }

    .textareawartung,
    .textareawartung2,
    .textareatoolfile {
        margin-top: 10px;
        width: 100%;
        resize: none;
        height: 200px;
        padding: 10px;
    }

    #NotizenSpeichernWartungDone,
    #NotizenSpeichernWartungDone2,
    #NotizenSpeichernTool {
        position: absolute;
        right: 20px;
    }


    .trennstrichWartung {
        margin-top: 20px;
        background: grey;
        height: 1px;
    }

    .trennstrichToolfiles {
        margin-top: 20px;
        background: grey;
        height: 1px;
    }

    .Dropingarea {
        padding: 70px;

        margin-top: 45px;
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='grey' stroke-width='7' stroke-dasharray='6%2c 14' stroke-dashoffset='13' stroke-linecap='square'/%3e%3c/svg%3e");
    }



    .drag-area.active {
        /* background: rgb(0, 0, 0); */
    }

    .drag-area .icon {
        font-size: 100px;
        color: rgb(0, 0, 0);
    }

    .drag-area header {
        font-size: 30px;
        font-weight: 500;
        color: rgb(0, 0, 0);
    }

    .drag-area span {
        font-size: 25px;
        font-weight: 500;
        color: rgb(0, 0, 0);
        margin: 10px 0 15px 0;
    }

    .drag-area button {
        padding: 10px 25px;
        font-size: 20px;
        font-weight: 500;
        border: solid 1px black;
        outline: none;

        color: #000000;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.2;
    }

    .drag-area button:hover {
        transition-duration: 0.2;
        border: solid 2px black;

    }

    .drag-area img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .drag-area2 .icon {
        font-size: 100px;
        color: rgb(0, 0, 0);
    }

    .drag-area2 header {
        font-size: 30px;
        font-weight: 500;

        color: rgb(0, 0, 0);

    }

    .drag-area2 span {

        font-size: 25px;
        font-weight: 500;
        color: rgb(0, 0, 0);

        margin: 10px 0 15px 0;
    }

    .drag-area2 button {
        padding: 10px 25px;
        font-size: 20px;
        font-weight: 500;
        border: solid 1px black;
        outline: none;

        color: #000000;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.2;
    }

    .drag-area2 button:hover {
        transition-duration: 0.2;
        border: solid 2px black;

    }

    .drag-area2 img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }




    .drag-areaTool.active {
        /* background: rgb(0, 0, 0); */
    }

    .drag-areaTool .icon {
        font-size: 100px;
        color: rgb(0, 0, 0);
    }

    .drag-areaTool header {
        font-size: 30px;
        font-weight: 500;
        color: rgb(0, 0, 0);
    }

    .drag-areaTool span {
        font-size: 25px;
        font-weight: 500;
        color: rgb(0, 0, 0);
        margin: 10px 0 15px 0;
    }

    .drag-areaTool button {
        padding: 10px 25px;
        font-size: 20px;
        font-weight: 500;
        border: solid 1px black;
        outline: none;

        color: #000000;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.2;
    }

    .drag-areaTool button:hover {
        transition-duration: 0.2;
        border: solid 2px black;

    }

    .drag-areaTool img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }



    #editvalue {

        width: 200px;
        padding: 15px;
        text-align: center;
        border: solid 1px rgba(0, 128, 0, 0);
        border-radius: 10px;
        background-color: #0A3242;
        cursor: pointer;
        margin-top: -50px;
        margin-left: 220px;
        color: white;
        transition-duration: 0.3s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }

    #euroField {
        width: 200px;
        height: 45px;
        margin-top: 20px;
    }

    .BetragWertWerkzeuganzeige {
            z-index: 10;
    position: absolute;
    top: 100%;
    left: 10px;
    margin-top: 4px;
    color: #000000;
    white-space: nowrap;
    }

    .glass-container {
        padding: 10px;
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(255, 23, 23, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        height: 260px;
    }

    .glass-container2 {
        padding: 10px;
        margin-top: 20px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(255, 23, 23, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        display: flex;
        flex-direction: column;

    }

    .canvas-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        /* Passe die Höhe nach Bedarf an */
        width: 100%;
    }

    .canvasholder {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    canvas {
        display: block;
        width: 100px;
        /* Feste Breite des Canvas */
        height: 100px;
        /* Feste Höhe des Canvas */
    }

    .bar-container {
        display: flex;
        align-items: center;
        position: relative; /* Anker fuer .bar-value (war absolut ohne relativen Vorfahren: alle Werte stapelten rechts uebereinander) */
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        overflow: hidden;
        padding: 5px;
    }

    .bar {
        height: 30px;
        margin-right: 10px;
        border-radius: 5px;
        min-width: 5px;
        /* Mindestbreite für Sichtbarkeit */
        transition-duration: 0.9s;
    }

    .bar-label {
        min-width: 100px;
        text-align: left;
        margin-right: 10px;
    }

    .bar-value {
        margin-left: auto;
        text-align: right;
        position: absolute;
        right: 20px;
    }


    form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    input[type="date"] {
        padding: 5px;
        font-size: 1rem;
        margin-top: 20px;
    }

    button {
        padding: 10px;
        font-size: 1rem;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #0056b3;
    }

    #message {
        margin-top: 10px;
        font-size: 1rem;
        color: red;
    }


    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background-color: #8fd3be;
        color: black;
    }

    thead th {
        padding: 10px;
    }

    tbody tr:nth-child(odd) {
        background-color: white;
    }

    tbody tr:nth-child(even) {
        background-color: transparent;
    }

    tbody td {
        padding: 10px;
        text-align: center;
    }

    .toolholderkreis {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 110px;
        width: 150px;

        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        overflow: hidden;
        margin-left: 10px;
        padding: 5px;
    }

    .toolbildkreis {
        height: 60px;
        border-radius: 50%;
        background: #007BFF;
        border: solid 4px red;
        margin-top: 10px;
    }

    .toolbildkreismonteur {
        height: 60px;
        border-radius: 50%;
        margin-top: 10px;
        border: solid 4px #10fff7;
    }

    .toolbildkreisallgmein {
        height: 60px;
        border-radius: 50%;
        margin-top: 10px;
        border: solid 4px #8400ff;
    }

    .toolkreisbetrag {
        color: black;
        font-size: 15px;
        margin-top: 80px;
        width: 80px;
        left: 13px;
        border-radius: 20%;
        position: absolute;
        /* padding-bottom: 16px; */
        /* padding-left: 2px; */
        /* padding-right: 2px; */
        padding-top: 3px;
        height: 20px;

    }

    .toolkreisid {
        color: #969696;
        font-size: 12px;
        margin-top: -64px;
        width: 60px;
        margin-left: 47px;
        border-radius: -20%;
        position: absolute;
        padding-bottom: 16px;
        padding-left: 2px;
        padding-right: 2px;
        /* padding-top: 3px; */
        height: 20px;
        text-align: center;
    }

    #kreisholderwerkzeugpool {
        left: 22px;
        position: relative;
    }

    .monteurwerkzeugauswertungkreisholder {

        overflow: scroll;
        color: white;
    }

    .gesamtsummewerkzeugpool {
        color: black;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }

    .hinweisMessageAbtrennung1 {
    height: 1px;
    background-color: black;
        margin-top: 60px;
    
    }

    .hinweisMessageAbtrennung {
    height: 1px;
    background-color: black;
    margin-top: 10px;
   
    
    }

    .Emailliste{
        text-align: right; 
        font-size: 25px;
        transition-duration: 0.3s;
    
    }

    .Emailliste:hover{

        cursor: pointer;
        transform: scale(1.15);
    }

    #Ausleihzeitraum_abgelaufen_email{
        position: absolute;
    right: 14px;
    top: 5px;
    }

    /* Staff-@-Icon oben rechts in der Reparatur-Box; als Grid-Spalte (col-1) war es
       am Smartphone zu schmal und rutschte aus der Position */
    #Reparaturliste_email {
        position: absolute;
        right: 14px;
        top: 8px;
        width: auto;
    }



    .add-email{
        position: absolute;
        right: 15px;
        top: 15px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        text-align: center;
        padding-bottom: 15px;
        background-color: #00c3ff;
        color: white;
        font-size: 30px;
        cursor: pointer;
        transition-duration: 0.3s;
        z-index: 10;
        
    }

    .add-email:hover{
        background-color: #0A3242;
        top: 18px;
        transition-duration: 0.3s;
    }

    .add-email span {
    pointer-events: none;
}

    .newemailholder {
        margin-top: 10px;
    }

    .deleteEmail{
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
        background: url('Images/deletelogo.png') no-repeat center;
        width: 100px;
        background-size: 30px;
        height: 40px;
        text-align: right;
        position: absolute;
        top: 8px;
        cursor: pointer;
  
    }

    .deleteEmail:hover {
        background-size: 35px;
        transition-duration: 0.3s;
    }

    /* Redesign: Schattierung fuer die tuerkisen Buttons, damit sie sich von den
       tuerkisen Karten-Hintergruenden abheben. Farbe bleibt unveraendert. */
    #WartungsuebersichtBtn,
    .QrCodesbtnErstellungDeaktivieren,
    .modalV2-panel .zuordnungStepBtn,
    .NOTdelterWartungsart,
    .NOTdelterWartungen,
    .NOTdelterAnhang,
    .Werkzeugubernahme,
    .lagerFotoAufnehmenBtn,
    .lagerInlineBtn,
    .reservechooser,
    .WartungsMaskeErstellenOpen,
    .changeable,
    .saveeditreservation,
    .btndeletereservationno,
    .plustogglebtnWartungDone,
    .minustogglebtnDaysBackToLagerBringenDefault,
    .plustogglebtnDaysBackToLagerBringenDefault,
    .minustogglebtnWartungDone,
    .plustogglebtnyearWartungDone,
    .minustogglebtnyearWartungDone,
    #editvalue {
        box-shadow: 0 1px 2px rgba(10, 50, 66, 0.35), 0 3px 8px rgba(10, 50, 66, 0.22);
    }

    /* Wartung Monat/Jahr-Stepper wieder eng zusammen (wie urspruenglich in Prod):
       beide Spalten auf gleiche schmale Breite, Inhalt zentriert -> +/Zahl/- sitzen
       auf einer Achse, und die zwei Stepper stehen mittig dicht nebeneinander. */
    .wartungLetzteStepper > .row {
        justify-content: center;
        gap: 18px;
    }
    .wartungLetzteStepper > .row > .col-6 {
        flex: 0 0 auto !important;
        width: 96px !important;
        max-width: 96px !important;
        text-align: center !important;
    }
    /* inneres Bootstrap-Padding weg, damit die Zahl die volle Spaltenbreite nutzt */
    .wartungLetzteStepper > .row > .col-6 .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Zahl nie umbrechen (sonst reisst z.B. "2026" auf zwei Zeilen) */
    .wartungLetzteStepper [id*="Monat"],
    .wartungLetzteStepper [id*="Year"] {
        white-space: nowrap !important;
    }
    .wartungLetzteStepper > .row > .col-6 [class*="plustoggle"],
    .wartungLetzteStepper > .row > .col-6 [class*="minustoggle"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Externer "Oben"-Header (Ueberschrift + "Neue Wartung erstellen") liegt ausserhalb
       des Panels und wurde beim Zurueckgehen wieder eingeblendet -> tauchte hinter dem
       Popup auf. Der interne "Unten"-Header im Panel reicht -> extern dauerhaft aus. */
    #WartungsWerkzeugHeadlineOben,
    #WartungsMaskeErstellenOpenOben {
        display: none !important;
    }



/* ---- Seitenpanel-Variante (frueher _styles_seitenpanel.html) ---- */

    /* =====================================================================
       Seitenpanel-Variante von modalV2 + Mitarbeiter-Bereich des Adminpanels.

       Eigene Datei, weil _styles.html mit ueber 5.400 Zeilen als Inline-Monolith
       in TECH_DEBT.md (TD-008) gefuehrt wird und nicht weiter wachsen soll.
       Eingebunden am Ende von _styles.html, damit jede Seite mit modalV2 die
       Variante kennt und die Kaskade (Basis zuerst, Variante danach) stimmt.
       ===================================================================== */

    /* ---------------------------------------------------------------------
       Seitenpanel: Panel dockt rechts an, volle Hoehe. Bewusst KEIN zweites
       Overlay-System — Schliess-Mapping, Body-Scroll-Lock und Swipe-to-dismiss
       kommen unveraendert von modalV2. Unter 650px bleibt es das bestehende
       Bottom-Sheet; ein 660px-Panel von rechts waere auf einer Geraetebreite
       von 390px unbrauchbar.
       --------------------------------------------------------------------- */
    .modalV2-overlay--seite {
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        overflow: hidden;
        /* Zwei Paddings muessen weg, sonst klebt das Panel nicht am rechten Rand:
           die Basis setzt ab 1200px padding-left fuer die feste Sidebar (fuer
           zentrierte Panels noetig, fuer ein angedocktes nicht), und die Overlays
           tragen die Bootstrap-Klasse col-12 mit 15px links/rechts. */
        padding: 0 !important;
    }

    .modalV2-panel--seite {
        position: relative; /* Traeger der Rueckfrage-Ebene, siehe .panelBestaetigen */
        /* 100vw statt 100%: .sr-only schrumpft das Overlay auf 1px Breite. Bei einer
           prozentualen Breite waere das Panel im geschlossenen Zustand ebenfalls 1px
           breit — und translateX(100%) damit 1px statt einer Panelbreite. Das Panel
           stuende praktisch schon an seinem Ziel und wuerde wieder "aufploppen". */
        width: min(660px, 100vw);
        max-width: none;
        margin: 0;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* es scrollt der Body des Panels, nicht das Panel selbst */
        box-shadow: -14px 0 40px rgba(0, 0, 0, 0.28);
        /* Einfahren als transition, NICHT als @keyframes-animation: die Panels stehen
           von Anfang an im DOM und werden nur per .sr-only weggeklappt (kein display:none).
           Eine animation laeuft dadurch einmal beim Seitenaufbau ab und feuert beim
           spaeteren Oeffnen nie wieder — das Panel "ploppte" auf. Ein Zustandswechsel
           (.sr-only weg -> transform 100% => 0) triggert die transition dagegen jedes Mal. */
        transform: translateX(100%);
        /* Kurve mit Anlauf statt reinem ease-out: ein starkes ease-out legt ueber die
           Haelfte des Weges in den ersten 20 % der Zeit zurueck — man sieht das Panel
           dann eher springen als fahren. */
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    .modalV2-overlay--seite:not(.sr-only) .modalV2-panel--seite {
        transform: translateX(0);
    }
    /* Hinausfahren: derselbe Weg rueckwaerts. Gesetzt wird die Klasse von
       SeitenpanelSchliessen (_js_seitenpanel.html) — .sr-only allein taugt dafuer nicht,
       weil sie das Overlay hart ausblendet und der Weg unsichtbar abliefe. Gleiche
       Spezifitaet wie die Regel darueber, steht bewusst danach und gewinnt deshalb. */
    .modalV2-overlay--seite.seiteFaehrtRaus .modalV2-panel--seite {
        transform: translateX(100%);
    }
    @media (prefers-reduced-motion: reduce) {
        .modalV2-panel--seite { transition: none; }
    }

    .modalV2-seite-kopf {
        flex: 0 0 auto;
        position: relative;
        padding: 18px 54px 14px 20px;
        border-bottom: 1px solid #B9DDE2;
        background: #CFEBEF;
    }
    .modalV2-seite-kopf .modalV2-title { text-align: left; margin: 0; padding: 0; }
    .modalV2-seite-kopf .modalV2-close { top: 14px; right: 14px; }

    .modalV2-seite-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 20px 22px;
        text-align: left;
    }

    .modalV2-seite-fuss {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #B9DDE2;
        background: #CFEBEF;
    }
    .modalV2-seite-fuss > div {
        flex: 1 1 auto;
        text-align: center;
        border-radius: 9px;
        padding: 11px 12px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: filter 0.15s;
    }
    .modalV2-seite-fuss > div:hover { filter: brightness(1.08); }
    /* .off2 markiert den Anlegen-Button als "noch nicht ausfuellbar" und bringt dabei
       eigene Abstaende mit (margin:auto, padding:15px). Im Flex-Fuss neutralisieren,
       damit nur der ausgegraute Zustand uebrig bleibt und die Zeile nicht springt. */
    .modalV2-seite-fuss > div.off2 { margin: 0; padding: 11px 12px; }
    .seitenBtnPrimaer { background: #0A3242; color: #fff; }
    .seitenBtnSekundaer { background: #fff; color: #0A3242; border: 1px solid #0A3242; }
    .seitenBtnGefahr { background: #c0392b; color: #fff; }

    /* Formularfelder im Seitenpanel auf normale Hoehe. Das globale .textfield3 ist
       60px hoch und hat KEIN horizontales Padding — der Platzhaltertext klebt sonst
       am Rahmen. Bewusst nur innerhalb von .modalV2-seite-body ueberschrieben, damit
       die Felder im uebrigen Adminpanel unveraendert bleiben. */
    .modalV2-seite-body .textfield3 {
        height: 44px;
        margin: 0;
        padding: 0 12px;
        font-size: 15px;
        background: #fff;
        border: 1px solid #7FA6B0;
        border-radius: 9px;
        box-sizing: border-box;
        width: 100%;
    }
    .modalV2-seite-body select.textfield3 { padding-right: 34px; }
    .modalV2-seite-body .textfield3:focus {
        outline: none;
        border-color: #0A3242;
        box-shadow: 0 0 0 3px rgba(75, 191, 200, 0.28);
    }
    .modalV2-seite-body .textfield3::placeholder { color: #8C9BA1; }

    /* Das Auge zum Passwort-Einblenden ist global absolut positioniert (top:32px) und
       haengt sich damit an das Panel statt an sein Label — es landete oben rechts neben
       dem Schliessen-X. Im Seitenpanel gehoert es in den Textfluss des Labels. */
    .modalV2-seite-body .showPassword,
    .modalV2-seite-body .showPassword2 {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        vertical-align: middle;
    }
    .modalV2-seite-body .showPassword .eye,
    .modalV2-seite-body .showPassword2 .eye { height: 22px; width: auto; }

    .seitenLabel { font-weight: 600; margin-top: 16px; margin-bottom: 5px; }
    .seitenLabel:first-child { margin-top: 0; }
    .seitenLabelZusatz { font-weight: 400; font-size: 13px; color: #4A5A60; }
    .seitenFliesstext { font-size: 14px; color: #24505C; margin-bottom: 6px; }
    .seitenTrenner { border-top: 1px solid #B9DDE2; margin: 20px 0 4px; }
    .seitenZweiSpalten { display: flex; gap: 10px; }
    .seitenZweiSpalten .textfield3 { flex: 1 1 0; min-width: 0; }
    /* Sekundaere Aktion im Panel-Inhalt (Passwort aendern, Reset-Link, Gruppe speichern).
       Die Buttons tragen zusaetzlich .hasHover, das global weisse Schrift setzt — auf
       hellem Grund waere der Text unsichtbar, deshalb steht die Farbe hier ausdruecklich.
       Diese Datei laedt nach _styles.html, gleiche Spezifitaet gewinnt also hier. */
    .seitenAktion {
        margin: 10px 0 0 0;
        background: #fff;
        color: #0A3242;
        border: 1px solid #0A3242;
        border-radius: 9px;
        padding: 9px 12px;
        text-align: center;
        font-weight: 600;
        cursor: pointer;
        width: auto;
    }
    .seitenAktion:hover { background: #EAF6F8; }
    /* Hervorgehobene Variante (Speichern-Aktionen im Panel-Inhalt) */
    .seitenAktionPrimaer { background: #0A3242; color: #fff; }
    .seitenAktionPrimaer:hover { background: #14536B; }

    /* ---------------------------------------------------------------------
       Rueckfrage vor einer Aktion, die sich nicht zurueckholen laesst.
       Eigene Ebene INNERHALB des Seitenpanels statt Vollbild-Popup: sie deckt
       nur das Panel ab, so bleibt sichtbar, worauf sich die Frage bezieht.
       Traeger ist das Panel selbst (position: relative), damit die Ebene beim
       Scrollen des Panel-Inhalts stehen bleibt.

       Zuerst fuer die Uebergabe-Checkliste gebaut, seit 18.08.2026 allgemein:
       das Mitarbeiter-Panel liegt in _modals.html und damit ausserhalb der
       Einstellungen-Kopfdatei.
       --------------------------------------------------------------------- */
    .panelBestaetigen {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(8, 49, 62, .55);
    }

    /* .sr-only blendet sonst nur fuer das Auge aus und laesst die Flaeche klickbar */
    .panelBestaetigen.sr-only { display: none; }

    .panelBestaetigenKarte {
        width: 100%;
        max-width: 380px;
        background: #FFFFFF;
        border-radius: 14px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(6, 26, 34, .35);
    }

    .panelBestaetigenTitel {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        color: #08313E;
    }

    .panelBestaetigenText {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.5;
        color: #24505C;
    }

    .panelBestaetigenAktionen {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
    }

    .panelBestaetigenAktionen .seitenAktion {
        flex: 1 1 150px;
        min-height: 46px;
        margin: 0;
        padding: 10px 16px;
    }

    /* Der bestaetigende Knopf wird rot, wenn die Aktion etwas wegnimmt
       (deaktivieren, sperren, loeschen). Die ID-Sammelregel weiter oben
       gewinnt sonst gegen eine reine Klassenregel — daher beide IDs benannt. */
    #EinstBestaetigenJa.panelJaGefahr,
    #MaBestaetigenJa.panelJaGefahr {
        background: #C0392B;
        border-color: #C0392B;
        color: #FFFFFF;
    }

    #EinstBestaetigenJa.panelJaGefahr:hover,
    #MaBestaetigenJa.panelJaGefahr:hover {
        background: #A93226;
    }
    .seitenRechte label { display: block; cursor: pointer; margin-top: 5px; font-size: 14px; }
    .seitenRechte input { transform: scale(1.25); margin-right: 9px; vertical-align: middle; }

    /* Aktiv/Inaktiv-Umschalter: .activeUser/.inactiveUser sind global absolut positioniert
       (Rest der alten Popup-Geometrie). Im Seitenpanel zu einem normalen Paar begradigen —
       die Farben setzt weiterhin das JS per .css(), damit dessen Logik unveraendert bleibt. */
    .seitenStatusZeile { display: flex; gap: 8px; margin-bottom: 14px; }
    .seitenStatusZeile .activeUser,
    .seitenStatusZeile .inactiveUser {
        position: static;
        right: auto;
        margin: 0;
        flex: 1 1 0;
        text-align: center;
        padding: 7px 10px;
        border-radius: 999px;
        box-shadow: none;
        font-weight: 700;
        font-size: 13px;
    }
    .seitenHinweisRot { font-weight: 600; font-size: 12.5px; margin-top: 5px; color: #8A2B00; }
    .seitenLinkBox {
        background: #fff;
        border: 1px solid #B9DDE2;
        border-radius: 9px;
        padding: 10px 12px;
        font-size: 13px;
        word-break: break-all;
        color: #24505C;
    }

    @media (max-width: 650px) {
        .modalV2-overlay--seite { align-items: flex-end; justify-content: center; }
        .modalV2-panel--seite {
            width: 100vw; /* nicht 100% — siehe Begruendung an der Grundregel */
            height: auto;
            max-height: 92dvh;
            border-radius: 20px 20px 0 0;
            /* gleicher Grund wie oben: transition statt animation, hier von unten */
            transform: translateY(100%);
        }
        .modalV2-overlay--seite:not(.sr-only) .modalV2-panel--seite {
            transform: translateY(0);
        }
        .modalV2-overlay--seite.seiteFaehrtRaus .modalV2-panel--seite {
            transform: translateY(100%);
        }
    }

    /* ---------------------------------------------------------------------
       Mitarbeiter-Bereich im Adminpanel: eine Box mit Kopfzeile, Filter-Chips
       und anklickbaren Karten. Bearbeiten laeuft ueber das Seitenpanel, das
       fruehere Stift-Icon auf der Karte entfaellt.
       --------------------------------------------------------------------- */
    .maKopf {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
    }
    .maKopf .headlineBlock { flex: 0 0 auto; text-align: left; }
    .maKopfBtns { display: flex; flex-wrap: wrap; gap: 8px; }
    .maKopfBtn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #0A3242;
        color: #fff;
        border-radius: 9px;
        padding: 9px 14px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
    }
    .maKopfBtn:hover { background: #14536B; }
    .maKopfBtn:active { transform: translateY(1px); }
    .maKopfBtn svg { width: 17px; height: 17px; }

    .maChips { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px 10px; }
    .maChip {
        border: 1px solid #0A3242;
        border-radius: 999px;
        padding: 4px 14px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        color: #0A3242;
        background: #fff;
    }
    .maChip.maChipAn { background: #0A3242; color: #fff; }
    .maChipInfo { font-size: 13px; color: #4A5A60; margin-left: 4px; }

    /* Knopf unter der gedeckelten Mitarbeiterliste. Bewusst sekundaer gehalten —
       die Hauptaktionen sitzen im Kopf der Box. maMehrZeileAus statt sr-only:
       der Knopf soll auch fuer Screenreader weg sein, solange es nichts
       nachzuladen gibt. */
    .maMehrZeile { display: flex; justify-content: center; margin: 18px 0 4px 0; }
    .maMehrZeile.maMehrZeileAus { display: none; }
    .maMehrBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 240px;
        min-height: 46px;
        padding: 10px 20px;
        border: 1px solid #0A3242;
        border-radius: 10px;
        background: #fff;
        color: #0A3242;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s, transform 0.1s;
    }
    .maMehrBtn:hover { background: #EAF6F8; }
    .maMehrBtn:active { transform: translateY(1px); }

    /* Die Mitarbeiterkarte (.checkboxholder in #Mitarbeiterauflistung) samt
       Name, Inaktiv-Marke und Werkzeugkisten-Knopf steht seit dem 25.08.2026
       in _styles_mitarbeiter.html — sie gibt es nur im Adminpanel (TD-008). */

    @media (max-width: 650px) {
        .maKopf { flex-direction: column; align-items: flex-start; }
        .maKopfBtns { width: 100%; }
        .maKopfBtn { flex: 1 1 auto; justify-content: center; }
        .maMehrBtn { width: 100%; min-width: 0; }
    }

    /* ---------------------------------------------------------------------
       Niederlassungs-Kacheln. Die Kachel nennt nur die ANZAHL der Lagerplaetze,
       nicht deren Namen: mit 15 Lagern wuchs die Kachel auf 393px und zog im
       Bootstrap-Raster die Nachbarkacheln leer auf dieselbe Hoehe. Die Namen
       stehen im Seitenpanel, wo sie ohnehin bearbeitet werden.
       --------------------------------------------------------------------- */
    /* flex-start: eine hohe Kachel streckt die Nachbarn nicht mehr mit. */
    #NlKacheln { align-items: flex-start; }
    #NlKacheln .nlKarte {
        border: 1px solid #C6D8DD;
        background: #fff;
        border-radius: 12px;
        margin-top: 12px;
        margin-left: 20px;
        padding: 14px 16px;
        cursor: pointer;
        text-align: left;
        transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
    }
    #NlKacheln .nlKarte:hover { border-color: #4BBFC8; box-shadow: 0 3px 10px rgba(20, 60, 50, 0.14); }
    #NlKacheln .nlKarte:active { transform: translateY(1px); }
    #NlKacheln .nlKarte.nlKarteInaktiv { background: #F6F7F8; border-style: dashed; }
    #NlKacheln .nlKarte.nlKarteOffen { background: #FFF8EC; border-color: #E8C86A; border-style: dashed; }
    .nlKarteTitel { font-size: 17px; font-weight: 700; color: #0A3242; }
    .nlBadge {
        display: inline-block;
        margin-left: 8px;
        font-size: 11px;
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 9px;
        vertical-align: 2px;
    }
    .nlBadgeHauptsitz { background: #DDF0F3; color: #0A3242; }
    .nlBadgeAus { background: #FFE1C2; color: #8A4B00; }
    .nlAdresse { font-size: 13px; color: #4A5A60; margin-top: 3px; }
    .nlMeta { font-size: 13px; color: #24505C; margin-top: 6px; }
    .nlZaehlerChip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        background: #0A3242;
        color: #fff;
        border-radius: 999px;
        padding: 4px 12px;
        font-size: 13px;
        font-weight: 700;
    }
    .nlZaehlerChip svg { width: 14px; height: 14px; }
    .nlZaehlerChip.nlZaehlerChipLeer { background: #EDF1F2; color: #7A8B91; }

    /* Lagerplatz-Zeile im Seitenpanel */
    .nlLagerZeile {
        background: #fff;
        border: 1px solid #B9DDE2;
        border-radius: 10px;
        padding: 10px 12px;
        margin-top: 10px;
    }
    .nlLagerKopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .nlLagerName { font-weight: 700; color: #0A3242; }
    .nlLagerInfo { font-size: 12.5px; color: #4A5A60; margin-top: 2px; }
    .nlLagerAktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; align-items: center; }
    .nlLagerBtn {
        font-size: 13px;
        font-weight: 600;
        border-radius: 7px;
        padding: 5px 11px;
        cursor: pointer;
        background: #fff;
        color: #0A3242;
        border: 1px solid #0A3242;
    }
    .nlLagerBtn:hover { background: #EAF6F8; }
    .nlLagerBtnAus { border-color: #c0392b; color: #c0392b; }
    .nlLagerBtnAus:hover { background: #FBE9E7; }
    .nlLagerSelect {
        flex: 1 1 150px;
        min-width: 0;
        height: 34px;
        border-radius: 7px;
        border: 1px solid #7FA6B0;
        background: #fff;
        padding: 0 8px;
        font-size: 13px;
    }


/* =====================================================================
   Zurueck-Zeile fuer Unterseiten (UI-Kanon, ADR-034).

   Eine Seite, die aus einer Kachel heraus geoeffnet wird, traegt oben im
   Feld eine Zurueck-Pille — Hersteller-Werkzeuge ebenso wie die Listen des
   Adminpanels (Lagerhandys, Scan-Freigaben, ausgemusterte Geraete).
   Bewusst kein .hasHover: das ist der dunkle, 20px abgesetzte
   Aktionsknopf des Kanons; hier braucht es eine kompakte Pille im Feld.
   ===================================================================== */
.zurueckFeld {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.zurueckBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: solid 1px rgba(10, 50, 66, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #0A3242;
    font-weight: 600;
    font-size: 15px;
    padding: 9px 18px 9px 14px;
    cursor: pointer;
    text-decoration: none;
    transition-duration: 0.3s;
}

.zurueckBtn:hover {
    background: #ffffff;
    color: #0A3242;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(10, 50, 66, .18);
}

.zurueckBtnPfeil {
    font-size: 18px;
    line-height: 1;
}



/* =====================================================================
   Kopfbereich einer Box: Titel, Beschreibung, optionaler Hinweis und EINE
   Aktion rechts unten (UI-Kanon, eingefuehrt 18.08.2026 auf der Seite
   "Ausgemusterte Geraete", danach auf die uebrigen passenden Boxen
   uebertragen).

   Gedacht fuer Boxen, die genau eine Aktion tragen — Listen-Seiten des
   Adminpanels, Werkzeugkiste, Reparaturliste. NICHT fuer Suchboxen (dort
   gehoert der Knopf neben das Feld) und nicht fuer die Adminpanel-Sektionen
   mit mehreren Aktionen.

   Die Box selbst bleibt unveraendert `.toolsearchholder` — geaendert wird
   nur die Anordnung darin, nie die Breite.
   ===================================================================== */
.seiteKopf {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 18px;
}

.seiteKopf .zurueckBtn {
    align-self: flex-start;
    min-height: 44px;
}

.seiteKopfTitel {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #08313E;
}

/* Lesbare Zeilenlaenge, ohne die Box schmaler zu machen: begrenzt wird der
   Textabsatz, nicht der Container */
.seiteKopfText {
    margin: 0;
    max-width: 92ch;
    font-size: 15px;
    line-height: 1.5;
    color: #24505C;
}

/* Dezenter Hinweis — bewusst kein Warnton: heller Grund aus der Farbwelt der
   Wert-Pillen, schmale Akzentkante links. */
.seiteKopfHinweis {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    max-width: 92ch;
    padding: 12px 16px;
    border-left: 3px solid #4BBFC8;
    border-radius: 8px;
    background: #EAF6F8;
    font-size: 14px;
    line-height: 1.5;
    color: #24505C;
}

.seiteKopfHinweisZeichen {
    flex: 0 0 auto;
    font-weight: 700;
    color: #0A3242;
    line-height: 1.5;
}

/* Aktion der Box: mittig unter dem Inhalt (auf Wunsch vom 18.08.2026 wieder
   zentriert statt rechtsbuendig). */
.seiteKopfAktionen {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

/* Die Aktionsknoepfe behalten .hasHover (Farbe, Schatten, Hover), die globale
   Regel zieht sie aber mit `margin: auto` in die Mitte und macht sie
   spaltenbreit. Die IDs stehen selbst in jener Sammelregel — eine reine
   Klassenregel verliert dagegen, deshalb sind sie hier namentlich genannt. */
.seiteKopfAktionen #WerkzeugkisteladenInaktivtools,
.seiteKopfAktionen #LagerhandysLadenBtn,
.seiteKopfAktionen #ScanDevicesladen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 200px;
    max-width: 280px;
    min-height: 46px;
    margin: 0;
    padding: 10px 20px;
    font-size: 15px;
}

.seiteKopfAktionen [role="button"]:focus-visible,
.seiteKopf .zurueckBtn:focus-visible {
    outline: 3px solid #4BBFC8;
    outline-offset: 2px;
}

.seiteKopfAktionZeichen {
    font-size: 17px;
    line-height: 1;
}

/* Schmale Displays: eine Spalte, groessere Touch-Flaechen, Aktion unter dem
   Inhalt ueber die volle Breite. Fliessend ab 700px, damit auch Tablets im
   Hochformat sauber umbrechen. */
@media (max-width: 700px) {
    .seiteKopf {
        gap: 12px;
        padding-bottom: 14px;
    }

    .seiteKopfTitel {
        font-size: 20px;
    }

    .seiteKopfHinweis {
        padding: 10px 12px;
    }

    .seiteKopfAktionen {
        justify-content: stretch;
    }

    .seiteKopfAktionen #WerkzeugkisteladenInaktivtools,
    .seiteKopfAktionen #LagerhandysLadenBtn,
    .seiteKopfAktionen #ScanDevicesladen {
        width: 100%;
        max-width: none;
        min-height: 48px;
    }
}

/* Sehr schmale Geraete (~320px): der Zurueck-Text darf umbrechen */
@media (max-width: 380px) {
    .seiteKopf .zurueckBtn {
        max-width: 100%;
        white-space: normal;
        text-align: left;
    }
}


/* ---------------------------------------------------------------------
   Abschnittsueberschrift innerhalb einer Box (UI-Polish 18.08.2026).

   Die Abschnitte trugen bisher `.headlineBlock` — 16px, Gewicht 400, also
   optisch nicht von Fliesstext zu unterscheiden. `.headlineBlock` selbst
   bleibt unveraendert, weil dieselbe Klasse in den Popups die Formularfragen
   auszeichnet; die Abschnitte tragen jetzt das gemeinsame Titel-Muster.
   Etwas kleiner als der Seitentitel, damit die Hierarchie stimmt.
   --------------------------------------------------------------------- */
.seiteKopfTitelSektion {
    font-size: 20px;
    margin-bottom: 2px;
}

/* Die Mitarbeiter-Kopfzeile ordnet Titel und Aktionen nebeneinander an —
   dieselbe Regel wie zuvor fuer .headlineBlock. */
.maKopf .seiteKopfTitel {
    flex: 0 0 auto;
    text-align: left;
}

/* Beschreibungstexte: bisher 13px/#42606B in den Kacheln und 14px/#24505C in
   den Panels. Eine Groesse, eine Farbe. */
.einstKarteText {
    font-size: 14px;
    line-height: 1.5;
    color: #24505C;
}


/* ---------------------------------------------------------------------
   UI-Polish 18.08.2026 — zwei projektweite Angleichungen.

   1. Karten-Innenabstand: .toolsearchholder hatte 10px oben und 30px unten.
      Der Titel klebte dadurch oben an der Kante, waehrend unten viel Luft
      blieb. Jetzt gleichmaessig, Abstaende aus der 4er-Reihe.
   2. Knopfhoehen im Panel: der Fuss trug 47px, die sekundaeren Aktionen im
      Inhalt 44px, das Kopf-Muster 46px. Alle drei auf 46px, Radius 10px wie
      im uebrigen Projekt.
   Farben, Schrift und Verhalten bleiben unveraendert.
   --------------------------------------------------------------------- */
.toolsearchholder {
    padding-top: 20px;
    padding-bottom: 24px;
}

/* Zwei Knoepfe im Panelfuss tragen zusaetzlich eine eigene ID, die in der
   ID-Sammelregel steht (padding 15px, dadurch 55px hoch) — sie sind hier
   namentlich genannt, damit alle Fussknoepfe gleich hoch sind. */
.modalV2-seite-fuss .seitenBtnPrimaer,
.modalV2-seite-fuss .seitenBtnSekundaer,
.modalV2-seite-fuss .seitenBtnGefahr,
.modalV2-seite-fuss #FirmenDatenAktualisieren,
.modalV2-seite-fuss #ChecklistAlleAktivierenBtn,
.seitenAktion,
.modalV2-seite-body #ChecklistAlleDeaktivierenBtn {
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
