/* Grundlegendes Reset und Zentrierung */
* {
    box-sizing: border-box;	/*Wenn du border-box aktivierst, bleibt die Box exakt so breit, wie du es definiert hast. Der Innenabstand (padding) und der Rahmen (border) werden nach innen gerechnet. Der Platz für den Text oder Inhalt schrumpft stattdessen automatisch.*/
    margin: 0;
    padding: 0;
	border: 0;
}

body {
 	font-family: Arial, Helvetica, sans-serif;
    background-color: #EEFFDD;
    display: flex;			/* Aktiviert das Flexbox-Layout für die gesamte Seite. Alle direkten Kind-Elemente des <body> (wie <header>, <main>, <footer> oder <div>-Container) werden dadurch zu Flex-Items.*/
    flex-direction: column;	/* Bestimmt die Richtung der Elemente. Sie werden vertikal (untereinander) wie in einer Spalte aufgereiht, anstatt standardmäßig nebeneinander zu stehen.*/
    align-items: center; 	/* Richtet alle Elemente entlang der Querachse (hier horizontal) perfekt mittig aus*/
    padding: 20px 0;		/* Fügt dem gesamten Dokument einen Innenabstand hinzu: 20 Pixel oben und unten (damit der Inhalt nicht direkt am oberen oder unteren Bildschirmrand klebt) und 0 Pixel links und rechts.*/
	}

/* ganze Seite als Element*/
#div_main_box
	{
    width: 100%;
	max-width: 1200px;		/* Optionale Begrenzung für sehr große Bildschirme */
	background-color:#CCFFCC;
	border: 2px solid #5A8C4F;
	}

/* Bereich Header für Bild */
#div_main_header {
    width: 100%;
	border-bottom: 1px solid #5A8C4F;
}

/* Bild im Bereich Header */
.main_header-img {
    width: 100%;
    height: auto;
    display: block;			/* Verhindert unschöne Abstände unter dem Bild */
}

/* 2. Navigationszeile */
#div_main_head_nav {
    width: 100%;
	background-color: #d5eecc;
	border-bottom: 1px solid #5A8C4F;
	padding: 15px 15px 15px 15px; /*Innenabstand - Oben Rechts Unten Links */
}

#head-navigation-container {
	display: flex;			/* Aktiviert das Flexbox-Layout-Modell für dieses Element. Alle direkt darin liegenden Kind-Elemente werden zu "Flex-Items" und lassen sich dadurch extrem flexibel anordnen. */
	justify-content: center;/* Richtet alle Elemente auf der Hauptachse (horizontal) exakt mittig aus. */
	align-items: center;    /* Richtet alle Elemente auf der Querachse (vertikal) mittig aus. */
	width: 100;				/* Nutzt die volle Breite für die Zentrierung */
	gap: 10px;				/* Erzeugt einen festen Abstand von 10 Pixeln zwischen den einzelnen Navigationselementen (sowohl horizontal als auch vertikal, falls Zeilen umbrechen).*/
	flex-wrap: wrap;        /* Erlaubt automatischen Zeilenumbruch bei vielen Elementen */
}

