/* Moderne Staffel- und Folgenübersicht */

.Inhaltselement a[href*="&st="] {
  display: inline-flex;
  min-width: 110px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin: 5px;
  padding: 9px 14px;
  border: 2px solid #d5e5ee;
  border-radius: 12px;
  background: #f2f8fb;
  color: #07518a !important;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none !important;
}

.Inhaltselement a[href*="&st="]:hover {
  border-color: #ffd229;
  background: #fff6c7;
  transform: translateY(-2px);
}

.Inhaltselement table:has(a[href*="#f"]) {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
}

.Inhaltselement table:has(a[href*="#f"]) tr:first-child td {
  padding: 13px 16px !important;
  border: 0 !important;
  border-radius: 12px;
  background: #07518a !important;
  color: white;
  font-size: 17px;
  font-weight: bold;
}

.Inhaltselement table:has(a[href*="#f"]) tr:not(:first-child) td {
  padding: 13px 16px !important;
  border: 1px solid #d9e4ea !important;
  background: #f8fbfd !important;
}

.Inhaltselement table:has(a[href*="#f"]) a {
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 620px) {
  .Inhaltselement a[href*="&st="] {
    min-width: calc(33.333% - 12px);
    margin: 5px 3px;
    padding: 8px 5px;
  }

  .Inhaltselement table:has(a[href*="#f"]) td {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }
}
/* Ausführliche Folgenbeschreibungen */

.Inhaltselement table tr[id^="f"] {
  scroll-margin-top: 25px;
}

.Inhaltselement table tr[id^="f"] td {
  padding: 15px 18px !important;
  border: 0 !important;
  border-radius: 12px;
  background: linear-gradient(135deg, #07518a, #0869aa) !important;
  color: white !important;
  font-size: 19px;
}

.Inhaltselement table tr[id^="f"] td b {
  color: white !important;
}

.Inhaltselement table tr[id^="f"] + tr td {
  padding: 18px !important;
  border: 0 !important;
  background: #f8fbfd !important;
  font-size: 16px;
  line-height: 1.7;
}

.Inhaltselement table tr[id^="f"] + tr td small {
  display: block;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #d9e4ea;
  color: #5d7180;
  font-size: 13px;
}

.Inhaltselement table td[width="200"] {
  width: 230px !important;
  color: #07518a;
  font-weight: bold;
}

.Inhaltselement table td[width="200"] + td {
  color: #18374e;
}

.Inhaltselement table img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 7px 20px rgba(25, 60, 84, 0.16);
}

.Inhaltselement table hr {
  height: 1px;
  margin: 24px 0;
  border: 0;
  background: #d9e4ea;
}

/* Nachtmodus */

.db-dark .Inhaltselement table tr[id^="f"] + tr td {
  background: #1c4057 !important;
}

.db-dark .Inhaltselement table td[width="200"] {
  color: #9fd6f3;
}

.db-dark .Inhaltselement table td[width="200"] + td {
  color: #e4f0f6;
}

/* Smartphone */

@media (max-width: 620px) {
  .Inhaltselement table tr[id^="f"] td {
    font-size: 17px !important;
  }

  .Inhaltselement table td[width="200"] {
    width: 38% !important;
    min-width: 105px !important;
  }

  .Inhaltselement table td[width="200"] + td {
    min-width: 150px !important;
  }
}
/* Moderne Datenbanksuche */

#datenbanksuche,
.Inhaltselement form {
  padding: 22px;
  border: 1px solid #d9e4ea;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef8fd, #fffdf4);
}

.Inhaltselement form table,
.Inhaltselement form tbody,
.Inhaltselement form tr,
.Inhaltselement form td {
  border: 0 !important;
  background: transparent !important;
}

.Inhaltselement form input[type="text"],
.Inhaltselement form input[type="search"],
.Inhaltselement form select {
  min-height: 46px;
  padding: 9px 12px;
  border: 2px solid #b9cfdb;
  border-radius: 10px;
  background: white;
  color: #18374e;
  font-size: 16px;
}

