/*  ====================================================
Stylesheet mit Layout und Text für ALLE Seiten von nfl-crush.com
Datei:  content.css
Autor:  Christian Gindelhumer / www.dropkick.at
========================================================== */

/*  ====================================================
Standards
========================================================== */
.temp-php {
  background: wheat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
}

@font-face {
  font-family: Roboto;
  src: url(../fonts/Roboto-Regular.ttf);
  font-family: Roboto-Medium;
  src: url(../fonts/Roboto-Medium.ttf);
}
html {
  --CrushBlue: rgb(0, 50, 100);
  --CrushRed: rgb(150, 5, 30);
  --ColorDark: #333333;
  --ColorLight: #efefef;
  --BoxShadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  --BoxRadius: 15px;
  --article-detail-padding: 0.6em 2em;
  --shortsection-margin: 2rem 6rem 1.5rem 6rem;
  --responsive-width: auto;
  font-family: "Roboto", "Calibri", sans-serif;
  color: black;
  font-size: 1.2em;
  line-height: 1.4em;
}
@media (max-width: 600px) {
  html {
    --BoxShadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    --BoxRadius: 10px;
    --article-detail-padding: 0.6em;
    --shortsection-margin: 0;
    --responsive-width: 100%;
    font-size: 1.3em;
    line-height: 1.5em;
  }
}

body {
  min-height: 100vh;
  background-image: url(/_pics/layout/bg-all.jpg);
  background-color: white;
}
h1,
h2,
h3 {
  font-family: "Roboto-Medium", "Calibri", sans-serif;
  line-height: 1.2rem;
}

a {
  color: var(--CrushBlue);
}
a:hover {
  color: var(--CrushRed);
  cursor: pointer;
}
a.help {
  cursor: help;
  color: var(--CrushBlue) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 50, 100, 0.4) !important; /* Macht die Linie halbtransparent */
  text-underline-offset: 4px !important; /* Fügt einen kleinen Abstand zwischen Text und Linie hinzu */
  transition: all 0.4s;
}
a.help:hover {
  color: var(--CrushRed) !important;
  text-decoration-color: var(--CrushRed) !important;
}
b {
  font-weight: bold;
}
strong {
  font-weight: bold;
}

/*  ====================================================
Grundlayout
========================================================== */

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 2% 2% 2%;
}
.container {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.maincontent {
  padding-bottom: 1em;
  flex-grow: 1;
  flex-shrink: 1;
}
.subcontent {
  flex: 0 0 300px;
}
/* === Responsive Grundlayout === */
@media (max-width: 900px) {
  .container {
    display: block;
  }
  .subcontent {
    display: flex;
    justify-content: space-around;
    gap: 1em;
    flex-wrap: wrap;
  }
  .subcontent .contentad {
    flex: 0 0 300px important;
  }
  .subcontent :nth-child(1) {
    order: 1;
  }
  .subcontent :nth-child(2) {
    order: 3;
  }
  .subcontent :nth-child(3) {
    order: 2;
  }
  .subcontent :nth-child(4) {
    order: 4;
  }
}
@media (max-width: 600px) {
  .wrapper {
    padding: 100px 1% 1% 1%;
  }
}
/* === Ende Responsive Grundlayout === */

footer {
  background-color: var(--ColorDark);
  color: var(--ColorLight);
  width: 100%;
}
.wrapper_footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2%;
}

/*  ====================================================
Allgemeines - Boxen
========================================================== */
.box {
  width: 100%;
  margin-bottom: 1.65em;
  overflow: hidden;
  background: var(--ColorLight);
  border-radius: var(--BoxRadius);
  box-shadow: var(--BoxShadow);
}
.box h1 {
  padding: 0.6em;
  margin: 0 0 0.5em 0;
  font-size: 1.3rem;
  background: var(--ColorDark);
  color: white;
}
.box h2 {
  padding: 0.6em;
  margin: 0 0 1em 0;
  font-size: 1.2rem;
  background: var(--ColorDark);
  color: white;
}
.box h3 {
  padding: 0.6em;
  margin: 0 0 1em 0;
  font-size: 1.1rem;
  background: var(--ColorDark);
  color: white;
}
.box h4 {
  padding: 0.6em;
  margin: 0 0 1em 0;
  font-size: 1.1rem;
  background: var(--ColorDark);
  color: white;
}
.box p {
  padding: 0 1.25em 1.25em 1.25em;
}
.bannerbox {
  line-height: 0;
  padding: 0;
}
.bannerbox-468 {
  line-height: 0;
  padding: 0;
  max-width: 468px;
  margin-left: auto;
  margin-right: auto;
}
.contentad {
  width: 300px;
  height: 250px;
}
.newsbox img {
  padding: 0.3em 1em 0.5em 1em;
  float: left;
  max-width: 40%;
}
.newsbox a {
  color: var(--ColorDark);
}
.newsbox a:hover {
  color: var(--CrushBlue);
}
.newsbox:hover {
  background-color: white;
}

