/* ============================================================
   POL-MAP BERLIN
   ZENTRALES APP.CSS
   Responsive für Handy / Tablet / Laptop / Desktop
   ============================================================ */


/* ============================================================
   ⭐ SCHNELL-EINSTELLUNGEN
   Hier kannst du Logo / Header direkt ändern.
   ============================================================ */

:root {

    /* ========================================================
       ⭐ LOGO-GRÖSSE
       Nur diese beiden Werte ändern.
       ======================================================== */

    --polmap-logo-width: 84px;
    --polmap-logo-height: 84px;


    /* ⭐ Abstand Logo → Uhr/Kalender */

    --polmap-logo-clock-gap: 16px;


    /* ⭐ Größe Kalender/Uhr */

    --polmap-clock-size: 16px;


    /* ⭐ Größe Kalender/Uhr Icons */

    --polmap-clock-icon-size: 16px;


    /* ========================================================
       MOBILE LOGO
       ======================================================== */

    --polmap-logo-mobile-width: 75px;
    --polmap-logo-mobile-height: 75px;


    /* ========================================================
       KLEINES HANDY
       ======================================================== */

    --polmap-logo-small-width: 69px;
    --polmap-logo-small-height: 69px;

}


/* ============================================================
   GRUNDLAGEN
   ============================================================ */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    min-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;

    font-family:
        'Inter',
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    background-color: #040814;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-tap-highlight-color: transparent;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

button,
select,
input,
textarea {
    font-family: inherit;
}

img,
svg {
    max-width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.polmap-header {
    width: 100%;
    min-width: 0;

    position: sticky;
    top: 0;

    z-index: 30;

    overflow: visible;
}

.polmap-header-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding:
        10px
        clamp(12px, 2vw, 32px)
        11px;

    min-width: 0;
}


/* ============================================================
   HEADER OBEN
   ============================================================ */

.polmap-header-top {
    width: 100%;
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: clamp(8px, 1.5vw, 24px);
}


/* ============================================================
   ⭐ BRAND / LOGO
   ============================================================ */

.polmap-brand {
    display: flex;

    align-items: center;

    gap: var(--polmap-logo-clock-gap);

    min-width: 0;

    cursor: pointer;

    flex: 0 1 auto;
}


/* ============================================================
   ⭐ LOGO CONTAINER

   WICHTIG:
   Die Größe änderst du oben bei:

   --polmap-logo-width
   --polmap-logo-height

   Hier NICHT suchen müssen.
   ============================================================ */

.polmap-logo {

    width: var(--polmap-logo-width);
    height: var(--polmap-logo-height);

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    overflow: visible;

    transition:
        transform .2s ease,
        filter .2s ease;
}


/* ============================================================
   ⭐ ECHTES LOGO-BILD

   Transparentes PNG bleibt transparent.
   ============================================================ */

.polmap-logo-image {

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: contain;

    object-position: center;

    background: transparent;

    border: 0;

    filter:
        drop-shadow(
            0 4px 12px rgba(14, 165, 233, .18)
        );
}


/* Kleiner Hover-Effekt */

.polmap-brand:hover .polmap-logo {
    transform: scale(1.035);
}

.polmap-brand:hover .polmap-logo-image {
    filter:
        drop-shadow(
            0 5px 16px rgba(14, 165, 233, .28)
        );
}


/* ============================================================
   WICHTIG:
   Alter POLMAP-Schriftzug ist absichtlich deaktiviert.

   Falls du ihn später wieder möchtest:
   .polmap-brand-text { display:flex; }

   Aktuell bleibt er unsichtbar.
   ============================================================ */

.polmap-brand-text {
    display: none !important;
}


/* ============================================================
   DATUM + UHRZEIT
   Direkt rechts neben dem Logo
   ============================================================ */

.polmap-clock {

    display: flex;

    flex-direction: column;

    justify-content: center;

    /* ⭐ Abstand zwischen Kalender und Uhr */
    
    gap: 15px;

    margin: 0;

    font-family: 'JetBrains Mono', monospace;

    font-size: var(--polmap-clock-size);

    line-height: 1.25;

    color: rgba(186, 230, 253, .9);

    min-width: 0;

    white-space: nowrap;
}


.polmap-clock > span {

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;
}


/* ============================================================
   KALENDER / UHR ICON
   ============================================================ */

.polmap-clock-icon {

    width: var(--polmap-clock-icon-size);
    height: var(--polmap-clock-icon-size);

    flex: 0 0 var(--polmap-clock-icon-size);

    color: #38bdf8;
}


