/* ===================================
   MLW IT – Public Premium Design
=================================== */

:root {
  --blau-dark: #001f45;
  --blau: #014d9a;
  --blau-soft: #eaf3ff;

  --orange: #ff6600;
  --orange-soft: #fff1e8;

  --bg: #eef3f9;
  --card: rgba(255,255,255,0.92);

  --text: #172033;
  --muted: #64748b;

  --border: rgba(148,163,184,0.22);

  --shadow: 0 18px 50px rgba(0,43,92,0.10);
  --shadow-soft: 0 8px 24px rgba(0,43,92,0.08);

  --radius: 28px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    "Inter",
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(circle at top left,
      rgba(255,102,0,0.12),
      transparent 30%),
    radial-gradient(circle at top right,
      rgba(1,77,154,0.10),
      transparent 30%),
    linear-gradient(180deg,
      #f8fbff 0%,
      var(--bg) 100%);

  display: flex;
  flex-direction: column;
}

/* ===================================
   Header
=================================== */

header,
.main-header {
  position: relative;

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

  gap: 26px;

  padding: 24px 60px;

  color: white;

  background:
    linear-gradient(135deg,
      rgba(0,31,69,0.98),
      rgba(1,77,154,0.94));

  box-shadow:
    0 16px 38px rgba(0,31,69,0.24);

  overflow-x: hidden;
overflow-y: auto;
}

header::after,
.main-header::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -140px;
  top: -220px;

  background:
    radial-gradient(circle,
      rgba(255,102,0,0.22),
      transparent 65%);

  pointer-events: none;
}

.header-left {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  gap: 18px;
}

header img {
  height: 74px;

  padding: 7px;

  background: white;

  border-radius: 18px;

  box-shadow:
    0 14px 30px rgba(0,0,0,0.18),
    0 0 34px rgba(255,102,0,0.14);
}

header h1 {
  margin: 0;

  font-size: 2rem;
  letter-spacing: -0.04em;
}

header p {
  margin: 4px 0 0;

  color: #dce9f8;
}

/* ===================================
   Main
=================================== */

main {
  flex: 1;

  width: calc(100% - 56px);
  max-width: 1280px;

  margin: 46px auto;

  padding: 52px;

  border-radius: 34px;

  background: var(--card);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.75);

  box-shadow: var(--shadow);
}

main h2 {
  display: inline-block;

  margin: 0 0 30px;

  padding-bottom: 10px;

  font-size: 2rem;
  letter-spacing: -0.04em;

  color: var(--blau-dark);

  border-bottom: 4px solid var(--orange);
}

main h3 {
  color: var(--blau-dark);
}

main p {
  max-width: 860px;

  line-height: 1.72;
}

/* ===================================
   Buttons
=================================== */

.button,
button,
.logout-btn {
  font-family: inherit;
}

.button,
button,
.logout-btn {
  border: 0;

  cursor: pointer;

  color: white;

  text-decoration: none;

  font-weight: 850;
  font-size: 0.96rem;

  padding: 14px 26px;

  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  background:
    linear-gradient(135deg,
      var(--orange),
      #ff812e);

  box-shadow:
    0 10px 22px rgba(255,102,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.button:hover,
button:hover,
.logout-btn:hover {
  transform: translateY(-2px);

  filter: brightness(1.04);

  box-shadow:
    0 16px 30px rgba(255,102,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.28);
}

.button-row {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-bottom: 36px;
}

/* ===================================
   Cards
=================================== */

.card,
.info-card,
.hw-card,
.success-box {
  position: relative;

  overflow-x: hidden;
overflow-y: auto;;

  padding: 28px;

  border-radius: var(--radius);

  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.98),
      rgba(247,251,255,0.94));

  border: 1px solid var(--border);

  box-shadow: var(--shadow-soft);
}

.card::before,
.info-card::before,
.hw-card::before,
.success-box::before {
  content: "";

  position: absolute;

  inset: 0;

  border-left: 6px solid var(--orange);

  pointer-events: none;
}

.card h3,
.info-card h3,
.hw-card h3 {
  margin-top: 0;

  color: var(--blau);
}

/* ===================================
   Grid Layouts
=================================== */

.grid,
.cards-grid,
#hardware-list {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

  gap: 24px;

  margin-top: 28px;
}

