@font-face {
  font-family: 'Poppins';
  src: url(../font/Poppins-Medium.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BrushSCI';
  src: url(../font/bruschsci.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MinecraftFont';
  src: url(../font/minecraft-german.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Popping', sans-serif;
  text-align: center;
  background-color: #50586c;
  margin: 0;
  padding: 0;
}

h1 {
  font-weight: 600;
  color: #fff;
  padding: 20px;
  margin: 0;
}

h2 {
  font-weight: 600;
  color: #fff;
  padding: 10px;
  margin: 0 auto;
  font-size: 2rem;
}

.weekday {
  background-color: #fe5f31;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.sdw {
  font-family: "MinecraftFont";
  font-size: 1.5rem;
  text-align: left;
  font-weight: lighter;
  background-color: #fff;
  color: #000;
}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  background: #fff;
  font-size: 16px;
  border-radius: 8px;
  overflow: hidden;
  table-layout: fixed;
}

th {
  background-color: #007bff;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  padding: 4px 6px;
  height: 40px;
}

th.tag {
  padding: 2px 4px;
  font-size: 15px;
  height: 2 auto;
}

.deine_hr_mutter {
  width: 85%
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  height: 80px;
  word-wrap: break-word;
  background-color: #fff;
  color: #333;
  border-radius: 8px;
}

/*Stundenplanäderungen*/
.no {
  background-color: #ffa500;
  color: #fff;
  font-weight: bold;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffba3a;
    border: 1px solid #d8e7ff;
    color: #000;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.ch {
  background-color: #ffc400;
  color: #000;
  font-weight: bold;
  border: 0.5px solid black;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffef5e;
    border: 1px solid #d8e7ff;
    color: #000;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.ro {
  background-color: #aa6ec2;
  color: #fff;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #bc98ca;
    border: 1px solid #d8e7ff;
    color: #1a3b6b;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.ca {
  background-color: #b5a6a6;
  color: #fff;
  font-weight: bold;
  text-decoration: line-through solid red;
  border: 1px solid red;
  position: relative;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right,
      transparent 49%,
      red 50%,
      transparent 51%);

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #bbbbbb;
    border: 1px solid red;
    color: #1a3b6b;
    font-weight: 700;
    letter-spacing: .3px;
    text-decoration: line-through solid red 2px;
  }
}

.lk {
  background-color: #00ee00;
  color: #fff;
  font-weight: bold;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgb(89, 245, 89);
    border: 1px solid #d8e7ff;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.sa {
  background-color: #ee0000;
  color: #fff;
  border: 10px solid #00ee00;
  font-weight: bold;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ee0000;
    border: 2px solid rgb(89, 245, 89);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.fo {
  background-color: #4caf50;
  color: #fff;
  font-weight: bold;

  .s {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #70bf73;
    border: 1px solid #d8e7ff;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .3px;
  }
}

.ho {
  background-color: #0078d4;
  color: #fff;
}

.slot {
  background-color: #fff;
  color: #333;
  font-weight: bold;
}

.hi {
  background-color: #f4f4f4;
  color: #f4f4f4;
}

/*Lehrer & Klasse*/
.t {
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
}

.c {
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}

/*Buttons */
.myButton {
  background-color: #7892c2;
  border-radius: 10px;
  border: 20px solid #4e6096;
  display: inline-block;
  cursor: wait;
  color: #fff;
  font-size: 16px;
  padding: 8px 20px;
  text-decoration: none;
  margin: 5px;
}

.myButton:hover {
  background-color: #476e9e;
}

.myButton:active {
  position: relative;
  top: 1px;
}

.rainbow-button {
  position: relative;
  background-color: #f0f0f0;
  color: #333;
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0k 0k 0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  transition: transform 0.3s ease;
  z-index: 1;
}

.rainbow-button:hover {
  transform: scale(1.08);
}

.rainbow-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 300% 300%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  padding: 2px;
}

.rainbow-button:hover::before {
  animation: rainbowBorder 3s linear infinite;
  opacity: 1;
}

@keyframes rainbowBorder {
  0% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }
}

