/* ==========================================================================
   FC Achtelsbach e.V. - Stylesheet
   Ersetzt die frueheren Dateien struktur.css und layout.css.
   Die alten Dateien bleiben liegen, weil die Archivseiten sie noch nutzen.
   ========================================================================== */

:root {
   --rot: #C20319;
   --rot-dunkel: #8E0212;
   --rot-hell: #E8091F;
   --schwarz: #111111;
   --hintergrund: #1a1a1a;
   --grau: #f2f2f2;
   --grau-rand: #d8d8d8;
   --gelb: #FFD400;
   --breite: 1200px;
}

*, *::before, *::after {
   box-sizing: border-box;
}

body, h1, h2, h3, h4, p, ul, ol, figure {
   margin: 0;
   padding: 0;
}

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   line-height: 1.6;
   color: var(--schwarz);
   background-color: var(--hintergrund);
   /* Sorgt dafuer, dass der Fussbereich auch auf kurzen Seiten unten sitzt */
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

img {
   max-width: 100%;
   height: auto;
}

a {
   color: var(--rot);
}

a:hover, a:focus {
   color: var(--rot-dunkel);
}

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung ---------------------- */

.skip {
   position: absolute;
   left: -9999px;
}

.skip:focus {
   left: 0.5rem;
   top: 0.5rem;
   z-index: 10;
   background: #fff;
   padding: 0.5rem 1rem;
   border: 2px solid var(--rot);
}

/* Kopfbereich ------------------------------------------------------------- */

.kopf {
   background-color: var(--schwarz);
   color: #fff;
   /* Roter Streifen als Uebergang zum Menue */
   border-bottom: 3px solid var(--rot);
   background-image: linear-gradient(90deg, var(--rot) 0, var(--rot) 6px, transparent 6px);
}

.kopf__innen {
   max-width: var(--breite);
   margin: 0 auto;
   padding: 0.75rem 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
}

.kopf__wappen {
   width: 72px;
   height: auto;
   flex: none;
}

.kopf__titel {
   font-size: 1.5rem;
   line-height: 1.2;
   color: #fff;
}