.Inhaltselement form input[type="text"]:focus,
.Inhaltselement form input[type="search"]:focus,
.Inhaltselement form select:focus {
  border-color: #07518a;
  outline: 3px solid rgba(7, 81, 138, 0.15);
}

.Inhaltselement form input[type="submit"],
.Inhaltselement form button[type="submit"] {
  min-height: 46px;
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  background: #ffd229;
  color: #063b68;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.Inhaltselement form input[type="submit"]:hover,
.Inhaltselement form button[type="submit"]:hover {
  background: #f6c400;
  transform: translateY(-1px);
}

.db-dark #datenbanksuche,
.db-dark .Inhaltselement form {
  border-color: #3d5f73;
  background: #17384e;
}

@media (max-width: 620px) {
  #datenbanksuche,
  .Inhaltselement form {
    padding: 14px;
  }

  .Inhaltselement form table,
  .Inhaltselement form tbody,
  .Inhaltselement form tr,
  .Inhaltselement form td {
    display: block;
    width: 100% !important;
  }

  .Inhaltselement form input[type="text"],
  .Inhaltselement form input[type="search"],
  .Inhaltselement form select,
  .Inhaltselement form input[type="submit"],
  .Inhaltselement form button[type="submit"] {
    width: 100%;
    margin: 5px 0;
  }
}
/* Drehortkarte und Drehortlisten */

#map {
  min-height: 560px;
  margin: 18px 0;
  border: 5px solid white !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 34px rgba(25, 60, 84, 0.18) !important;
  overflow: hidden;
}

.leaflet-control-zoom a {
  color: #07518a !important;
  font-size: 21px !important;
  font-weight: bold;
}

.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
}

.leaflet-popup-content {
  min-width: 190px;
  margin: 16px !important;
  color: #18374e;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.leaflet-popup-content a {
  display: inline-block;
  margin-top: 7px;
  color: #07518a !important;
  font-weight: bold;
}

.Inhaltselement table a[href*="drehort"] {
  font-size: 16px;
  font-weight: bold;
}

.Inhaltselement table a[href*="drehort"]::before {
  content: "??";
  display: inline-block;
  margin-right: 7px;
  text-decoration: none;
}

.Inhaltselement img[src*="drehort"],
.Inhaltselement img[src*="Drehort"] {
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(25, 60, 84, 0.16);
}

.db-dark .leaflet-popup-content-wrapper,
.db-dark .leaflet-popup-tip {
  background: #17384e;
}

.db-dark .leaflet-popup-content {
  color: #e4f0f6;
}

@media (max-width: 620px) {
  #map {
    min-height: 430px;
    border-width: 3px !important;
    border-radius: 13px !important;
  }

  .leaflet-popup-content {
    min-width: 150px;
    font-size: 14px !important;
  }
}
/* Bedienung der Drehortkarte */

#map + table,
#map ~ table {
  border: 0 !important;
}

#map ~ form,
.Inhaltselement form:has(#drehorte) {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #d9e4ea;
  border-radius: 15px;
  background: #f4f9fc;
}