/*  ====================================================
Allgemeines 
========================================================== */
ul.linklist {
  margin-top: -1.25em;
  border-top: 1px solid var(--ColorLight);
}
ul.linklist li {
  border-top: 1px solid var(--ColorDark);
  background-color: var(--ColorLight);
}
ul.linklist li:first-child {
  border-top: none;
}
ul.linklist li a {
  display: block;
  padding: 0.6em 1em;
}
ul.linklist li a::before {
  content: url("/_pics/layout/arrow-more.png");
  display: inline-block;
  padding-right: 7px;
}
ul.linklist li a:hover {
  background-color: var(--ColorDark);
  cursor: pointer;
  color: white;
}
ul.linklist li a.active {
  background-color: var(--ColorDark);
  cursor: default;
  color: var(--ColorLight);
}

/*  ==================================================== 
Footer
========================================================== */
.footer_content {
  color: var(--ColorLight);
  text-align: center;
  padding-top: 1em;
}
.footer_row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 1px solid #666;
  border-bottom-style: dotted;
  padding: var(--article-detail-padding);
}
ul.footnavi {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 1px solid #666;
  border-bottom-style: dotted;
  padding: 1em;
}
ul.footnavi li {
  padding: 0.25em 0.5em;
  display: inline;
}
ul.footnavi li.footnavi-cat {
  font-weight: bold;
  display: block;
}
ul.footnavi li.footnavi-division {
  font-weight: bold;
  display: block;
}
.footer_content a {
  color: var(--ColorLight);
}
.footer_content a::before {
  content: url("/_pics/layout/arrow-more.png");
  display: inline-block;
  padding-right: 7px;
}

/*  ==================================================== 
Startseite
========================================================== */

.hero {
  margin-bottom: 30px;
  box-shadow: var(--BoxShadow);
  border-radius: var(--BoxRadius);
  overflow: hidden;
  line-height: 0;
}
.hero img {
  opacity: 0.8;
}
.topcontent {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 1.6em 0;
  box-sizing: border-box;
  gap: 1em;
  justify-content: flex-start;
}
.topbox {
  /* NEU: Definiert die Breite basierend auf 50% abzüglich des halben Gaps (1em / 2 = 0.5em) 
       und stellt sicher, dass exakt ZWEI Boxen in die Zeile passen. 
       Das "gap" übernimmt den Rest des Raumes. */
  width: calc(50% - 0.8em);
  /* Stellt die gleiche Größe sicher */
  box-sizing: border-box;
  margin: 0 !important;
}
.topbox h3 {
  margin-bottom: 0 !important;
}
.topbox img {
  padding: 0;
  margin-bottom: 1em;
  width: 100%;
}
@media (max-width: 600px) {
  .topbox {
    /* Setzt die Breite auf 100%. Da der Container "gap: 1em" hat,
           entsteht automatisch 1em Abstand zwischen allen 4 Boxen untereinander. */
    width: 100%;
    /* Es ist kein margin-bottom mehr nötig, da das 'gap' die Lücke füllt! */
  }
}

/*  ====================================================
Artikel allgemein
========================================================== */
article {
  padding: 0 0 1.5rem 0;
}
article.detail h2,
article.detail h3,
article.detail p {
  padding: var(--article-detail-padding);
  margin: 0;
}
article.detail h2 {
  margin: 1em 0 0.6em 9 !important;
}
article.detail h3,
article.detail h3 {
  background: none;
  color: black;
}
article.detail p.leadtext {
  font-weight: bold;
}
article.detail p.linktipp {
  margin: var(--article-detail-padding);
  border: 1px solid var(--ColorDark);
  background-color: #e2e2e2;
  padding: 0;
}
article.detail p.linktipp a {
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
}
article.detail p.linktipp a:hover {
  background-color: var(--ColorDark);
  color: var(--ColorLight);
}

article.detail p.linktipp a::before {
  content: url("/_pics/layout/arrow-more.png");
  display: inline-block;
  padding-right: 7px;
}
article.detail p a {
  text-decoration: underline;
  text-decoration-style: dotted;
}