.polmap-date {
    color: rgba(186, 230, 253, .8);
    font-weight: 500;
}


.polmap-time {
    color: #38bdf8;
    font-weight: 700;
}


/* ============================================================
   DESKTOP AKTIONEN
   ============================================================ */

.polmap-desktop-actions {

    display: flex;

    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    gap: clamp(5px, .6vw, 9px);

    min-width: 0;
}


.polmap-desktop-action {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 36px;

    padding:
        7px
        clamp(8px, .8vw, 12px);

    border-radius: 11px;

    border:
        1px solid rgba(14, 116, 144, .55);

    background:
        rgba(15, 23, 42, .9);

    color: #bae6fd;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.polmap-desktop-action:hover {

    background:
        rgba(30, 41, 59, .95);

    border-color:
        #0ea5e9;
}


.polmap-desktop-action:active {
    transform: scale(.97);
}


.polmap-desktop-action svg {

    width: 14px;
    height: 14px;

    flex: 0 0 14px;
}


.polmap-live-action svg {
    color: #f87171;
}


.polmap-whatsapp-action {

    background:
        linear-gradient(
            90deg,
            rgba(5, 150, 105, .95),
            rgba(13, 148, 136, .95)
        );

    border-color:
        rgba(52, 211, 153, .25);

    color: #fff;
}


.polmap-whatsapp-action:hover {

    background:
        linear-gradient(
            90deg,
            rgba(16, 185, 129, .95),
            rgba(20, 184, 166, .95)
        );
}


/* ============================================================
   LIVE PUNKT
   ============================================================ */

.polmap-live-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #ef4444;

    box-shadow:
        0 0 0 3px rgba(239, 68, 68, .12),
        0 0 8px rgba(239, 68, 68, .65);

    animation:
        polmap-blink 1.2s infinite;
}


@keyframes polmap-blink {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: 1;
    }
}


/* ============================================================
   MOBILE AKTIONEN
   ============================================================ */

.polmap-mobile-actions {

    display: none;

    align-items: center;
    justify-content: flex-end;

    flex: 0 0 auto;

    gap: 4px;
}


.polmap-action {

    min-width: 34px;
    min-height: 34px;

    padding: 6px 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 4px;

    border-radius: 10px;

    border:
        1px solid rgba(14, 116, 144, .55);

    background:
        rgba(15, 23, 42, .9);

    color: #bae6fd;

    font-size: 10px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;
}


.polmap-action svg {

    width: 15px;
    height: 15px;
}


.polmap-whatsapp {

    background:
        rgba(5, 150, 105, .9);

    border-color:
        rgba(52, 211, 153, .25);

    color: #fff;
}


.polmap-login {

    padding-left: 8px;
    padding-right: 8px;
}


/* ============================================================
   ABSCHNITT + WACHE
   ============================================================ */

.header-select-row {

    width: 100%;
    min-width: 0;

    display: flex;

    align-items: flex-end;
    justify-content: flex-start;

    flex-wrap: nowrap;

    gap: clamp(8px, 1.2vw, 16px);

    margin-top: 18px;
}


.header-select-group {

    width: max-content;

    min-width: 0;

    max-width: min(220px, 40vw);

    flex: 0 1 auto;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;
}


.header-select-label {

    width: max-content;
    max-width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 5px;

    color: #38bdf8;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .075em;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.header-select-label span {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.header-select-icon {

    width: 12px;
    height: 12px;

    flex: 0 0 12px;

    color: #38bdf8;
}


.header-select {

    display: block;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    height: 36px;

    padding:
        7px
        28px
        7px
        10px;

    border-radius: 10px;

    border:
        1px solid rgba(14, 116, 144, .7);

    background-color: #050b1f;

    color: #fff;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 500;

    outline: none;

    cursor: pointer;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .35);

    text-overflow: ellipsis;

    white-space: nowrap;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}


.header-select:hover {
    border-color: #0ea5e9;
}


.header-select:focus {

    border-color: #38bdf8;

    box-shadow:
        0 0 0 1px rgba(56, 189, 248, .25),
        inset 0 1px 2px rgba(0, 0, 0, .35);
}


.header-select option {

    background: #050b1f;
    color: #fff;
}


.header-select-group:first-child,
.header-select-group:nth-child(2) {

    width: clamp(180px, 12vw, 220px);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .polmap-header-inner {

        padding-left: 14px;
        padding-right: 14px;
    }

    .polmap-desktop-action {

        padding-left: 8px;
        padding-right: 8px;

        gap: 7px;

        font-size: 10px;
    }
}


/* ============================================================
   TABLET ENGER
   ============================================================ */

