/* _content/DRKHOKAPP/Pages/fahrzeuge/Termine.razor.rz.scp.css */
.sortable[b-texul1o94g] { cursor: pointer; user-select: none; }
/* _content/DRKHOKAPP/Pages/Index.razor.rz.scp.css */
/* --- Layout & Cards --- */
.home-wrap[b-z1fimgklxx] { display: grid; gap: 1rem; }
.card[b-z1fimgklxx] { border: 1px solid var(--bs-border-color, #e9ecef); border-radius: 1rem; overflow: hidden; }

/* --- Hero --- */
.hero[b-z1fimgklxx] { background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); }
.hero-inner[b-z1fimgklxx] {
  display: grid; grid-template-columns: 1.3fr .9fr; gap: 1rem; align-items: stretch; padding: 1.25rem;
}
.hero .title[b-z1fimgklxx] { margin: 0; font-size: clamp(22px, 3.2vw, 28px); letter-spacing: .2px; color: rgb(237, 0, 0);}
.hero .subtitle[b-z1fimgklxx] { margin: .15rem 0 0 0; color: #6b7280; }
.kicker[b-z1fimgklxx] { color: #6b7280; margin:.6rem 0 1rem; }
.hello[b-z1fimgklxx] { display: flex; align-items: center; gap: .8rem; }
.avatar[b-z1fimgklxx] {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #334155;
  background: #e5edff; border: 1px solid #d6e0ff;
}
.actions[b-z1fimgklxx] { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- Hero Media --- */
.media-card[b-z1fimgklxx] { position: relative; }
.media-placeholder[b-z1fimgklxx] { aspect-ratio: 16/9; border-radius: .75rem; overflow: hidden; }
.media-card img[b-z1fimgklxx] { width: 100%; height: 100%; object-fit: cover; border-radius: .75rem; display: block; }
.media-toolbar[b-z1fimgklxx] { position: absolute; bottom: .5rem; right: .5rem; }

/* --- Grid section --- */
.grid[b-z1fimgklxx] { display: grid; grid-template-columns: 1.4fr .8fr; gap: 1rem; }

/* --- Status --- */
.status-list[b-z1fimgklxx] { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.status-list .dot[b-z1fimgklxx] { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; margin-right: .5rem; transform: translateY(1px); }
.dot-ok[b-z1fimgklxx] { background: #22c55e; box-shadow: 0 0 0 3px #22c55e22; }
.dot-warn[b-z1fimgklxx] { background: #f59e0b; box-shadow: 0 0 0 3px #f59e0b22; }

/* --- Buttons --- */
.btn[b-z1fimgklxx] { border-radius: .75rem; }

/* --- Responsive --- */
@media (max-width: 980px) {
  .hero-inner[b-z1fimgklxx] { grid-template-columns: 1fr; }
  .grid[b-z1fimgklxx] { grid-template-columns: 1fr; }
}

/* --- Dark mode friendly tweaks --- */
@media (prefers-color-scheme: dark) {
  .hero[b-z1fimgklxx] { background: linear-gradient(135deg, #0f172a 0%, #111827 100%); }
  .avatar[b-z1fimgklxx] { background: #172554; color: #e5edff; border-color: #1e3a8a; }
  .subtitle[b-z1fimgklxx], .kicker[b-z1fimgklxx] { color: #cbd5e1; }
}
/* _content/DRKHOKAPP/Pages/mpg/Mpg.razor.rz.scp.css */
/* MPG: Wachen-Farbcode in der Übersicht */
.station-kuenzelsau[b-9qjlprjo4b] {
    background-color: #82cafd; /* leichtes Hellblau */
}

.station-oehringen[b-9qjlprjo4b] {
    background-color: #f0ab89; /* leichtes Braun / Beige */
}

.station-westernhausen[b-9qjlprjo4b] {
    background-color: #f8a31c; /* leichtes Orange */
}

.station-adolzfurt[b-9qjlprjo4b] {
    background-color: #d770e7; /* leichtes Lila (Vorbereitung) */
}

.station-hohebach[b-9qjlprjo4b] {
    background-color: #c16282; /* leichtes Rosa (Vorbereitung) */
}
/* Legende-Kästchen */
.legend-color-box[b-9qjlprjo4b] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.2);
}
/* _content/DRKHOKAPP/Pages/schicht/WachenChat.razor.rz.scp.css */
.title[b-7d3kmqahyp]{ margin:.25rem 0 .75rem; }

.chat-card[b-7d3kmqahyp]{
  display:flex; flex-direction:column; gap:.6rem;
  border:1px solid #e9ecef; border-radius:14px; background:#fff;
  box-shadow:0 2px 16px rgba(16,24,40,.04);
  max-width: min(980px, 100%); padding:.75rem;
}

.chat-header[b-7d3kmqahyp]{
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem .5rem .25rem;
  border-bottom:1px solid #f1f3f5;
}
.chat-header .left[b-7d3kmqahyp]{ display:flex; align-items:center; gap:.5rem; }
.chat-header .dot[b-7d3kmqahyp]{
  width:10px; height:10px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 3px #def7ec;
}
.chat-header .hint[b-7d3kmqahyp]{ font-size:.85rem; color:#6b7280; }

.chat-body[b-7d3kmqahyp]{
  height: clamp(360px, 52vh, 620px);
  overflow:auto; padding:.5rem;
  background:
    radial-gradient(1200px 1200px at 0% 0%, rgba(247,249,255,.6), transparent 60%),
    radial-gradient(1200px 1000px at 100% 100%, rgba(240,249,255,.5), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border-radius:10px;
}

.empty[b-7d3kmqahyp]{
  margin: 1.25rem auto; text-align:center; color:#7a8190;
}

.msg[b-7d3kmqahyp]{ display:flex; flex-direction:column; gap:.22rem; margin:.5rem 0; max-width:min(78%, 700px); }
.msg .meta[b-7d3kmqahyp]{ display:flex; gap:.6rem; align-items:center; font-size:.78rem; color:#727a87; padding:0 .25rem; }
.msg .meta .user[b-7d3kmqahyp]{ font-weight:700; color:#111827; }
.msg .bubble[b-7d3kmqahyp]{
  padding:.55rem .7rem; border-radius:14px;
  background:#f8fafc; border:1px solid #edf2f7; color:#0f172a;
  line-height:1.35; word-break:break-word;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.msg.me[b-7d3kmqahyp]{ margin-left:auto; align-items:flex-end; }
.msg.me .meta[b-7d3kmqahyp]{ justify-content:flex-end; }
.msg.me .bubble[b-7d3kmqahyp]{
  background:#eef6ff; border-color:#d3e4ff;
}

.chat-input[b-7d3kmqahyp]{
  display:grid; grid-template-columns:1fr auto; gap:.5rem;
  border-top:1px solid #eef2f6; padding:.5rem .25rem .25rem;
}
.chat-input textarea[b-7d3kmqahyp]{
  min-height:44px; max-height:180px; resize:vertical;
  font-size:.98rem;
}
.send-btn[b-7d3kmqahyp]{ align-self:end; min-width:120px; }
/* _content/DRKHOKAPP/Shared/MainLayout.razor.rz.scp.css */
.page[b-z8lq3fpnoc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-z8lq3fpnoc] {
    flex: 1;
    width: 100%;
    max-width: 100%;
}


.sidebar[b-z8lq3fpnoc] {
    background-image: linear-gradient(180deg, rgb(42, 42, 42) 0%, #363636 70%);
    width: 270px !important;
    display: none;
}
.current-page[b-z8lq3fpnoc] {
    font-weight: 800;
    font-size: 1.05rem;
    color: #000000;          /* ggf. #fff, wenn dunkler Hintergrund */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: -900px;
}
.top-row[b-z8lq3fpnoc] {
    background-color: #f8f9fa;   /* hell wie Bootstrap bg-light */
    border-bottom: 1px solid #d6d5d5;
    height: 3.5rem;
    display: flex;
    align-items: center;
}


    .top-row[b-z8lq3fpnoc]  a, .top-row .btn-link[b-z8lq3fpnoc] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-z8lq3fpnoc] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    /* Top-Row immer sichtbar, aber kompakter */
    .top-row[b-z8lq3fpnoc] {
        justify-content: space-between;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .top-row a[b-z8lq3fpnoc],
    .top-row .btn-link[b-z8lq3fpnoc] {
        margin-left: 0.5rem;
    }
}


@media (min-width: 641px) {
    .page[b-z8lq3fpnoc] {
        flex-direction: row;
    }

    .sidebar[b-z8lq3fpnoc] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-z8lq3fpnoc] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-z8lq3fpnoc], article[b-z8lq3fpnoc] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
:root[b-z8lq3fpnoc]{
  --sidebarW: 260px; /* Breite deiner Sidebar hier anpassen */
}

/* Grundlayout: Flex-Zweispalter */
.page[b-z8lq3fpnoc]{
  display: flex;
  min-height: 100vh;
}

/* Sidebar standard */
.page .sidebar[b-z8lq3fpnoc]{
  width: var(--sidebarW);
  transition:
    transform .24s ease,
    width .24s ease,
    padding .24s ease,
    opacity .18s ease;
  will-change: transform, width, padding, opacity;
  overflow: hidden; /* kein Überlauf beim Animieren */
}

/* Hauptbereich */
.page > main[b-z8lq3fpnoc]{
  flex: 1 1 auto;
  min-width: 0;            /* wichtig für Grid/Overflow im Content */
  position: relative;      /* für den Toggle-Button */
}

/* Toggle-Button immer erreichbar 
.sidebar-toggle{
  position: absolute;        
  top: 40rem;
  background-color: red !important;
  right: 85rem;
  z-index: 2000;
}*/

/* Versteckt: Sidebar „swiped“ leicht nach links, wird 0 breit,
   klickt nicht mehr mit und blendet weich aus 
.page .sidebar.is-hidden{
  transform: translateX(-16px);
  width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  opacity: 0;
  pointer-events: none;
}*/

/* (Optional) Auf großen Screens nach der Animation wirklich entfernen */
/* === MOBILE: Layout-Sidebar als Off-Canvas Drawer (Desktop unverändert) === */
@media (max-width: 992px){
  .page[b-z8lq3fpnoc]{ position: relative; flex-direction: column; min-height: 100dvh; }

  /* Sidebar = Drawer links, standardmäßig versteckt */
  .page .sidebar[b-z8lq3fpnoc]{
    position: fixed;
    top: 0; left: 0;
    height: 100dvh;
    width: clamp(260px, 82vw, 350px);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3000; /* über Backdrop */
    box-shadow: 0 0 24px rgba(0,0,0,.28);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
  }
  /* Sichtbar wenn NICHT hidden */
  .page .sidebar:not(.is-hidden)[b-z8lq3fpnoc]{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s ease, opacity .2s ease;
  }
  /* Sicherheitsnetz: aria-hidden versteckt IMMER */
  .page .sidebar[aria-hidden="true"][b-z8lq3fpnoc]{
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Backdrop hinter der Sidebar – klick zum Schließen */
  .nav-backdrop[b-z8lq3fpnoc]{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    z-index: 2999; /* unter Sidebar */
    transition: opacity .2s ease;
  }
  .nav-backdrop.show[b-z8lq3fpnoc]{
    opacity: 1; pointer-events: auto;
  }

  /* Inhalt volle Breite, kein horizontales Überlaufen */
  .page > main[b-z8lq3fpnoc]{
    position: relative; z-index: 1;
    width: 100%; max-width: 100vw;
    padding-inline: clamp(.5rem, 3vw, 1rem);
    overflow-x: hidden;
  }
  html[b-z8lq3fpnoc], body[b-z8lq3fpnoc]{ max-width: 100vw; overflow-x: hidden; }

  /* Burger/Toggle immer erreichbar */
  .sidebar-toggle[b-z8lq3fpnoc]{
    position: fixed;
    top: .6rem; left: .6rem;
    z-index: 4000;
  }
}
/* _content/DRKHOKAPP/Shared/NavMenu.razor.rz.scp.css */
/* 1) Basiston setzen – alles darin erbt das */
.nav[b-nmhtw89ywb] { color:red; }
.submenu[b-nmhtw89ywb]{color: red;}
.nav-link[b-nmhtw89ywb]{color: red;}
/* 2) Bootstrap-Blau neutralisieren: Links färben NICHT selbst, sondern erben */
a .nav .nav-link[b-nmhtw89ywb],
.nav .nav-link:link[b-nmhtw89ywb],
.nav .nav-link:visited[b-nmhtw89ywb],
.submenu .nav-link[b-nmhtw89ywb],
.nav-link.sub[b-nmhtw89ywb] {
  color: black !important;
  text-decoration: none !important;
  background-color:white;
}
.navbar .navbar-brand[b-nmhtw89ywb] {
  line-height: 1.1;
}
.container-fluid[b-nmhtw89ywb]{color: grey !important;}
/* 3) Hover/Active gezielt einfärben */
.nav .nav-link:hover[b-nmhtw89ywb],
.submenu .nav-link:hover[b-nmhtw89ywb],
.nav-link.sub:hover[b-nmhtw89ywb] { color:rgb(215, 46, 46) !important; }

.nav .nav-link.active[b-nmhtw89ywb],
.submenu .nav-link.sub.active[b-nmhtw89ywb] {
  color:red !important;
  background-color: red !important;
}

/* 4) Toggle-Button (Text weiß) */
.btn-toggle[b-nmhtw89ywb] { color:red !important; }
.btn-toggle[b-nmhtw89ywb]::after { content:"▸"; margin-left:auto; transition:transform .2s; opacity:.9; }
.btn-toggle[aria-expanded="True"][b-nmhtw89ywb]::after { transform: rotate(90deg); }

/* 5) Untermenü Animation (wie gehabt) */
.submenu[b-nmhtw89ywb] { padding-left:1.25rem; overflow:hidden; max-height:0; transition:max-height .25s ease; }
.submenu.collapse[b-nmhtw89ywb] { display:block !important; } /* wir steuern via max-height */
.submenu.show[b-nmhtw89ywb] { max-height:500px; }

.nav-link.sub[b-nmhtw89ywb] { font-size:.95rem; height:2.25rem; line-height:2.25rem; padding-left:.25rem; color:red; }

/* 6) Breite Screens: nur Sidebar offen halten */
@media (min-width: 641px){
  .navbar-toggler[b-nmhtw89ywb]{ display:none; }
  .main-nav.collapse[b-nmhtw89ywb]{ display:block; }
}
/* Sidebar komplett ein-/ausblenden */
.main-nav[b-nmhtw89ywb] {
  transition: transform .18s ease, width .18s ease, opacity .18s ease;
  will-change: transform, width, opacity;
}

.main-nav.nav-hidden[b-nmhtw89ywb] {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Optional: auf großen Screens ganz weg, auf kleinen nur rausfahren */
@media (min-width: 992px){
  .main-nav.nav-hidden[b-nmhtw89ywb] { display: none !important; }
}
/* ===============================
   MOBILE NAV & LAYOUT ENHANCEMENTS
   (additiv, Desktop unverändert)
   =============================== */

/* ---- Gemeinsame Mobile-Basics ---- */
@media (max-width: 992px){
  html[b-nmhtw89ywb], body[b-nmhtw89ywb] { max-width: 100vw; overflow-x: hidden; }
  main[b-nmhtw89ywb] { width:100%; max-width:100vw; overflow-x:hidden; }
  img[b-nmhtw89ywb], svg[b-nmhtw89ywb], canvas[b-nmhtw89ywb], video[b-nmhtw89ywb] { max-width:100%; height:auto; }
  table[b-nmhtw89ywb] { width:100%; max-width:100%; overflow: hidden; }
}

/* -----------------------------------
   NAV-BLOCK (aus deinem ersten CSS)
   ----------------------------------- */

/* === MOBILE: NavMenu-Innenleben NICHT als Drawer, das macht die Layout-Sidebar === */
@media (max-width: 992px){
  /* Alle früheren Off-Canvas-Regeln für .main-nav neutralisieren */
  .main-nav[b-nmhtw89ywb]{
    position: static !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
    z-index: auto !important;
  }
  /* Backdrop der NavMenu-Datei ausblenden – Backdrop liefert das Layout */
  .nav-backdrop[b-nmhtw89ywb]{ display: none !important; }

  /* Fingerfreundliche Links behalten wir gern bei */
  .nav .nav-link[b-nmhtw89ywb],
  .submenu .nav-link[b-nmhtw89ywb],
  .nav-link.sub[b-nmhtw89ywb]{
    min-height: 44px;
    line-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile-Anpassungen für das Top-Row-Menü */
@media (max-width: 992px) {

  /* Navbar-Header: etwas kompakter */
  .top-row.navbar[b-nmhtw89ywb] {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    flex-wrap: wrap;
  }

  /* Kollabiertes Menü bekommt eigenen Block unter dem Header */
  .top-row .navbar-collapse[b-nmhtw89ywb] {
    margin-top: 0.35rem;
  }

  /* Nav-Links schön untereinander, gut tappbar */
  .top-row .navbar-nav .nav-link[b-nmhtw89ywb] {
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  /* Rechtsblock (Datum/Buttons) unter die Links schieben */
  .top-row .navbar-collapse > .d-flex.align-items-center[b-nmhtw89ywb] {
    margin-top: .35rem;
    width: 100%;
    justify-content: space-between;
  }

  /* Datum/Uhrzeit + Version quer über die Breite */
  .top-row .navbar-collapse .small.text-body[b-nmhtw89ywb] {
    flex-wrap: wrap;
  }
}
.navbar-top-light[b-nmhtw89ywb] {
  color: black!important;
}

.navbar-top-light .nav-link[b-nmhtw89ywb] {
  color: black !important;
}
}