/*Texte*/
p {
  font-size: 14px;
  color: #b5a6a6;
  margin: 15px;
}

a {
  text-decoration: none;
  color: inherit;
}

.big-break td {
  height: 2px;
  padding: 0;
  line-height: 0;
  font-size: 0;
  background: #e9eef3;
  /* dezente Linie */
  border: 0;
}

/*Stoff-Triger. USW. */
.modal_test_shit_thing_idk {
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal-backdrop.open {
    display: flex;
  }

  .modal {
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .modal header {
    padding: 14px 16px;
    background: rgb(40, 208, 40);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal header .close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  .modal .content {
    padding: 14px 16px;
    color: #333;
  }

  .modal .content p {
    margin: 8px 0;
    color: #333;
  }

  /* kleiner Trigger-Button im Stundenplan */
  .test .test-trigger,
  td .test-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .65);
    background: rgba(0, 0, 0, .08);
    color: #fffefe;
    font-size: 12px;
    cursor: pointer;
  }

  td .test-trigger:hover {
    background: rgba(0, 0, 0, .18);
  }

  /* Trigger-Button für Schularbeiten */
  .sa .sa-trigger,
  td .sa-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, .35);
    background: rgba(255, 0, 0, .08);
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
  }

  td .sa-trigger:hover {
    background: rgba(165, 49, 49, 0.18);
  }


  /* Nur am Handy (bis 768px) */
  @media (max-width: 768px) {
    h1 {
      font-size: 2rem;
      /* ca. 32px */
      line-height: 1.3;
      text-align: center;
      /* optional: mittig schöner */
    }

    .rainbow-button {
      font-size: 1.2rem;
      /* ca. 19px */
      padding: 1rem 1.5rem;
      /* größere Tap-Fläche */
      margin: 0.4rem;
    }
  }
}


.modal_sa_shit_thing_idk {
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal-backdrop.open {
    display: flex;
  }

  .modal {
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .modal header {
    padding: 14px 16px;
    background: rgb(208, 40, 40);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal header .close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  .modal .content {
    padding: 14px 16px;
    color: #333;
  }

  .modal .content p {
    margin: 8px 0;
    color: #333;
  }

  /* kleiner Trigger-Button im Stundenplan */
  .test .test-trigger,
  td .test-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .65);
    background: rgba(0, 0, 0, .08);
    color: #fffefe;
    font-size: 12px;
    cursor: pointer;
  }

  td .test-trigger:hover {
    background: rgba(0, 0, 0, .18);
  }

  /* Trigger-Button für Schularbeiten */
  .sa .sa-trigger,
  td .sa-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, .35);
    background: rgba(255, 0, 0, .08);
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
  }

  td .sa-trigger:hover {
    background: rgba(165, 49, 49, 0.18);
  }


  /* Nur am Handy (bis 768px) */
  @media (max-width: 768px) {
    h1 {
      font-size: 2rem;
      /* ca. 32px */
      line-height: 1.3;
      text-align: center;
      /* optional: mittig schöner */
    }

    .rainbow-button {
      font-size: 1.2rem;
      /* ca. 19px */
      padding: 1rem 1.5rem;
      /* größere Tap-Fläche */
      margin: 0.4rem;
    }
  }
}