@media (max-width: 900px) {

    .polmap-header-inner {

        padding-top: 9px;
        padding-bottom: 10px;
    }


    /* ⭐ Tablet Logo */

    .polmap-logo {

        width: var(--polmap-logo-mobile-width);
        height: var(--polmap-logo-mobile-height);
    }


    .polmap-clock {

        font-size: 12px;

        gap: 7px;
    }


    .polmap-clock-icon {

        width: 15px;
        height: 15px;

        flex-basis: 15px;
    }


    .polmap-desktop-actions {

        gap: 4px;
    }


    .polmap-desktop-action {

        min-height: 34px;

        padding:
            6px
            7px;

        font-size: 9px;
    }


    .polmap-desktop-action svg {

        width: 13px;
        height: 13px;
    }


    .header-select-row {

        margin-top: 9px;

        gap: 8px;
    }
}


/* ============================================================
   TABLET / IPAD
   ============================================================ */

@media (max-width: 820px) {

    .polmap-desktop-action {

        padding-left: 6px;
        padding-right: 6px;
    }

    .header-select-group:first-child,
    .header-select-group:nth-child(2) {

        width: clamp(180px, 12vw, 200px);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .polmap-header-top {

        align-items: center;
    }


    .polmap-desktop-actions {

        display: none;
    }


    .polmap-mobile-actions {

        display: flex;
    }


    .polmap-brand {

        flex: 1 1 auto;

        min-width: 0;

        gap: 9px;
    }


    .polmap-logo {

        width: var(--polmap-logo-mobile-width);
        height: var(--polmap-logo-mobile-height);
    }


    .polmap-clock {

        font-size: 12px;

        gap: 7px;
    }


    .polmap-clock-icon {

        width: 14px;
        height: 14px;

        flex-basis: 14px;
    }


    .header-select-row {

        width: 100%;

        gap: 7px;

        margin-top: 14px;
    }


    .header-select-group:first-child,
    .header-select-group:nth-child(2) {

        width: calc(50% - 4px);

        max-width: calc(50% - 4px);
    }


    .header-select {

        width: 100%;

        height: 34px;

        font-size: 10px;

        padding-left: 8px;
        padding-right: 24px;
    }


    .header-select-label {

        font-size: 9px;
    }
}


/* ============================================================
   SEHR KLEINE HANDYS
   ============================================================ */

@media (max-width: 480px) {

    .polmap-header-inner {

        padding-left: 9px;
        padding-right: 9px;
    }


    /* ⭐ Logo-Größe für kleine Handys */

    .polmap-logo {

        width: var(--polmap-logo-small-width);
        height: var(--polmap-logo-small-height);

        border-radius: 0;
    }


    .polmap-brand {

        gap: 7px;
    }


    .polmap-clock {

        font-size: 11px;

        gap: 5px;
    }


    .polmap-clock-icon {

        width: 12px;
        height: 12px;

        flex-basis: 12px;
    }


    .polmap-mobile-actions {

        gap: 3px;
    }


    .polmap-action {

        min-width: 30px;
        min-height: 30px;

        padding: 5px 6px;

        border-radius: 8px;
    }


    .polmap-action svg {

        width: 13px;
        height: 13px;
    }


    .polmap-login span {
        display: none;
    }


    .header-select-row {
        gap: 10px;
    }


    .header-select {

        height: 32px;

        font-size: 9px;

        padding:
            6px
            20px
            6px
            7px;

        border-radius: 8px;
    }


    .header-select-label {

        font-size: 8px;

        letter-spacing: .05em;
    }


    .header-select-icon {

        width: 10px;
        height: 10px;

        flex-basis: 10px;
    }
}


/* ============================================================
   ULTRA-KLEINE GERÄTE
   ============================================================ */

@media (max-width: 360px) {

    .polmap-logo {

        width: 36px;
        height: 36px;
    }


    .polmap-clock {

        font-size: 7px;
    }


    .polmap-action {

        min-width: 28px;
        min-height: 28px;

        padding: 4px;
    }


    .polmap-action svg {

        width: 12px;
        height: 12px;
    }


    .header-select {

        font-size: 8px;
    }
}


/* ============================================================
   KARTE
   ============================================================ */

.leaflet-container,
#map {

    -webkit-tap-highlight-color: transparent;

    transform: translateZ(0);
}


#map {

    width: 100%;

    height: 520px;
    min-height: 520px;

    background-color: #060e24;
}


@media (max-width: 1024px) {

    #map {

        height: 460px;
        min-height: 460px;
    }
}