article.detail .newspic-top {
  margin: var(--article-detail-padding);
  border: 1px solid var(--ColorDark);
  background-color: #e2e2e2;
}
article.detail .newspic-top img {
  padding: 0.2em;
}
article.detail .newspic-top figcaption {
  display: block;
  padding: 0.25em 0.5em;
  font-size: 0.85rem;
  font-style: italic;
}
article.detail .newspic-small {
  margin: 0.9rem 1.3rem 0.2rem 2rem;
  border: 1px solid var(--ColorDark);
  background-color: #e2e2e2;
  max-width: 40%;
  float: left;
}
article.detail .newspic-small img {
  padding: 0.2em;
}
article.detail .newspic-small figcaption {
  display: block;
  padding: 0.25em 0.6em;
  font-size: 0.85rem;
  font-style: italic;
}
article.detail table {
  width: auto;
  margin: 0 auto;
  border: 1px solid var(--ColorDark);
}
article.detail table th {
  font-weight: bold;
  background-color: white;
}
article.detail table th,
article.detail table td {
  padding: 0.5em;
}
article.detail table tr {
  border-bottom: 1px solid var(--ColorDark);
}
article.detail ul {
  width: 100%;
  padding: var(--article-detail-padding);
  margin: 0;
}
article.detail li {
  margin-bottom: 0.5em;
  padding-left: 1em;
  position: relative;
}
article.detail li::before {
  content: "•"; /* Hier wird das gewünschte Zeichen gesetzt (ein dicker Punkt) */
  font-size: 1.2em;
  position: absolute;
  left: 0; /* Positioniert das Zeichen ganz links im padding-Bereich */
  top: 0;
}

/* ====================================================
Teams
========================================================== */
.teamheader {
  display: flex;
  align-items: flex-end;
}
.teamlogo {
  width: 40%;
  margin: 1em;
  padding: 1em;
}
.teamname {
  width: 60%;
  margin: 1em;
  text-align: right;
}
.teamname > h1 {
  background: none;
  line-height: 2rem;
  margin: 0;
  padding: 0;
}
.teamname > h1 > span {
  font-size: 2.5rem;
}
.teamcolor {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ColorDark);
}
/* === Responsive Teamheader === */
@media (max-width: 600px) {
  .teamheader {
    display: block;
  }
  .teamlogo {
    width: 55%;
    margin: 1em auto 0 auto;
    padding: 1em;
  }
  .teamname {
    width: auto;
    margin: 0.2em auto 1em auto;
    padding: 0.2em;
    text-align: center;
  }
}
.teams-list > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.teams-list > ul > li {
  width: 22%;
  padding: 1em;
  margin-bottom: 1em;
  text-align: center;
  border: 1px solid #333;
  background-color: white;
  border-radius: var(--BoxRadius);
}
.teams-list img {
  width: 100%;
  max-width: 120px;
}
.teams-list > ul > li > a {
  color: var(--ColorDark);
}
.teams-list > ul > li:hover {
  color: var(--ColorDark);
  background-color: #efefef;
}
/* === Responsive Teams === */
@media (max-width: 580px) {
  .teams-list > ul > li {
    width: 45%;
  }
}

/*  ====================================================
Saison
========================================================== */
table.bigtable {
  padding: 10em;
  margin: 1em 0 0 0;
  width: 100%;
  border: none !important;
}
table.bigtable thead,
table.bigtable th {
  background-color: var(--ColorDark) !important;
  color: white;
}
.bigtable th,
.bigtable td {
  padding: 0.5em 0.6em;
  border-bottom: 1px solid var(--ColorDark);
}
.bigtable th {
  font-weight: bold;
}
.bigtable tr:nth-child(even) {
  background-color: white;
}
.bigtable tr:hover {
  background-color: var(--ColorDark);
  color: white;
}

/*  ====================================================
Spielerpositionen
========================================================== */

section.shortsec {
  margin: var(--shortsection-margin);
  background-color: var(--ColorDark);
  color: white;
  overflow: hidden;
}
section.shortsec h3 {
  padding: 0.4em 1em;
  font-size: 1.3rem;
  border-bottom: 1px solid var(--ColorLight);
  color: white;
}
section.shortsec p {
  line-height: 1.6rem;
  padding: 0.4em 1em 1em 1em;
  font-size: 1.1rem;
}
.sublist-container {
  padding-top: 1.5em;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.sublist-content {
  margin: 0.6em;
  width: var(--responsive-width);
}
.sublist-content > h3 {
  padding: 0.6em;
  margin: 0;
  background-color: var(--ColorDark);
  color: var(--ColorLight);
}
.sublist-content > ul {
  border-left: 1px solid var(--ColorDark);
  border-right: 1px solid var(--ColorDark);
  border-top: 1px solid var(--ColorLight);
  padding: 0 !important;
}
.sublist-content > ul > li {
  border-bottom: 1px solid var(--ColorDark);
  margin: 0 !important;
  padding: 0 !important;
  position: initial !important;
}
.sublist-content > ul > li:nth-child(even) {
  background-color: white;
}
.sublist-content > ul > li.us {
  padding: 0.6em;
  font-weight: bold;
  background-color: var(--ColorDark);
  color: var(--ColorLight);
}

.sublist-content > ul > li > a {
  display: block;
  padding: var(--article-detail-padding);
}
.sublist-content > ul > li > a::before {
  content: url("/_pics/layout/arrow-more.png");
  display: inline-block;
  padding-right: 7px;
}
.sublist-content > ul > li > a:hover {
  background-color: var(--ColorDark);
  cursor: pointer;
  color: white;
}
.sublist-content > ul > li > a.active {
  background-color: var(--ColorDark);
  cursor: default;
  color: var(--ColorLight);
}

/*  ====================================================
Akkordeon
========================================================== */

/* Stil für den Akkordeon-Container */
.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
}
*/