.modal_stoff_shit_thing_idk {
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal-backdrop.open {
    display: flex;
  }

  .modal {
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .modal header {
    padding: 14px 16px;
    background: #eeb751;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal header .close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  .modal .content {
    padding: 14px 16px;
    color: #333;
  }

  .modal .content p {
    margin: 8px 0;
    color: #333;
  }

  /* kleiner Trigger-Button im Stundenplan */
  .stoff .stoff-trigger,
  td .stoff-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, .65);
    background: rgba(0, 0, 0, .08);
    color: #fffefe;
    font-size: 12px;
    cursor: pointer;
  }

  td .stoff-trigger:hover {
    background: rgba(0, 0, 0, .18);
  }

  /* Trigger-Button für Schularbeiten */
  .sa .stoff-trigger,
  td .stoff-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px dashed rgba(0, 0, 0, .35);
    background: rgba(255, 0, 0, .08);
    color: #ffffff;
    font-size: 12px;
    cursor: pointer;
  }

  td .stoff-trigger:hover {
    background: rgba(165, 49, 49, 0.18);
  }

  /*Legende-Table*/
  .list_table_config {
    .l {
      background-color: #ffffff;
      color: #000000;
      font-weight: 600;
      font-size: 14px;
      text-align: right;
      padding: 4px 6px;
      height: 40px;
    }

    .m {

      background-color: #d2d2d2;
      color: #000000;
      font-weight: 600;
      font-size: 14px;
      text-align: center;
      padding: 4px 6px;
      /* kleineres Padding als Standard */
      height: 40px;
    }

    .r {

      background-color: #d2d2d2;
      color: #000000;
      font-weight: 600;
      font-size: 14px;
      text-align: left;
      padding: 4px 6px;
      /* kleineres Padding als Standard */
      height: 40px;
    }

    th.head_table {
      text-align: center;
    }
  }
}