.kopf__unterzeile {
   font-size: 0.8rem;
   color: var(--gelb);
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

/* Hauptmenue --------------------------------------------------------------
   Der Menue-Block ist in allen Seiten Zeichen fuer Zeichen identisch.
   Die aktuelle Seite wird ueber das Attribut data-seite am body markiert,
   siehe weiter unten. So genuegt beim Aendern des Menues ein Suchen-und-
   Ersetzen ueber alle Dateien.
   ------------------------------------------------------------------------- */

.nav {
   background-color: var(--rot);
   border-bottom: 4px solid var(--schwarz);
}

.nav ul {
   max-width: var(--breite);
   margin: 0 auto;
   padding: 0 0.5rem;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
}

.nav a {
   display: block;
   padding: 0.65rem 0.9rem;
   color: #fff;
   text-decoration: none;
   font-size: 0.95rem;
}

.nav a:hover, .nav a:focus {
   background-color: var(--schwarz);
   color: var(--gelb);
}

/* Markierung der aktuell geoeffneten Seite */
body[data-seite="home"]        .nav a[href="index.html"],
body[data-seite="infos"]       .nav a[href="allgemein.html"],
body[data-seite="ergebnisse"]  .nav a[href="ergebnisdienst.html"],
body[data-seite="termine"]     .nav a[href="news.html"],
body[data-seite="tippspiel"]   .nav a[href="tippspiel.html"],
body[data-seite="bilder"]      .nav a[href="bilder.html"],
body[data-seite="links"]       .nav a[href="links.html"],
body[data-seite="kontakt"]     .nav a[href="kontakt.html"],
body[data-seite="impressum"]   .nav a[href="impressum.html"],
body[data-seite="datenschutz"] .nav a[href="datenschutz.html"] {
   background-color: #fff;
   color: var(--rot);
   font-weight: bold;
}

/* Seitengeruest ----------------------------------------------------------- */

.huelle {
   max-width: var(--breite);
   width: 100%;
   margin: 0 auto;
   padding: 1.25rem 1rem 2.5rem;
   display: grid;
   grid-template-columns: 1fr 220px;
   gap: 1.25rem;
   align-items: start;
   flex: 1;
}

/* Seiten ohne Seitenleiste nutzen die volle Breite */
.huelle--breit {
   grid-template-columns: 1fr;
}

/* Der Lesebereich bleibt hell, damit laengere Texte gut lesbar sind.
   Die kraeftige rote Kante oben bindet ihn an die Vereinsfarben an. */
.inhalt {
   background-color: #fff;
   border-top: 6px solid var(--rot);
   padding: 1.5rem;
   min-width: 0;
}

.seitenleiste {
   background-color: var(--schwarz);
   color: #e6e6e6;
   border-top: 6px solid var(--rot);
   padding: 1rem;
   font-size: 0.9rem;
}

.seitenleiste a {
   color: var(--gelb);
}

.seitenleiste a:hover, .seitenleiste a:focus {
   color: #fff;
}

.seitenleiste h2 {
   font-size: 0.85rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #fff;
   border-bottom: 2px solid var(--rot);
   padding-bottom: 0.25rem;
   margin-bottom: 0.5rem;
}

.seitenleiste ul {
   list-style: none;
}

.seitenleiste li {
   padding: 0.2rem 0;
}

.seitenleiste + .seitenleiste,
.seitenleiste__block + .seitenleiste__block {
   margin-top: 1.25rem;
}

/* Textauszeichnung -------------------------------------------------------- */

.inhalt h1 {
   font-size: 1.6rem;
   color: var(--schwarz);
   border-bottom: 3px solid var(--rot);
   padding-bottom: 0.4rem;
   margin-bottom: 1rem;
}

.inhalt h2 {
   font-size: 1.2rem;
   color: var(--rot);
   border-left: 5px solid var(--rot);
   padding-left: 0.6rem;
   margin: 1.75rem 0 0.5rem;
}

.inhalt h2:first-child {
   margin-top: 0;
}

.inhalt h3 {
   font-size: 1.02rem;
   margin: 1.25rem 0 0.4rem;
}

.inhalt p {
   margin-bottom: 0.85rem;
}

.inhalt ul, .inhalt ol {
   margin: 0 0 0.85rem 1.25rem;
}

.inhalt li {
   margin-bottom: 0.3rem;
}

/* Angabe, wann die Seite zuletzt geaendert wurde. Der Wert wird per
   JavaScript aus dem Aenderungsdatum der Datei selbst gesetzt und kann
   deshalb nicht veralten. Ohne JavaScript bleibt der im HTML
   hinterlegte Wert stehen. */
.stand {
   font-size: 0.85rem;
   color: #555;
   border-top: 1px solid var(--grau-rand);
   padding-top: 0.6rem;
   margin-top: 1.5rem;
}

.stand--oben {
   border-top: 0;
   border-left: 4px solid var(--rot);
   padding: 0.1rem 0 0.1rem 0.6rem;
   margin: 0 0 1.25rem;
}

figure {
   margin: 1rem 0 1.5rem;
}

figcaption {
   font-size: 0.85rem;
   color: #555;
   padding-top: 0.35rem;
}

/* Aktuelles-Ticker auf der Startseite --------------------------------------
   Ohne JavaScript ist die Liste ganz normal lesbar. Erst wenn das Skript
   laeuft, wird sie durch die Laufschrift ersetzt. Dadurch sind die
   Meldungen auch fuer Suchmaschinen und Screenreader vorhanden.
   -------------------------------------------------------------------------- */

.aktuelles {
   background-color: var(--schwarz);
   color: var(--gelb);
   padding: 0.75rem 1rem;
   margin-bottom: 1.5rem;
   border-left: 6px solid var(--rot);
}

.aktuelles h2 {
   color: #fff;
   font-size: 0.8rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin: 0 0 0.35rem;
}

.aktuelles ul {
   margin: 0 0 0 1.1rem;
}

.aktuelles li {
   margin-bottom: 0.25rem;
}

.aktuelles__ticker {
   min-height: 3rem;
   margin: 0;
   font-size: 1rem;
}

.aktuelles__cursor {
   background-color: var(--gelb);
   color: var(--schwarz);
}

/* Tabellen ---------------------------------------------------------------- */

.tabelle-huelle {
   overflow-x: auto;
   margin-bottom: 1.25rem;
}

table.daten {
   border-collapse: collapse;
   width: 100%;
   font-size: 0.92rem;
}

table.daten caption {
   text-align: left;
   font-weight: bold;
   color: var(--rot);
   padding-bottom: 0.4rem;
}

table.daten th, table.daten td {
   border: 1px solid var(--grau-rand);
   padding: 0.5rem 0.65rem;
   text-align: left;
   vertical-align: top;
}

table.daten thead th {
   background-color: var(--rot);
   color: #fff;
}

table.daten tbody tr:nth-child(even) {
   background-color: #fafafa;
}

/* Hinweiskasten ----------------------------------------------------------- */

.kasten {
   border: 1px solid var(--grau-rand);
   border-left: 6px solid var(--rot);
   background-color: #fbfbfb;
   padding: 0.9rem 1rem;
   margin-bottom: 1.25rem;
}

.kasten h2, .kasten h3 {
   margin-top: 0;
}

/* Fussbereich ------------------------------------------------------------- */

.fuss {
   background-color: var(--schwarz);
   color: #ccc;
   font-size: 0.85rem;
   margin-top: auto;
}

.fuss__innen {
   max-width: var(--breite);
   margin: 0 auto;
   padding: 1.25rem 1rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
   justify-content: space-between;
}

.fuss a {
   color: var(--gelb);
}

.fuss ul {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 0 1rem;
}

/* Schmale Bildschirme ------------------------------------------------------ */

@media (max-width: 860px) {
   .huelle {
      grid-template-columns: 1fr;
      padding: 1rem 0.75rem 2rem;
   }

   .inhalt {
      padding: 1rem;
   }

   .kopf__titel {
      font-size: 1.15rem;
   }

   .kopf__wappen {
      width: 54px;
   }

   .nav a {
      padding: 0.6rem 0.7rem;
      font-size: 0.9rem;
   }
}

@media print {
   .nav, .seitenleiste, .fuss {
      display: none;
   }

   body {
      background: #fff;
   }
}