/* Stil für den Header (den Buchstaben) */
.accordion-header {
  user-select: none;
}

.accordion-header h4 {
  cursor: pointer !important;
  user-select: none;
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.accordion-header h4:hover {
  background-color: black;
}

.accordion-header span {
  font-weight: normal;
  color: #888;
  font-size: 0.75em;
  margin-left: 1em;
}

/* Stil für den Inhalt (die Begriffe) */
.accordion-content {
  max-height: 0; /* WICHTIG: Standardmäßig ausgeblendet */
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Weiche Animation */
  margin: 0 !important;
  /* padding: 0 15px;
  background-color: #fff; */
}

.accordion-content.active {
  max-height: 1000px; /* Muss groß genug sein, um den Inhalt anzuzeigen */
  padding: 0;
}
.accordion-content a.active-term {
  font-weight: bold;
}

/* Stil für die Liste innerhalb des Akkordeons */
.accordion-content ul.sublist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accordion-content ul.sublist li {
  padding: 5px 0;
  border-bottom: 1px dotted #eee;
}
.accordion-content ul.sublist li:last-child {
  border-bottom: none;
}

/*  ====================================================
Tab Navigation
========================================================== */

.schedule-tabs-nav {
  display: flex; /* Für responsive, flexible Buttons */
  flex-wrap: wrap; /* Wichtig für Mobilgeräte, damit die Buttons umbrechen */
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  overflow-x: auto; /* Erlaubt horizontales Scrollen auf kleinen Screens */
  white-space: nowrap; /* Verhindert Umbruch, wenn flex-wrap nicht gewünscht */
  padding-bottom: 5px;
}

.tab-button {
  background-color: #f4f4f4;
  border: 1px solid #ccc;
  border-bottom: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9em;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  transition: background-color 0.2s;
  flex-shrink: 0; /* Verhindert das Schrumpfen auf Mobilgeräten */
}

.tab-button:hover {
  background-color: #eee;
}

.tab-button.active {
  background-color: #fff;
  border-color: #ddd;
  border-bottom-color: #fff; /* "Schneidet" den Rahmen des Containers ab */
  font-weight: bold;
}

/* Tab Content */
.schedule-week-content {
  display: none; /* Standardmäßig alle Inhalte verstecken */
  padding: 10px 0;
}

.schedule-week-content.active {
  display: block; /* Nur den aktiven Inhalt anzeigen */
}

/* Anpassung für mobile Ansicht (um unnötig lange Buttons zu vermeiden) */
@media (max-width: 600px) {
  .schedule-tabs-nav {
    flex-wrap: nowrap;
    padding-bottom: 10px;
  }
  .tab-button {
    font-size: 0.8em;
    padding: 6px 10px;
  }
}

/*  ====================================================
Spezifische Klassen
========================================================== */

.responsive-video {
  padding: 0.65rem 2rem;
}
.responsive-video div {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* === Google Searchbox === */
#___gcse_0 input {
  background: none !important;
  font-family: "Roboto", "Calibri", sans-serif;
  font-size: 1.1em;
}
#___gcse_0 button {
  background-color: var(--CrushBlue) !important;
  border-color: var(--CrushBlue) !important;
}
#___gcse_0 .gsc-control-cse {
  background-color: #efefef;
  border: none;
}
#___gcse_0 .gsc-result {
  line-height: 1.5em;
  font-size: 1.6em !important;
}
#___gcse_0 .gsc-control-cse .gsc-table-result {
  font-size: 0.75em !important;
}
#___gcse_0 .gsc-control-cse .gs-snippet {
  padding-left: 80px;
}
#___gcse_0 .gsc-control-cse .gs-image {
  border: none;
  margin-right: 2em !important;
}

/* === Google Searchbox Ende === */

/*  ====================================================
Responsive
========================================================== */

/* ======================================
   E N D E content.css
   ====================================== */