@media (max-width: 770px) {



  /*AI BUGFIXED*/
  /**** =========================================
 **  MOBILE TIMETABLE POLISH & BUGFIXES
 **  (Append-only: ans Ende der Datei hängen)
 ** =========================================*/

  /* --- Grundlegende Verbesserungen --- */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    width: 100%;
    min-width: 720px;
  }

  /* bleibt voll nutzbar, aber scrollt bei Handy */

  /* dezente Karte-Optik */
  table {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-radius: 12px;
  }

  /* Header-Reihe "Letzte Aktualisierung | KV" sticky */
  tr.weekday>td {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fe5f31;
    color: #000;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
  }

  /* Kopfzeile mit Tagen (h., t., Mo–Fr) sticky direkt darunter */
  tr:nth-of-type(3)>th.tag {
    position: sticky;
    top: 44px;
    /* Höhe der weekDay-Zeile */
    z-index: 3;
    background-color: #007BFF;
  }

  /* Erste zwei Spalten (Stundennr. + Uhrzeit) sticky links */
  td.time-slot,
  th.time-slot {
    background: #fff;
    font-weight: 700;
  }

  table tr> :first-child {
    /* Spalte "1."/"2." usw. */
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }

  table tr> :nth-child(2) {
    /* Spalte Uhrzeit */
    position: sticky;
    left: 72px;
    /* Breite der 1. Spalte: anpassen falls nötig */
    z-index: 2;
    background: #fff;
  }

  /* Zellen-Optik sanfter */
  td {
    border: 1px solid #eef2f7;
    border-radius: 10px;
  }

  tr:not(.weekday) td.normal {
    background: #ffb23b;
    color: #fff;
  }

  tr:not(.weekday) td.changed {
    background: #ffea63;
    color: #263238;
  }

  tr:not(.weekday) td.canceled {
    background: #c7c7c7;
    color: #fff;
    text-decoration: line-through;
  }

  tr:not(.weekday) td.test {
    background: #39d353;
    color: #fff;
  }

  tr:not(.weekday) td.sa {
    background: #e54;
    color: #fff;
    border: 3px solid #39d353;
  }

  tr:not(.weekday) td.room {
    background: #b895c8;
    color: #fff;
  }

  /* Chips minimal feiner */
  .anormal,
  .acanceled,
  .aroom,
  .achanged,
  .atest {
    font-size: 0.95rem;
    padding: .4rem .66rem;
  }

  /* Große Pause – dünnere Linie bleibt */
  .big-break td {
    height: 1px;
  }

  /* --- Mobile Tweaks --- */
  @media (max-width: 768px) {
    body {
      padding-bottom: 16px;
    }

    .table-wrap table {
      min-width: 680px;
    }

    /* etwas kompakter */

    /* Schriften kompakter für mehr Inhalt pro Zeile */
    table {
      font-size: 15px;
    }

    th {
      font-size: 13px;
      height: 36px;
      padding: 4px 6px;
    }

    td {
      height: 72px;
      padding: 6px 6px;
    }

    .lehrer {
      font-size: 13px;
    }

    .klasse {
      font-size: 11px;
    }

    /* sticky Offsets etwas kleiner, weil Header schmaler */
    tr:nth-of-type(3)>th.tag {
      top: 40px;
    }
  }

  /* --- Scrollbar dezent (optional) --- */
  .table-wrap::-webkit-scrollbar {
    height: 10px;
  }

  .table-wrap::-webkit-scrollbar-track {
    background: transparent;
  }

  .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  /* ===============================
   MODAL-FIXES (deine Selektoren waren verschachtelt und wirkten nicht)
   =============================== */

  /* TEST-Modal (grün) */
  .modal_test_shit_thing_idk .modal-backdrop,
  .modal_sa_shit_thing_idk .modal-backdrop,
  .modal_stoff_shit_thing_idk .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal_test_shit_thing_idk .modal-backdrop.open,
  .modal_sa_shit_thing_idk .modal-backdrop.open,
  .modal_stoff_shit_thing_idk .modal-backdrop.open {
    display: flex;
  }

  .modal_test_shit_thing_idk .modal,
  .modal_sa_shit_thing_idk .modal,
  .modal_stoff_shit_thing_idk .modal {
    width: min(680px, 92vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .modal_test_shit_thing_idk header,
  .modal_sa_shit_thing_idk header,
  .modal_stoff_shit_thing_idk header {
    padding: 14px 16px;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .modal_test_shit_thing_idk header {
    background: rgb(40, 208, 40);
  }

  .modal_sa_shit_thing_idk header {
    background: rgb(208, 40, 40);
  }

  .modal_stoff_shit_thing_idk header {
    background: #eeb751;
  }

  .modal_test_shit_thing_idk header .close,
  .modal_sa_shit_thing_idk header .close,
  .modal_stoff_shit_thing_idk header .close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  .modal_test_shit_thing_idk .content,
  .modal_sa_shit_thing_idk .content,
  .modal_stoff_shit_thing_idk .content {
    padding: 14px 16px;
    color: #333;
  }

  /* Trigger-Buttons konsistent */
  td .test-trigger,
  td .sa-trigger,
  td .stoff-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
  }

  td .test-trigger {
    border: 1px dashed rgba(255, 255, 255, .65);
    background: rgba(0, 0, 0, .08);
    color: #fff;
  }

  td .test-trigger:hover {
    background: rgba(0, 0, 0, .18);
  }

  td .sa-trigger {
    border: 1px dashed rgba(0, 0, 0, .35);
    background: rgba(255, 0, 0, .08);
    color: #fff;
  }

  td .sa-trigger:hover {
    background: rgba(165, 49, 49, .18);
  }

  td .stoff-trigger {
    border: 1px dashed rgba(0, 0, 0, .35);
    background: rgba(0, 0, 0, .06);
    color: #333;
  }

  td .stoff-trigger:hover {
    background: rgba(0, 0, 0, .12);
  }

  /* Auf Handy bessere Touch-Zonen */
  @media (max-width: 768px) {

    td .test-trigger,
    td .sa-trigger,
    td .stoff-trigger {
      padding: 6px 10px;
    }
  }
}

@media (max-width: 800px) {
  .time-slot {
    display: hidden;
  }

  .tag_time-slot {
    display: hidden;
  }
}

/* Overlay-Host für die Zeitlinie */
.table-wrap {
  position: relative;
}

footer {
  background-color: #3b4150;
  color: #fff;
  bottom: 0rem;
  width: 70%;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  text-align: center;
  margin: 0 auto;

  a {
    color: #fff;
  }
}

#tooltip {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
}

/* ===== Dynamisch gerenderte Stundenplaene (js/plan-page.js) ===== */
.plan-loading,
.plan-error {
  text-align: center;
  padding: 2rem 1rem;
  font-weight: 600;
}
.plan-error {
  color: #b30000;
}
td .note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
}
td.break-fill {
  background: transparent;
  border: none;
}
tr.big-break td {
  height: 18px;
}