/* Sportunion St. Konrad - Grundlayout und wiederverwendbare Klassen.
   Ersetzt die frueheren Layout-Tabellen und die Praesentations-Attribute
   (align, valign, bgcolor, border, <font>, <center>) aus dem Markup. */

:root {
    --gruen-dunkel: #004339;
    --gruen: #005447;
    --gruen-mittel: #3c8e81;
    --gruen-hell: #89cfc4;
    --weiss: #ffffff;
    --schwarz: #000000;
    --seitenbreite: 1000px;
    --navibreite: 185px;
}

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

body {
    margin: 0;
}

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

/* ------------------------------------------------------------------ Raster */

/* Zentriert Banner, Hauptnavigation und Seitenkoerper auf gleiche Breite.
   Liefert zugleich die Aussenabstaende, damit Listen mit dieser Klasse ihren
   Standardeinzug verlieren. */
.seitenrahmen {
    max-width: var(--seitenbreite);
    margin: 0 auto;
    padding: 0 10px;
}

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

.banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    min-height: 180px;
}

.banner__logo {
    flex: 1 1 320px;
}

.banner__logo img {
    display: block;
    width: 100%;
    margin: 10px;
}

.banner__meta {
    flex: 1 1 320px;
    align-self: flex-start;
    margin-top: 10px;
    text-align: right;
}

/* --------------------------------------------------------- Hauptnavigation */

.hauptnavi {
    background-color: var(--gruen-dunkel);
}

/* Abstaende und Zentrierung kommen aus .seitenrahmen und duerfen hier nicht
   mit margin/padding ueberschrieben werden. */
.hauptnavi__liste {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.hauptnavi__liste li {
    flex: 1 1 25%;
    text-align: center;
}

.hauptnavi__liste a {
    display: block;
    padding: 6px 4px;
    font-size: x-large;
}

/* ------------------------------------------------------ Pfad und Anmeldung */

.pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}

/* ----------------------------------------------------------- Seitenkoerper */

/* transpixel.png ist ein halbtransparentes Weiss und hellt den Untergrund auf. */
.seite {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    background-image: url('../Images/transpixel.png');
}

.unternavi {
    flex: 0 0 var(--navibreite);
    margin: 15px;
    text-align: center;
}

.inhalt {
    flex: 1 1 600px;
    min-width: 0;
    padding: 0 10px 15px 0;
}

/* -------------------------------------------------------- Inhaltsbausteine */

/* Aufmacher der Startseiten: grosser Bericht, zwei kleine, Terminliste. */
.aufmacher {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background-image: url('../Images/transpixel.png');
}

.aufmacher__hauptbericht {
    flex: 3 1 340px;
    min-width: 0;
}

.aufmacher__nebenberichte {
    flex: 2 1 220px;
    min-width: 0;
}

.aufmacher__termine {
    flex: 2 1 240px;
    min-width: 0;
}

/* Bildkachel mit Titel darueber - ersetzt die frueheren Hintergrund-Tabellen.
   Das Motiv kommt per style-Attribut aus der Datenbank, die Abdunklung steht
   hier, damit sie nur an einer Stelle gepflegt werden muss. */
.kachel {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 7px;
    border: 1px solid var(--weiss);
    background-color: var(--gruen);
    background-position: center;
    background-size: cover;
    color: var(--weiss);
}

/* Obere 60 Prozent bleiben unangetastet, darunter dunkelt es zum Rand hin ab,
   damit die weisse Schrift lesbar bleibt. */
.kachel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

/* Inhalt ueber die Abdunklung heben. */
.kachel > * {
    position: relative;
}

.kachel--gross {
    min-height: 340px;
}

.kachel--klein {
    min-height: 169px;
    padding: 4px;
}

.kachel__titel {
    font-size: 18pt;
    font-weight: bold;
}