.Inhaltselement form:has(#drehorte) table,
.Inhaltselement form:has(#drehorte) tbody,
.Inhaltselement form:has(#drehorte) tr,
.Inhaltselement form:has(#drehorte) td {
  border: 0 !important;
  background: transparent !important;
}

.Inhaltselement form:has(#drehorte) input[type="button"] {
  min-height: 42px;
  margin: 4px;
  padding: 8px 14px;
  border: 2px solid #d5e5ee;
  border-radius: 20px;
  background: white;
  color: #07518a;
  font-weight: bold;
  cursor: pointer;
}

.Inhaltselement form:has(#drehorte) input[type="button"]:hover,
.Inhaltselement form:has(#drehorte) input[type="button"]:focus {
  border-color: #ffd229;
  background: #fff5ba;
  transform: translateY(-1px);
}

#drehorte {
  width: min(100%, 430px);
  min-height: 46px;
  margin: 12px 4px 5px;
  padding: 9px 12px;
  border: 2px solid #9ebdcc;
  border-radius: 10px;
  background: white;
  color: #18374e;
  font-size: 16px;
  font-weight: bold;
}

#selection select {
  width: min(100%, 520px);
  min-height: 46px;
  margin-top: 14px;
  padding: 9px 12px;
  border: 2px solid #07518a;
  border-radius: 10px;
  background: white;
  color: #18374e;
  font-size: 16px;
}

.db-dark .Inhaltselement form:has(#drehorte) {
  border-color: #3d5f73;
  background: #17384e;
}

.db-dark .Inhaltselement form:has(#drehorte) input[type="button"],
.db-dark #drehorte,
.db-dark #selection select {
  border-color: #507287;
  background: #102c40;
  color: #e4f0f6;
}

@media (max-width: 620px) {
  .Inhaltselement form:has(#drehorte) input[type="button"] {
    width: calc(50% - 12px);
    margin: 4px;
  }

  #drehorte,
  #selection select {
    width: 100%;
    margin-inline: 0;
  }
}
/* Modernes Datenbank-Quiz */

#quiz-type-select,
#episode-quiz,
#quiz-end {
  width: min(100%, 680px);
  max-width: 680px !important;
  margin: 15px auto;
  padding: 22px;
  border: 1px solid #d9e4ea;
  border-radius: 17px;
  background: #f8fbfd;
  box-shadow: 0 10px 28px rgba(25, 60, 84, 0.12);
}

#quiz-type-select h3,
#episode-quiz h3,
#quiz-end h3 {
  margin: 0 0 18px !important;
  color: #063b68 !important;
  font-size: 22px !important;
  text-align: left !important;
}

#quiz-type-select label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin: 8px 0;
  padding: 11px 14px;
  border: 2px solid #d9e4ea;
  border-radius: 12px;
  background: white;
  color: #18374e;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

#quiz-type-select label:hover {
  border-color: #ffd229;
  background: #fff9dc;
}

#quiz-type-select input[type="radio"] {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

#quiz-start,
#quiz-next,
#quiz-restart {
  min-height: 46px;
  margin-top: 14px;
  padding: 10px 22px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #ffd229 !important;
  color: #063b68 !important;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

#quiz-start:hover,
#quiz-next:hover,
#quiz-restart:hover {
  background: #f5c500 !important;
  transform: translateY(-1px);
}

#quiz-image {
  width: 100% !important;
  max-width: 520px !important;
  max-height: 330px;
  margin: 0 auto 18px !important;
  border-radius: 14px !important;
  object-fit: contain;
  box-shadow: 0 8px 22px rgba(25, 60, 84, 0.15);
}

#quiz-answers {
  display: grid;
  gap: 10px;
}

#quiz-answers a {
  display: block;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 2px solid #d9e4ea !important;
  border-radius: 12px !important;
  background: white !important;
  color: #07518a !important;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none !important;
}

#quiz-answers a:hover {
  border-color: #ffd229 !important;
  background: #fff9dc !important;
}

#quiz-result,
#quiz-score {
  margin-top: 16px !important;
  padding: 13px 16px !important;
  border-radius: 11px;
  background: white;
  color: #18374e !important;
  font-size: 18px !important;
  font-weight: bold;
  text-shadow: none !important;
}

#quiz-next p {
  margin: 0 !important;
  color: #063b68 !important;
  font-size: 16px !important;
}

.db-dark #quiz-type-select,
.db-dark #episode-quiz,
.db-dark #quiz-end {
  border-color: #3d5f73;
  background: #17384e;
}

.db-dark #quiz-type-select h3,
.db-dark #episode-quiz h3,
.db-dark #quiz-end h3 {
  color: #e4f0f6 !important;
}

.db-dark #quiz-type-select label,
.db-dark #quiz-answers a,
.db-dark #quiz-result,
.db-dark #quiz-score {
  border-color: #507287 !important;
  background: #102c40 !important;
  color: #e4f0f6 !important;
}

@media (max-width: 620px) {
  #quiz-type-select,
  #episode-quiz,
  #quiz-end {
    padding: 15px;
  }

  #quiz-image {
    max-height: 250px;
  }
}
/* Listen zu allen Serien */