/* ===================================
   Formulare
=================================== */

form {
  display: flex;
  flex-direction: column;

  gap: 15px;

  max-width: 720px;
}

form label {
  font-weight: 850;

  color: var(--blau-dark);
}

form input,
form textarea,
form select {
  width: 100%;

  padding: 14px 16px;

  border-radius: 16px;

  border: 1px solid var(--border);

  background: rgba(255,255,255,0.94);

  color: var(--text);

  font-size: 1rem;

  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

form input:focus,
form textarea:focus,
form select:focus {
  outline: none;

  background: white;

  border-color: var(--orange);

  box-shadow:
    0 0 0 5px rgba(255,102,0,0.14);
}

/* ===================================
   Alerts
=================================== */

.success-box {
  margin-top: 36px;
}

.alert,
.login-error {
  background: #ffe8e8;

  color: #b00020;

  padding: 14px 16px;

  border-radius: 14px;

  font-weight: 800;
}

/* ===================================
   Footer
=================================== */

footer {
  margin-top: auto;

  padding: 28px 16px;

  text-align: center;

  color: var(--muted);

  background: rgba(255,255,255,0.92);

  border-top: 1px solid var(--border);
}

.footer-link {
  display: inline-block;

  margin-top: 8px;

  color: var(--muted);

  font-weight: 800;
}

.footer-link:hover {
  color: var(--orange);
}

/* ===================================
   Mobile
=================================== */

@media (max-width: 900px) {

  header,
  .main-header {
    padding: 22px;

    flex-direction: column;
    align-items: flex-start;
  }

  .header-left {
    flex-direction: row;
  }

  header img {
    height: 60px;

    border-radius: 14px;
  }

  header h1 {
    font-size: 1.45rem;
  }

  main {
    width: auto;

    margin: 18px;

    padding: 24px;

    border-radius: 24px;
  }

  .button-row {
    flex-direction: column;
  }

  .button,
  button,
  .logout-btn {
    width: 100%;
  }

  form {
    max-width: 100%;
  }
}

@media (max-width: 500px) {

  main {
    margin: 10px;

    padding: 18px;
  }

  main h2 {
    font-size: 1.5rem;
  }

  .card,
  .info-card,
  .hw-card,
  .success-box {
    padding: 18px;

    border-radius: 20px;
  }
}

/* Premium Login Logo */

.login-page img,
.login-logo {
  width: 260px !important;
  max-width: 260px !important;
  height: auto !important;

  display: block !important;

  margin: 0 auto 34px !important;

  padding: 22px !important;

  background: rgba(255,255,255,0.96) !important;

  border-radius: 34px !important;

  object-fit: contain !important;

  box-shadow:
    0 22px 55px rgba(1,77,154,0.24),
    0 0 60px rgba(255,102,0,0.20) !important;
}

.login-box {
  max-width: 520px !important;
  padding: 56px 46px !important;
}

@media (max-width: 500px) {
  .login-page img,
  .login-logo {
    width: 190px !important;
    max-width: 190px !important;

    padding: 16px !important;

    border-radius: 24px !important;
  }
}

body.login-page .login-box {
  margin: auto;
  max-width: 460px;
  padding: 42px;
  text-align: center;
}

body.login-page .login-logo {
  width: 180px;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}

.attachment-section {
  margin-top: 22px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border);
}

.attachment-section h4 {
  margin-top: 0;
  color: var(--blau-dark);
}

.attachment-list a {
  color: var(--blau);
  font-weight: 800;
}

.attachment-form {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.attachment-form input[type="file"] {
  flex: 1;
  min-width: 220px;
}

@media (max-width: 700px) {
  .attachment-form {
    flex-direction: column;
  }
}
.notification-box {
  position: relative;
  z-index: 20;
}

.notification-btn {
  background: rgba(255,255,255,0.16);
  color: white;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  cursor: pointer;
}

#notification-count {
  background: var(--orange);
  color: white;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 5px;
  font-size: 0.8rem;
}

.notification-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 52px;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: white;
  color: var(--text);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  border: 1px solid var(--border);
}

.notification-dropdown.open {
  display: block;
}

.notification-item {
  padding: 12px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid var(--border);
  margin-top: 12px;
}

