@media screen {
  .glass-button, .period-nav-button, #account-panel nav button,
  #first-password button {
    border: 1px solid #002d5533;
    border-radius: 12px;
    background: linear-gradient(155deg, white, #ebf5ff);
    color: #002d55;
    font-weight: 700;
    box-shadow: inset 0 1px 0 white, 0 3px 8px #002d5512;
  }
  #team-roster-dialog {
    box-sizing: border-box;
    width: min(30rem, calc(100% - 2rem));
    padding: 1.5rem;
  }
  #team-roster-dialog::backdrop { background: #002d5555; }
  #team-roster-dialog .roster-fields {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: .75rem;
  }
  #team-roster-dialog label { color: #002d55; font-weight: 700; }
  #team-roster-dialog :is(select, input) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-top: .35rem;
    padding: .65rem .55rem;
    border: 1px solid #002d5555;
    border-radius: 12px;
    background: white;
    color: #002d55;
    font: inherit;
  }
  #team-roster-dialog .roster-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
  #team-roster-dialog button[type=submit] { background: #e60005; color: white; }
  #team-roster-dialog button:disabled { opacity: .55; cursor: not-allowed; }

  .period-calendar-controls { flex-wrap: wrap; }
  .period-calendar-controls .team-roster-button {
    background: #ebf5ff;
    color: #002d55;
    border: 1px solid #002d5533;
    max-width: 100%;
  }
  .period-calendar-controls .team-roster-button:hover { background: #dcecff; }

  .official-drk-logo {
    display: block;
    height: 60px;
    width: auto;
    padding: 8px;
    background: white;
  }

  #account-page {
    width: min(72rem, calc(100% - 2rem));
    box-sizing: border-box;
    margin: 2rem auto;
    padding: clamp(1rem, 4vw, 2rem);
    border: 1px solid white;
    border-radius: 22px;
    background: linear-gradient(155deg, white, #ffffffbf);
    box-shadow: var(--glass-edge);
  }

  #account-page[hidden], #app [hidden] { display: none !important; }
  #account-panel nav button, #account-page button {
    padding: .7rem 1rem;
    border: 1px solid #002d5529;
    border-radius: 12px;
    background: linear-gradient(155deg, white, #ebf5ff);
    color: var(--drk-blue);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
  }
  #account-panel nav button:hover { background: var(--drk-ice); }
  #account-page button { background: var(--drk-red); color: white; }
  #account-page form { max-width: 28rem; }
  .account-table { overflow-x: auto; }
  .account-table table { border-collapse: collapse; width: 100%; text-align: left; }
  .account-table th, .account-table td { padding: .7rem; border-bottom: 1px solid #002d5529; }
  .account-table th { color: var(--drk-blue); background: var(--drk-ice); }
  #account-page .account-table button { margin: .2rem; background: var(--drk-ice); color: var(--drk-blue); }
  #account-page dialog { width: min(28rem, 85vw); border: 1px solid white; border-radius: 20px; box-shadow: var(--glass-edge); }
  #account-page dialog::backdrop { background: #002d5555; }
  :root {
    --drk-red: #e60005;
    --drk-blue: #002d55;
    --drk-ice: #ebf5ff;
    --glass-edge: inset 0 1px 0 #fff, 0 12px 34px #002d5512;
  }

  body, .login-screen {
    color: #171717;
    font-family: "Helvetica Neue", Arial, sans-serif;
    background:
      radial-gradient(ellipse at 10% 0%, #ebf5ff 0, transparent 58%),
      radial-gradient(ellipse at 95% 12%, #fae7e5 0, transparent 42%),
      #f7f9fc;
    background-attachment: fixed;
  }

  h1, h2, h3 {
    color: var(--drk-red);
    font-family: Merriweather, Georgia, serif;
    letter-spacing: normal;
  }

  .login-card, .praktikant-card, .calendar-profile, .calendar-toolbar,
  .calendar-wrapper, .modal, #account-panel {
    border: 1px solid #fff;
    border-radius: 22px;
    background: linear-gradient(155deg, #fffffff7, #ffffffbe);
    box-shadow: var(--glass-edge);
    backdrop-filter: blur(18px) saturate(130%);
  }

  .calendar-day {
    border: 1px solid #002d551b;
    border-radius: 14px;
    background-color: #ffffffb8;
  }

  .calendar-day-header, .login-subtitle {
    color: var(--drk-blue);
  }

  .login-card label, #account-page label {
    display: block;
    color: var(--drk-blue);
    font-weight: 700;
  }

  .login-card input, #account-page input, #account-page select {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: .4rem 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid #002d5555;
    border-radius: 12px;
    background: #fff;
    color: #171717;
    font: inherit;
  }

  .login-card button, #account-panel button[type=submit] {
    background: var(--drk-red);
    color: #fff;
  }

  #account-panel {
    position: relative;
    z-index: 1000;
    max-width: calc(100vw - 2rem);
    padding: .65rem 1rem;
  }

  #account-panel summary { cursor: pointer; color: var(--drk-blue); }
  #account-panel > summary { list-style: none; font-weight: 700; }
  #account-panel > nav {
    position: absolute;
    inset: calc(100% + .5rem) 0 auto auto;
    width: min(19rem, calc(100vw - 2rem));
    box-sizing: border-box;
    display: grid;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid white;
    border-radius: 16px;
    background: #fffffff5;
    box-shadow: var(--glass-edge);
  }
  #account-panel:not([open]) > nav { display: none; }
  #account-panel [hidden], #changePraktikantBtn[hidden],
  [onclick="openVergangenePraktikanten()"][hidden] { display: none !important; }
  :is(button, input, select, summary):focus-visible {
    outline: 2px solid var(--drk-blue);
    outline-offset: 3px;
  }

  @media (prefers-reduced-transparency: reduce) {
    .login-card, .praktikant-card, .calendar-profile, .calendar-toolbar,
    .calendar-wrapper, .calendar-day, .modal, #account-panel {
      background: #fff;
      backdrop-filter: none;
    }
  }
}

@media print {
  #account-panel { display: none !important; }
}