/* Registriert die normale Schriftart */
@font-face {
    font-family: 'impact';
    src: url('fonts/impact.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'NeueAachen';
    src: url('fonts/NeueAachenProMedium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Grundkonfiguration für Vollbild ohne Standard-Scrollbalken */
/* Der äußere Browser-Hintergrund */
html, body {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    font-family: sans-serif;
    background-color: #eef0f3; /* Ein schöner, neutraler Hintergrund für die Ränder links und rechts */
}

/* Die eigentliche Website (Jetzt zentriert in der Mitte) */
.site-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* GEÄNDERT: Von height auf min-height */
    color: #444;
    max-width: 1050px;        
    width: 100%;             
    margin: 0 auto;          
    background-color: #ffffff; 
    box-shadow: 0px 20px 10px #555555;; 
}


/* Horizontaler Header */
.main-header {
    height: 80px;
    background-color: #333; /* Hintergrundfarbe bei Bedarf anpassen */
	background: url(../images/banner.png) no-repeat left bottom #1052ad;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 2px solid #ddd;
	min-height: 150px;
}

.main-header img {
    /*max-height: 60px;*/
    width: auto;
}


/* Die obere Menüleiste (Der schwarze Balken) */
.top-navbar {
    background-color: #000000; /* Komplett schwarz wie auf dem Bild */
    border-bottom: 2px solid #ddd; 
    padding: 15px 20px 0 20px;  /* WICHTIG: Unten 0 Padding, damit die Tabs unten aufsitzen */
    min-height: 50px;          /* Erhöhte Mindesthöhe für die Reiter */
    display: flex;
    align-items: flex-end;     /* Richtet alle Tabs am unteren Rand aus */
}

/* Die Liste der Menüpunkte */
.top-navbar ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: flex-end;     /* Drückt die Tabs nach unten */
}

/* Die einzelnen Reiter (Die weißen Boxen) */
.top-navbar li {
    
    background-color: #ffffff; /* Weißer Hintergrund der Tabs */
    border: 1px solid #ccc;    /* Dezente Umrandung der Boxen */
    border-bottom: none;       /* Keine Linie unten, damit es wie ein Reiter wirkt */
    border-top-left-radius: 6px;  /* Abgerundete Ecke oben links */
    border-top-right-radius: 6px; /* Abgerundete Ecke oben rechts */
}

/* Die Links in den Reitern */
.top-navbar a {
    color: #333333;            /* Dunkelgraue Schrift */
    text-decoration: none;
    display: block;
    padding: 8px 16px;         /* Innenabstand für die Button-Form */
    font-size: 14px;
    font-family: sans-serif;
}

/* --- EFFEKTE FÜR DEN AKTIVEN / ERSTEN REITER --- */
/* Macht den ersten Reiter (z.B. Startseite) größer und fett wie auf dem Bild */
/* .top-navbar li:first-child { */
    /* background-color: #ffffff; */
    /* border-color: #bbbbbb; */
/* } */

/* .top-navbar li:first-child a { */
    /* font-weight: bold;         /* Fette Schrift */ */
    /* font-size: 16px;           /* Etwas größere Schrift */ */
    /* padding: 10px 20px;        /* Mehr Padding, damit der Tab höher und breiter wird */ */
    /* color: #000000;            /* Knallschwarzer Text */ */
/* } */

/* /* Hover-Effekt für die anderen Reiter beim Drüberfahren */ */
/* .top-navbar li:not(:first-child):hover { */
    /* background-color: #f5f5f5; /* Wird beim Drüberfahren ganz leicht grau */ */
/* } */

/* --- EFFEKTE FÜR DEN DYNAMISCH AKTIVEN REITER --- */

/* Standard-Zustand beim ersten Laden der Website (für die Startseite) */
.top-navbar li:first-child,
.top-navbar li.active {
    background-color: #ffffff;
    border-color: #bbbbbb;
}

.top-navbar li:first-child a,
.top-navbar li.active a {
    font-weight: bold;         /* Fette Schrift */
    font-size: 16px;           /* Größere Schrift */
    padding: 10px 20px;        /* Macht den aktiven Tab höher und breiter */
    color: #000000;            /* Knallschwarzer Text */
}

/* WICHTIG: Wenn ein ANDERER Tab aktiv wird, muss der erste Tab wieder normal klein werden */
.top-navbar li.active ~ li:first-child, /* Verhindert Fehler */
.top-navbar:has(li.active) li:first-child:not(.active) {
    background-color: #ffffff;
    border-color: #ccc;
}
.top-navbar:not(:has(li.active)) ~ .main-body .sidebar-menue li:first-child a {
    font-weight: bold;
    color: #000000;
}

.top-navbar:has(li.active) li:first-child:not(.active) a {
    font-weight: normal;
    font-size: 14px;
    padding: 8px 16px;
    color: #333333;
}

/* Hover-Effekt für alle Reiter, die gerade NICHT aktiv sind */
.top-navbar li:not(.active):hover {
    background-color: #f5f5f5; 
}

/* Unterer Bereich (Teilt sich in Sidebar links und Inhalt rechts) */
.main-body {
    display: flex;
    flex: 1;
    overflow: hidden; /* Verhindert das Scrollen des gesamten Bodys */
	 
}
.main-frame {
	
	margin-top: 45px;
}
.cb 
{
font-family: 'NeueAachen', sans-serif;
font-weight: bold;
color: #1052ad;
display: inline;
font-size:64px;
margin-bottom: 30px;
	
}
.trans {
font-family: 'impact', sans-serif;
font-weight: normal;
color: #1052ad;
display: inline;
margin-bottom: 30px;
 font-size: 56px;
}
.pic {
	margin-top: 20px;
	margin-bottom: 40px;
}

/* Linkes vertikales Menü */
.sidebar-menue {
    width: 260px;
    background-color: #fcfcfc; /* Ganz leichtes Off-White */
    border: 1px solid #e2e2e2;  /* Der feine Außenrahmen */
    border-radius: 4px;        /* Minimal abgerundete Ecken */
    padding: 20px;
    margin: 20px;              /* Gibt der Box Abstand zum Rand */
    align-self: flex-start;    /* Verhindert, dass die Box sich unendlich nach unten zieht */
}

/* Die Überschrift "Hauptmenü" */
.menu-title {
    margin: 0 0 25px 0;        /* Abstand nach unten zur Liste */
    font-size: 22px;
    font-weight: normal;       /* Nicht zu dick, genau wie auf dem Bild */
    color: #333333;
    font-family: sans-serif;
}

/* Die Liste an sich */
.sidebar-menue ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Die einzelnen Listeneinträge erhalten die Trennlinie */
.sidebar-menue li {
    border-bottom: 1px solid #e8e8e8; /* Die feine Trennlinie unter den Punkten */
}

/* Der letzte Menüpunkt benötigt keine Trennlinie mehr unten */
.sidebar-menue li:last-child {
    border-bottom: none;
}

/* Die eigentlichen Links */
.sidebar-menue a {
    color: #555555;            /* Angenehmes Dunkelgrau für die normalen Links */
    text-decoration: none;
    display: block;
    padding: 15px 0;           /* Großer Klickbereich und Abstand zwischen den Linien */
    font-size: 15px;
	font-weight: normal; /* Verhindert, dass unkontrolliert Text fett wird */
    transition: color 0.2s;
}



/* Wenn man mit der Maus über die Links fährt */
.sidebar-menue a:hover {
    color: #000000;            /* Wird beim Drüberfahren schwarz */
}

/* Für den fetten Text (wie bei Startseite auf dem Bild) */
/* Tipp: Du kannst deinem aktiven Link in HTML/PHP die Klasse class="active" geben */
.sidebar-menue a.active { 
    font-weight: bold;
    color: #222222;
}


/* Rechter Bereich (Inhalt + Footer) */
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Nur dieser Bereich scrollt! */
}

/* Der eigentliche Textbereich */
.content {
    flex: 1;
    padding: 30px;
	padding-top: 0px;
}

/* Der Footer klebt immer unten am Inhalt */
.footer {
	
    background-color: #555;
    color: white;
    padding: 10px 30px;
    text-align: center;
	z-index: 10;
}