/* Berichtsliste: Vorschaubild links, Datum, Titel und Anrisstext rechts. */
.berichtseintrag {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.berichtseintrag__bild {
    flex: 0 0 auto;
    margin: 10px;
    border: 1px solid var(--weiss);
}

.berichtseintrag__text {
    flex: 1 1 300px;
    min-width: 0;
    padding: 3px;
}

.berichtseintrag__kopf {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
    padding: 3px;
    background-color: var(--gruen);
}

/* Drei gleich breite Themenfelder unterhalb der Berichte. */
.felder {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    background-image: url('../Images/transpixel.png');
}

.feld {
    flex: 1 1 30%;
    min-width: 0;
    text-align: center;
}

/* Terminliste in der rechten Spalte der Startseiten. */
.terminliste {
    width: 100%;
}

.termin {
    padding: 5px;
    font-size: larger;
    line-height: 1.3;
}

.termin__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.termin__datum {
    flex: 0 0 130px;
}

/* Infobox, z. B. Trainingszeiten. */
.infobox {
    width: 100%;
    margin-top: 10px;
}

.infobox__wert {
    background-color: var(--gruen-mittel);
    padding: 2px 4px;
}

/* Ueberschriftsbalken von Terminliste und Infobox. */
.terminliste__kopf,
.infobox__titel {
    background-color: var(--gruen-dunkel);
    color: var(--weiss);
    text-align: center;
    font-size: larger;
}

.terminliste__kopf {
    padding: 5px;
}

.infobox__titel {
    padding: 2px 4px;
}

/* ----------------------------------------------------------- Datentabellen */

.datentabelle {
    width: 100%;
    border-collapse: collapse;
}

.datentabelle th,
.datentabelle td {
    padding: 2px 6px;
    text-align: left;
    vertical-align: top;
}

.datentabelle th {
    background-color: var(--gruen-dunkel);
    color: var(--weiss);
}

.datentabelle--hell {
    background-color: var(--weiss);
    color: var(--schwarz);
    font-size: 11pt;
}

/* Ohne diese Regel wuerden Links das Weiss aus bild.css erben. */
.datentabelle--hell a {
    color: var(--schwarz);
}

.datentabelle--gruen tr {
    background-color: var(--gruen);
    color: var(--weiss);
}

/* Zebrastreifen fuer statische Tabellen. GridViews regeln das ueber
   AlternatingRowStyle und brauchen diese Klasse nicht. */
.datentabelle--gestreift tbody tr:nth-child(even) {
    background-color: var(--gruen-hell);
}

/* --------------------------------------------------------------- Formulare */

/* Beschriftung links, Eingabefeld rechts; bricht auf schmalen Geraeten um. */
.formzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.formzeile--schmal {
    max-width: 600px;
}

.formzeile__label {
    flex: 0 0 250px;
    font-weight: bold;
}

/* Mehrere Felder nebeneinander in einer Zeile. */
.formleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
}

.formleiste--oben {
    align-items: flex-start;
}

.formzeile__feld,
.formleiste__feld {
    flex: 1 1 250px;
    min-width: 0;
}

.formspalte {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.adminmenue {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.adminmenue a {
    display: inline-block;
}

.fehlermeldung {
    color: #cc0000;
    font-weight: bold;
}

/* ---------------------------------------------------- Bilder und Sponsoren */

/* Bildraster, z. B. Mannschaft und Vorstand. */
.bildraster {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    margin: 0 0 15px 0;
    padding: 0;
}

.bildraster li {
    flex: 0 1 150px;
    font-weight: bold;
}

.bildraster--gross li {
    flex: 0 1 186px;
}

.bildraster img {
    display: block;
    width: 100%;
}

/* Sponsorenblock: Bild und Beschreibung nebeneinander. */
.sponsor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.sponsor__bild {
    flex: 0 1 auto;
}

.sponsor__text {
    flex: 1 1 300px;
    min-width: 0;
}

/* ------------------------------------------------------------------ Helfer */

.zentriert {
    text-align: center;
}

.linksbuendig {
    text-align: left;
}

.text-weiss {
    color: var(--weiss);
}

.text-schwarz {
    color: var(--schwarz);
}

.gross {
    font-size: large;
}

.zaehler {
    font-size: 20pt;
    font-weight: bold;
}

.bild-rechts {
    float: right;
    margin: 0 0 15px 15px;
}

/* Aus der frueheren Fassung uebernommen: Klasse des asp:Menu und der
   Ueberschriftszeile in den Berichtslisten. */
.Unternavi {
    vertical-align: middle;
}

.smallheader {
    background-color: var(--gruen);
    color: var(--weiss);
    font-size: 14pt;
    padding: 2px 4px;
}

/* ---------------------------------------------------------- Schmale Geraete */

@media only screen and (max-width: 800px) {
    .unternavi {
        flex: 1 1 100%;
    }

    .inhalt {
        padding-left: 0;
        padding-right: 0;
    }

    .banner__meta {
        text-align: left;
    }
}