.notification-item.unread {
  border-left: 5px solid var(--orange);
  background: #fff7f0;
}

.notification-item p {
  margin: 6px 0;
  font-size: 0.9rem;
}

.notification-item a {
  color: var(--blau);
  font-weight: 900;
}

.notification-item small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .notification-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 120px;
    width: auto;
  }
}

.status-grid {
  display: grid;
  gap: 24px;
  margin-top: 30px;
}

.status-card {
  background: rgba(255,255,255,0.94);
  border-radius: 24px;
  padding: 24px;
  border-left: 8px solid #28a745;
  box-shadow: var(--shadow-soft);
}

.status-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.status-badge {
  padding: 6px 14px;
  border-radius: 999px;
  color: white;
  font-weight: 900;
  font-size: 0.8rem;
}

.status-card.operational {
  border-left-color: #28a745;
}

.status-card.warning {
  border-left-color: #f0ad4e;
}

.status-card.maintenance {
  border-left-color: #014d9a;
}

.status-card.critical {
  border-left-color: #d9534f;
}

.status-badge.operational {
  background: #28a745;
}

.status-badge.warning {
  background: #f0ad4e;
}

.status-badge.maintenance {
  background: #014d9a;
}

.status-badge.critical {
  background: #d9534f;
}

@media (max-width: 700px) {
  .status-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   Header Profil
========================= */

.header-profile {
  margin-left: auto;
}

.header-profile-link {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(255,255,255,0.14);

  border: 1px solid rgba(255,255,255,0.14);

  text-decoration: none;

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.header-profile-link:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

.header-avatar {
  width: 46px;
  height: 46px;

  object-fit: cover;

  border-radius: 999px;

  border: 2px solid rgba(255,255,255,0.85);

  background: white;
}

.header-profile-text {
  display: flex;
  flex-direction: column;
}

.header-profile-text strong {
  color: white;
  font-size: 0.92rem;
  line-height: 1.1;
}

.header-profile-text span {
  color: rgba(255,255,255,0.72);
  font-size: 0.78rem;
  margin-top: 2px;
}

/* Mobile */

@media (max-width: 900px) {

  .header-profile {
    width: 100%;
    margin-left: 0;
  }

  .header-profile-link {
    width: 100%;
    justify-content: center;
  }

}
/* =========================
   Final Header Fix
========================= */

.main-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 14px 24px !important;
  min-height: 76px;
  background: linear-gradient(135deg, #001f45, #014d9a) !important;
  overflow: visible !important;
}

.header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.header-logo {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  background: white !important;
  padding: 6px !important;
  border-radius: 14px !important;
}

.header-title h1,
.main-header h1,
header h1 {
  color: white !important;
  font-size: 1.45rem !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.header-title p,
.main-header p,
header p {
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.82rem !important;
  margin: 3px 0 0 !important;
}

.header-profile-link {
  width: auto !important;
  min-height: 44px !important;
}

.header-avatar {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

.header-btn,
.notification-btn {
  width: auto !important;
  min-width: auto !important;
  height: 38px !important;
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
}

/* Handy kompakt */
@media (max-width: 700px) {
  .main-header {
    padding: 10px !important;
    gap: 8px !important;
  }

  .header-left {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .header-logo {
    width: 42px !important;
    height: 42px !important;
  }

  .header-title h1,
  .main-header h1 {
    font-size: 1.05rem !important;
  }

  .header-title p,
  .main-header p {
    font-size: 0.65rem !important;
  }

  .header-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  .header-btn,
  .notification-btn,
  .logout-btn,
  .button {
    width: 100% !important;
    height: 38px !important;
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
  }

  .header-profile-link {
    max-width: 48%;
    justify-content: center !important;
  }
}

```css
:root {

  --blue-dark: #001f45;
  --blue: #014d9a;
  --orange: #ff6600;

  --bg: #eef3f9;

  --card: #ffffff;

  --text: #172033;

  --muted: #64748b;

  --border: #d8e2ef;
}

* {
  box-sizing: border-box;
}

html,
body {

  margin: 0;
  padding: 0;

  background: transparent;

  font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--text);

  overflow-x: hidden;
overflow-y: auto;;
}

.widget {

  padding: 0;
  margin: 0;

  max-width: 100%;

  font-size: 0.9rem;
}

/* =========================
   Banner
========================= */

.status-banner {

  border-radius: 16px;

  padding: 14px 16px;

  margin-bottom: 10px;

  color: white;

  box-shadow:
    0 6px 18px rgba(0,43,92,0.18);

  position: relative;

  overflow-x: hidden;
overflow-y: auto;;
}

.status-banner::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      transparent
    );

  pointer-events: none;
}

.status-banner.info {

  background:
    linear-gradient(
      135deg,
      #014d9a,
      #002b66
    );
}

.status-banner.maintenance {

  background:
    linear-gradient(
      135deg,
      #ff6600,
      #ff8533
    );
}

.status-banner.warning {

  background:
    linear-gradient(
      135deg,
      #f0ad4e,
      #d98b17
    );
}

.status-banner.critical {

  background:
    linear-gradient(
      135deg,
      #d9534f,
      #b52b27
    );
}

.status-banner-badge {

  display: inline-block;

  background:
    rgba(255,255,255,0.16);

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 0.62rem;

  font-weight: 800;

  margin-bottom: 8px;

  letter-spacing: .04em;
}

.status-banner-title {

  font-size: 1rem;

  font-weight: 800;

  margin-bottom: 5px;
}

.status-banner-text {

  font-size: 0.82rem;

  line-height: 1.4;

  color:
    rgba(255,255,255,0.92);
}

/* =========================
   Sections
========================= */

.section {

  background: #ffffff;

  border-radius: 14px;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-left: 5px solid var(--orange);

  margin-bottom: 8px;

  box-shadow:
    0 4px 12px rgba(0,43,92,0.05);
}

.section:last-child {
  margin-bottom: 0;
}

.section h2 {

  margin: 0 0 9px;

  color: var(--blue-dark);

  font-size: 1rem;

  line-height: 1.2;
}

.section p {

  margin: 6px 0 10px;

  line-height: 1.35;
}

/* =========================
   Items
========================= */

.item {

  background: #f8fbff;

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 8px 10px;

  margin-bottom: 8px;

  font-size: 0.82rem;

  line-height: 1.35;
}

.item:last-child {
  margin-bottom: 0;
}

.item strong {

  display: block;

  color: var(--blue-dark);

  font-size: 0.92rem;

  margin-bottom: 3px;
}

/* =========================
   Badges
========================= */

.badge {

  display: inline-block;

  padding: 3px 9px;

  border-radius: 999px;

  color: white;

  font-size: 0.68rem;

  font-weight: 800;

  margin-top: 5px;
}

.badge.green {
  background: #28a745;
}

.badge.blue {
  background: var(--blue);
}

.badge.yellow {
  background: #f0ad4e;
}

.badge.orange {
  background: var(--orange);
}

.badge.red {
  background: #d9534f;
}

/* =========================
   Empty
========================= */

.empty {

  color: var(--muted);

  font-weight: 700;

  margin: 0;
}

/* =========================
   Quick Ticket
========================= */

.quick-ticket-box {

  display: flex;

  gap: 8px;

  margin-top: 8px;
}

.quick-ticket-box select {

  flex: 1;

  min-width: 180px;

  padding: 9px 10px;

  border-radius: 10px;

  border: 1px solid var(--border);

  background: white;

  font-size: 0.85rem;
}

.open-ticket-btn {

  border: 0;

  background:
    linear-gradient(
      135deg,
      var(--orange),
      #ff812e
    );

  color: white;

  font-weight: 800;

  padding: 9px 14px;

  font-size: 0.85rem;

  border-radius: 999px;

  cursor: pointer;

  white-space: nowrap;
}

/* =========================
   Mobile
========================= */

@media (max-width: 700px) {

  .quick-ticket-box {
    flex-direction: column;
  }

  .open-ticket-btn {
    width: 100%;
  }
}
.login-success {
  background: #eaf8ef;
  color: #16723a;
  padding: 12px;
  border-radius: 14px;
  font-weight: 800;
  margin-bottom: 16px;
}
html,
body {
    overflow-x: hidden;
    overflow-y: auto !important;
}

/* Adminbereich scrollbar machen */
main {
    overflow: visible !important;
}

/* Fix für abgeschnittene Inhalte */
.user-grid,
#user-list {
    overflow: visible !important;
}