.head-nav-link {
	display: inline-flex;	/* Aktiviert Flexbox für das Innere des Elements, lässt das Element selbst aber wie ein Inline-Element (z. B. ein normales Wort oder <span>) im Textfluss stehen. Mehrere dieser Buttons stehen dadurch nebeneinander, nicht untereinander. */
	/*flex: 1; 				/* Erzwingt, dass sich alle Buttons den verfügbaren Platz im übergeordneten Container exakt gleichmäßig aufteilen und alle exakt gleich breit werden. Alle Buttons werden gleich breit */
	align-items: center;	/* Richtet den Inhalt im Button (z. B. Text und ein Icon) vertikal (von oben nach unten) perfekt mittig aus.*/
	justify-content: center; 	/* Richtet den Inhalt im Button horizontal (von links nach rechts) perfekt mittig */
	color: #495057;			/* Setzt die Textfarbe auf ein dunkles Anthrazit/Grau.*/
	text-decoration: none; 	/* Entfernt die standardmäßige Unterstreichung (wichtig, falls es sich um ein <a> Link-Tag handelt).*/
	font-size: 0.9rem;		/* Die Schriftgröße ist minimal kleiner als die Standard-Schriftgröße des Browsers (90 % der Basis-Schriftgröße).*/
	font-weight: bold;		/* Der Text wird fett gedruckt.*/
	padding: 6px 15px;		/* Der Innenabstand des Buttons beträgt 6 Pixel oben/unten und 15 Pixel links/rechts. Das gibt dem Text im Button Atombraum.*/
	border-radius: 4px;		/* Rundet die Ecken des Buttons leicht ab (4 Pixel Radius).*/
	border: 1px solid #ced4da;	/* Zieht einen 1 Pixel dünnen, durchgehenden, hellgrauen Rahmen um den Button.*/
	background-color: #cceecc; 	/* Färbt den Hintergrund des Buttons in einem hellen, pastelligen Grün ein.*/
	transition: all 0.15s ease;	/* Sorgt für eine weiche Animation. Wenn sich z. B. bei einem :hover-Effekt (Mauszeiger drüber) die Hintergrundfarbe oder die Textfarbe ändert, wechselt diese nicht abrupt, sondern blendet innerhalb von 0,15 Sekunden sanft*/
}

.head-nav-link:hover { 
	background-color: #e9ecef; 
	border-color: #dd0000; 
}

.head-nav-link.aktiv { 
	background-color: #007bff; 
	color: #fff; 
	border-color: #007bff; 
}


/* 3. Zweigeteilter Hauptbereich (90% Breite) */
#div_main_container {
	box-sizing: border-box;
	display: grid;
    grid-template-columns: 20% 80%; /* Teilt den Container exakt in 20/80 auf */
    border-bottom: 1px solid #5A8C4F;
    gap: 0px; 
}

/* Linke Infospalte (20%) */
#div_main_container_links {
	box-sizing: border-box;
	padding: 5px 5px 10px 5px; /* Innenabstand - Oben Rechts Unten Links */
	border-right: 1px solid #5A8C4F; /* Rahmen rechts */
}

/* Rechte Hauptanzeige (80%) */
#div_main_container_rechts {
	box-sizing: border-box;
	padding: 20px; /* Innenabstand */
	min-height: 400px; /* Mindesthöhe für den Inhalt */
}

/* 4. Fußzeile (90% Breite) */
#div_main_footer {
    width: 100%;
	background-color: #d5eecc;
	padding: 15px; /*Innenabstand - Oben Rechts Unten Links */
	text-align: center; /* Zentriert Text, Bilder und Inline-Elemente */
}
.links_nav_foot
	{
	font-size	: 14px;
	color		: #333333; 
	text-decoration: none;
	}

.links_nav_foot :link, .links_nav_foot :visited
	{
	font-size	: 14px;
	color		: #333333; 
	text-decoration: none;
	}
.links_nav_foot :hover
	{
	font-size	: 14px;
	color		: #dd0000; 
	text-decoration: none;
	}

.links_nav_foot_ausgewaehlt
	{
	font-size	: 14px;
	color		: #dd0000; 
	text-decoration: none;
	}


/* Container für die Wappen-Anzeige */
.wappen-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 10px 0;
}