form[action="liste.php"] {
  max-width: 100%;
  padding: 22px !important;
}

form[action="liste.php"] > center {
  display: block;
}

form[action="liste.php"] table {
  width: 100% !important;
  margin: 0 0 15px;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 8px !important;
}

form[action="liste.php"] tr,
form[action="liste.php"] td {
  border: 0 !important;
  background: transparent !important;
}

form[action="liste.php"] td {
  padding: 8px !important;
}

form[action="liste.php"] select[name="serie"] {
  width: min(100%, 420px);
  min-height: 46px;
  margin-left: 8px;
  padding: 9px 12px;
  border: 2px solid #9ebdcc;
  border-radius: 10px;
  background: white;
  color: #18374e;
  font-size: 16px;
  font-weight: bold;
}

form[action="liste.php"] input[type="radio"] + label,
form[action="liste.php"] input[type="checkbox"] + label {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  margin: 3px 0;
  padding: 8px 12px;
  border: 2px solid #d9e4ea;
  border-radius: 10px;
  background: white;
  color: #18374e;
  font-size: 15px;
  cursor: pointer;
}

form[action="liste.php"] input[type="radio"]:checked + label,
form[action="liste.php"] input[type="checkbox"]:checked + label {
  border-color: #ffd229;
  background: #fff5ba;
  color: #063b68;
  font-weight: bold;
}

form[action="liste.php"] input:disabled + label {
  opacity: 0.65;
  cursor: default;
}

form[action="liste.php"] button[type="submit"] {
  min-width: 190px;
  min-height: 48px;
  margin-top: 10px;
  background: #ffd229;
  color: #063b68;
  font-size: 16px;
  font-weight: bold;
}

form[action="liste.php"] button[type="submit"]::before {
  content: "??";
  margin-right: 8px;
}

.db-dark form[action="liste.php"] input + label,
.db-dark form[action="liste.php"] select[name="serie"] {
  border-color: #507287;
  background: #102c40;
  color: #e4f0f6;
}

.db-dark form[action="liste.php"] input:checked + label {
  border-color: #ffd229;
  background: #3c5360;
  color: white;
}

@media (max-width: 700px) {
  form[action="liste.php"] {
    padding: 13px !important;
  }

  form[action="liste.php"] table,
  form[action="liste.php"] tbody,
  form[action="liste.php"] tr,
  form[action="liste.php"] td {
    display: block;
    width: 100% !important;
  }

  form[action="liste.php"] input[type="radio"] + label,
  form[action="liste.php"] input[type="checkbox"] + label {
    width: calc(100% - 32px);
  }

  form[action="liste.php"] select[name="serie"],
  form[action="liste.php"] button[type="submit"] {
    width: 100%;
    margin-left: 0;
  }
}
/* Farbige Kennzeichnung der Datenbankbereiche */

#Inhalt .Inhaltselement {
  position: relative;
}

#Inhalt .Inhaltselement::before {
  position: absolute;
  top: 17px;
  right: 20px;
  font-size: 26px;
  line-height: 1;
}

.db-section-follow {
  border-top: 5px solid #07518a !important;
}

.db-section-follow::before {
  content: "??";
}

.db-section-map {
  border-top: 5px solid #2d813c !important;
}

.db-section-map::before {
  content: "??";
}

.db-section-search {
  border-top: 5px solid #ffd229 !important;
}

.db-section-search::before {
  content: "??";
}

.db-section-lists {
  border-top: 5px solid #1d78ae !important;
}

.db-section-lists::before {
  content: "??";
}

.db-section-quiz {
  border-top: 5px solid #e29b18 !important;
}

.db-section-quiz::before {
  content: "?";
}

.db-section-follow > h1,
.db-section-map > h1,
.db-section-search > h1,
.db-section-lists > h1,
.db-section-quiz > h1 {
  padding-right: 48px;
}

@media (max-width: 500px) {
  #Inhalt .Inhaltselement::before {
    top: 13px;
    right: 13px;
    font-size: 22px;
  }
}