@media (max-width: 768px) {

    #map {

        height: 420px;
        min-height: 420px;
    }
}


@media (max-width: 480px) {

    #map {

        height: 380px;
        min-height: 380px;
    }
}


/* ============================================================
   FULLSCREEN KARTE
   ============================================================ */

.map-fullscreen {

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 9999 !important;

    border-radius: 0 !important;
}


.map-fullscreen #map {

    width: 100% !important;

    height: calc(100vh - 58px) !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;
}


/* ============================================================
   DARK MAP
   ============================================================ */

.leaflet-tile.polmap-osm-dark {

    filter:
        brightness(.68)
        contrast(1.18)
        saturate(.72);
}


/* ============================================================
   MARKER
   ============================================================ */

.custom-police-marker {

    background:
        linear-gradient(
            135deg,
            #0284c7 0%,
            #1d4ed8 100%
        );

    border:
        2px solid #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    box-shadow:
        0 0 6px rgba(2, 132, 199, .4);

    transition: none !important;

    transform-origin: center center;
}


.custom-police-marker.active-marker {

    background:
        rgba(15, 23, 42, .9) !important;

    border:
        2px solid #ef4444 !important;

    transform: scale(1.1);

    box-shadow:
        0 0 10px rgba(239, 68, 68, .6);

    z-index: 1000 !important;
}


.custom-police-marker.active-marker i {

    color: #ef4444 !important;
}


/* ============================================================
   MAP LABEL
   ============================================================ */

.map-label-tooltip {

    background:
        rgba(255, 255, 255, .95);

    border:
        1px solid rgba(14, 165, 233, .4);

    color: #0f172a;

    font-weight: 600;

    font-size: 11px;

    padding: 3px 8px;

    border-radius: 6px;

    box-shadow:
        0 4px 12px rgba(2, 132, 199, .2);

    backdrop-filter: blur(4px);

    cursor: pointer;
}


.leaflet-interactive {

    fill-opacity: 0 !important;
    fill: transparent !important;
}


/* ============================================================
   ANIMATIONEN
   ============================================================ */

@keyframes police-pulse-blue {

    0%,
    100% {

        box-shadow:
            0 0 10px rgba(14, 165, 233, .2);
    }

    50% {

        box-shadow:
            0 0 20px rgba(14, 165, 233, .45);
    }
}


@keyframes police-pulse-red {

    0%,
    100% {

        box-shadow:
            0 0 8px rgba(239, 68, 68, .3);
    }

    50% {

        box-shadow:
            0 0 16px rgba(239, 68, 68, .6);
    }
}


.pulse-blue {
    animation:
        police-pulse-blue 3.5s infinite;
}


.pulse-red {
    animation:
        police-pulse-red 3s infinite;
}


/* ============================================================
   TOAST
   ============================================================ */

#toastContainer {

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 10000;

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-width:
        calc(100vw - 48px);
}


.toast {

    background: #0f172a;

    color: #f8fafc;

    border:
        1px solid rgba(14, 165, 233, .3);

    padding: 12px 18px;

    border-radius: 12px;

    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, .5);

    font-size: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    animation:
        slideIn .3s ease-out forwards;
}


.toast.success {

    border-color:
        rgba(34, 197, 94, .4);
}


.toast.error {

    border-color:
        rgba(239, 68, 68, .4);
}


@keyframes slideIn {

    from {

        transform: translateY(100%);
        opacity: 0;
    }

    to {

        transform: translateY(0);
        opacity: 1;
    }
}


/* ============================================================
   PRINT HEADER
   ============================================================ */

#printHeaderOnly {
    display: none;
}


/* ============================================================
   DRUCK / PDF
   ============================================================ */