/* Definition für die Wappen-Bilder selbst */
.wappen-img {
    max-width: 105px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Trenner (vs.) zwischen den Logos */
.wappen-trenner {
    font-weight: bold;
    color: #555;
}

/* Bild für Platzhalter */
.wappen-placeholder {
  opacity: 0.6; /* Makes the placeholder slightly transparent */
  filter: grayscale(100%); /* Optional: turns the placeholder black & white */
}

/* Unterstrich nach dem Eintrag */
.wappen_base_line
	{
	border-top: 1px solid #99cc99;
	width: 70%;
	margin: auto;
	}

/* Überschriften auf der Hauptseite */
.main_ueberschrift
	{
	font-size: 2rem;
	font-weight: bold;
	text-decoration: underline overline #6f7f6f;		
	}

/* Aktuelles */
/*Haupttabelle mit den News*/
.style_tabelle_rahmen_separat
	{
	border-collapse: separate;
	border: 1px solid #99cc99;
	border-spacing: 2px;
	background-color: #ccffcc;
	width: 99%;
	margin: 0 auto; /* Oben/Unten: 0, Links/Rechts: auto (zentriert) */
	}
.style_tabelle_rahmen_collapse
	{
	border-collapse:collapse;
	border:1px solid #99cc99;
	background-color: #ccffcc;
	width: 100%;
	margin: 0 auto;
	}
.style_zeile_rahmen_unten_dunkel_h35px {
	height: 35px; /* Wirkt bei Tabellenzellen automatisch wie min-height */
	padding: 5px;
	border-bottom: 1px solid #99cc99;
	box-sizing: border-box; /* Hält die Höhe exakt bei 35px, sofern der Inhalt reinpasst */
	vertical-align: middle; /* Zentriert den Text sauber in der Zelle */
	background-color: #d5eecc;
	width: 99%;
}
.style_zeile_rahmen_unten_hell_h35px
	{
	height: 35px; /* Wirkt bei Tabellenzellen automatisch wie min-height */
	padding: 5px;
	border-bottom: 1px solid #99cc99;
	box-sizing: border-box; /* Hält die Höhe exakt bei 35px, sofern der Inhalt reinpasst */
	vertical-align: middle; /* Zentriert den Text sauber in der Zelle */
	background-color: #cceecc;
	width: 99%;
	}
.style_zeile_rahmen_unten_trans_h28px
	{
	height: 30px; /* Wirkt bei Tabellenzellen automatisch wie min-height */
	padding: 5px;
	border-bottom: 1px solid #99cc99;
	box-sizing: border-box; /* Hält die Höhe exakt bei 35px, sofern der Inhalt reinpasst */
	vertical-align: middle; /* Zentriert den Text sauber in der Zelle */
	width: 99%;
	}

.style_zeile_rahmen_unten_trans_h22px
	{
	height: 22px; /* Wirkt bei Tabellenzellen automatisch wie min-height */
	padding: 5px;
	border-bottom: 1px solid #99cc99;
	box-sizing: border-box; /* Hält die Höhe exakt bei 35px, sofern der Inhalt reinpasst */
	vertical-align: middle; /* Zentriert den Text sauber in der Zelle */
	width: 99%;
	}
	
/* Formatierungen Texte */
.mittig
	{
	text-align: center;
	}
.links
	{
	text-align: left;
	}
.rechts
	{
	text-align: right;
	}

.text_06rem_normal_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 0.6rem;
	font-weight: normal;
	}
.text_06rem_fett_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 0.6rem;
	font-weight: bold;
	}
.text_08rem_normal_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 0.8rem;
	font-weight: normal;
	}
.text_08rem_fett_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 0.8rem;
	font-weight: bold;
	}
.text_10rem_normal_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 1.0rem;
	font-weight: normal;
	}
.text_10rem_normal_block_v2
	{
	text-decoration	: none;
	font-size: 1.0rem;
	text-align: justify;
	letter-spacing:0.05em;
	line-height: 1.5;
	}
.text_10rem_fett_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 1.0rem;
	font-weight: bold;
	}
.text_12rem_normal_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 1.2rem;
	font-weight: normal;
	}
.text_12rem_fett_mittig
	{
	text-decoration: none;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	}
	
/*Aktuelles Nav*/
/* ==========================================================================
   1. COMMON NAVIGATION STYLES (Für beide Container gültig)
   ========================================================================== */
.head-navigation-container.context-saison,
.head-navigation-container.context-pagination {
    display: flex;				/* Aktiviert das Flexbox-Layout-Modell für dieses Element. Alle direkt darin liegenden Kind-Elemente werden zu "Flex-Items" und lassen sich dadurch extrem flexibel anordnen. */
    flex-direction: row;        /* Erzwingt, dass die Elemente (Text und Buttons) waagerecht (nebeneinander) nebeneinander stehen */
    align-items: center;        /* Richtet alle Elemente vertikal zentriert aus. Wenn der Text beispielsweise höher ist als die Buttons (oder umgekehrt), stehen beide optisch perfekt auf einer horizontalen Mittellinie. */
    flex-wrap: nowrap;          /* Verbietet den Elementen einen Zeilenumbruch. Selbst wenn der Bildschirm sehr schmal wird oder der Text sehr lang ist, bleiben Text und Buttons zwingend in einer Reihe und rutschen nicht untereinander. */
    width: 100%;				/* Sorgt dafür, dass dieses Container-Element die volle Breite seines übergeordneten Elements (Elternelements) einnimmt. */
    box-sizing: border-box;		/* Verändert das CSS-Box-Modell. Es sorgt dafür, dass eventuell hinzugefügtes padding (Innenabstand) oder border (Rahmen) in die width: 100% eingerechnet werden. Der Container bricht dadurch bei Abständen nicht aus dem Bildschirmrand aus. */
}

/* Gemeinsame Stile für die inneren Button-Gruppen */
.archiv-buttons,
.pagination-buttons {
    display: flex;				/* Aktiviert das Flexbox-Layout-Modell für dieses Element. Alle direkt darin liegenden Kind-Elemente werden zu "Flex-Items" und lassen sich dadurch extrem flexibel anordnen. */
    flex-direction: row;		/* Erzwingt, dass die Elemente (Text und Buttons) waagerecht (nebeneinander) nebeneinander stehen */
    flex-wrap: wrap;            /* Saisons/Zahlen brechen bei Platzmangel sauber um */
    align-items: center;		/* Richtet alle Elemente vertikal zentriert aus. Wenn der Text beispielsweise höher ist als die Buttons (oder umgekehrt), stehen beide optisch perfekt auf einer horizontalen Mittellinie. */
}


/* ==========================================================================
   2. SAISON-ARCHIV (.context-saison)
   ========================================================================== */
.head-navigation-container.context-saison {
    gap: 15px;                  /* Abstand zwischen "Archiv:" und den Buttons */
    margin: 12px 0;
}

.archiv-label {
    font-size: 13px;
    font-weight: normal;
    color: #333;
    white-space: nowrap;        /* Verhindert Textumbruch innerhalb des Labels */
}

.archiv-buttons {
    gap: 6px;                   /* Abstand zwischen den Saison-Buttons */
}

.archiv-buttons .head-nav-link {
    padding: 6px 12px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
}


/* ==========================================================================
   3. SEITENNAVIGATION (.context-pagination)
   ========================================================================== */
.head-navigation-container.context-pagination {
    gap: 15px;                  /* Abstand zwischen "Anzahl..." und den Zahlen */
    margin: 12px 0;
}

.pagination-label {
    font-size: 13px;
    font-weight: normal;
    color: #333;
    white-space: nowrap;        /* Verhindert Textumbruch innerhalb des Labels */
}

.pagination-buttons {
    gap: 6px;                   /* Kompakter Abstand zwischen den Zahlen */
}

.pagination-buttons .head-nav-link {
    padding: 6px 12px;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
}




/* ==========================================================================
   SMARTPHONE-OPTIMIERUNG (Bildschirme bis 768px Breite)
   ========================================================================== */
@media (max-width: 768px) {
    #div_main_container {
        grid-template-columns: 1fr; /* Untereinander stapeln */
    }

    #div_main_container_links {
        border-right: none; /* Rechten Rahmen auf dem Handy entfernen */
        border-bottom: 1px solid #5A8C4F; /* Trennlinie nach unten versetzen */
        padding: 10px 15px;
    }

    #div_main_container_rechts {
        padding: 15px 10px; 
        min-height: auto; 
    }
/* Erhöht die Klickflächen (Padding) für Touch-Displays */
    .archiv-buttons .head-nav-link {
        padding: 10px 14px;
        font-size: 14px;
    }

    .pagination-buttons .head-nav-link {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    /* Sorgt für etwas mehr Abstand zwischen den Zeilen auf kleinen Displays */
    .archiv-buttons,
    .pagination-buttons {
        gap: 8px 6px;           /* Erster Wert = Zeilenabstand beim Umbrechen, zweiter = Spaltenabstand */
    }
}