@media print {

    @page {

        size: A4 portrait;
        margin: 10mm;
    }


    html,
    body {

        width: 100% !important;
        min-width: 0 !important;

        background: #fff !important;
    }


    body {

        color: #1e293b !important;

        font-size: 11pt;

        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }


    header,
    footer,
    .no-print,
    #adminPanel,
    #loginModal,
    #helpModal,
    #toastContainer {

        display: none !important;
    }


    #printHeaderOnly {

        display: block !important;

        border-bottom:
            3px solid #0284c7;

        padding-bottom: 8px;

        margin-bottom: 12px;
    }


    #printHeaderTitle {

        font-size: 16pt !important;

        font-weight: 800;

        color: #0f172a;

        letter-spacing: -.025em;
    }


    #printHeaderSub {

        font-size: 10.5pt;

        color: #0284c7;

        font-weight: 600;

        margin-top: 2px;
    }


    main {

        padding: 0 !important;

        max-width: 100% !important;

        margin: 0 !important;

        display: block !important;

        width: 100% !important;
    }


    .grid {

        display: block !important;
    }


    #mapContainerWrapper {

        width: 100% !important;

        border:
            1px solid #cbd5e1 !important;

        background: #fff !important;

        box-shadow: none !important;

        margin:
            0 0 15px 0 !important;

        border-radius: 10px !important;

        overflow: hidden !important;

        page-break-after: avoid !important;
    }


    #mapContainerWrapper .px-5 {

        background: #f1f5f9 !important;

        border-bottom:
            1px solid #cbd5e1 !important;

        padding:
            8px 12px !important;
    }


    #mapContainerWrapper h3 {

        color: #0f172a !important;

        font-size: 11pt !important;
    }


    #map {

        width: 180mm !important;
        max-width: 180mm !important;
        min-width: 180mm !important;

        height: 101.25mm !important;
        min-height: 101.25mm !important;
        max-height: 101.25mm !important;

        position: relative !important;

        left: 50% !important;

        transform:
            translateX(-50%)
            translateZ(0) !important;

        will-change: transform !important;

        margin: 0 !important;

        aspect-ratio: 16 / 9 !important;

        background: #fff !important;

        display: block !important;

        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }


    div.bg-\[\#030712\]\/80 {

        background: #e8eff6 !important;

        border:
            1px solid #7cb9e8 !important;

        color: #002855 !important;

        border-radius: 8px !important;

        padding:
            14px 16px !important;

        margin-bottom: 12px !important;

        box-shadow: none !important;
    }


    .text-sky-400,
    .text-sky-300,
    .text-sky-400\/80 {

        color: #003366 !important;
    }


    .text-white {

        color: #001f3f !important;
    }


    #infoStatus {

        color: #002244 !important;

        font-size: 14pt !important;
    }


    #infoZustaendig {

        color: #1c3b57 !important;

        font-size: 11pt !important;
    }


    #infoDetails,
    #infoDetails li,
    #infoDetails strong {

        color: #0b2545 !important;

        font-size: 10.5pt !important;

        line-height: 1.6 !important;
    }


    #infoDetails strong {

        color: #001f3f !important;
    }


    #infoDetails a {

        color: #0047ab !important;

        text-decoration: underline;
    }


    .leaflet-container {

        background: #fff !important;
    }
}


/* ============================================================
   KOMPATIBILITÄT FÜR WEITERE SEITEN
   ============================================================ */

.line-clamp-3 {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


@keyframes spin-slow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.spinning {

    animation:
        spin-slow 1s linear infinite;
}


@keyframes pulse-glow {

    0%,
    100% {

        opacity: .4;

        filter:
            drop-shadow(
                0 0 2px rgba(56, 189, 248, .5)
            );
    }

    50% {

        opacity: 1;

        filter:
            drop-shadow(
                0 0 10px rgba(56, 189, 248, .9)
            );
    }
}


.pulsing-footer {

    animation:
        pulse-glow 3s ease-in-out infinite;
}


mark.highlight {

    background-color:
        rgba(234, 179, 8, .35);

    color: #fef08a;

    padding: 0 2px;

    border-radius: 3px;

    border-bottom:
        1px solid rgba(234, 179, 8, .7);
}


/* ============================================================
   HEADER-KOMPATIBILITÄT
   ============================================================ */

.polmap-header form,
.polmap-header .flex.items-center.gap-4,
.polmap-header .grid,
.polmap-header .section-wache-row,
.polmap-header .section-wache-container,
.polmap-header .abschnitt-wache-wrapper {

    width: auto;
    max-width: none;
}


.polmap-header .header-select-row {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: flex-end !important;

    justify-content: flex-start !important;
}


.polmap-header .header-select-group {

    display: flex !important;

    flex-direction: column !important;

    flex: 0 1 auto !important;

    min-width: 0 !important;
}


.polmap-header .header-select {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;
}


/* ============================================================
   ABSTAND UNTER DEM HEADER
   ============================================================ */

body > main {
    padding-top: 5px !important;
}


@media (max-width: 768px) {

    body > main {
        padding-top: 5px !important;
    }
}


@media (max-width: 480px) {

    body > main {
        padding-top: 5px !important;
    }
}

/* ============================================================
   HEADER-SICHERUNG
   Brand links, Aktionen rechts – ohne globale Verschiebung.
   ============================================================ */
.polmap-header-top {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 24px);
}

.polmap-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.polmap-desktop-actions,
.polmap-mobile-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.polmap-clock {
    flex: 0 0 auto;
}