/* === Globale Resets & Basis-Styles === */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Stelle sicher, dass du die Schriftart 'Roboto' auch lädst!
Entweder per im HTML von Google Fonts:
Oder per @import am Anfang der CSS-Datei (weniger performant):
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
*/
body {
font-family: 'Roboto', sans-serif; /* Falls Roboto nicht lädt, wird sans-serif verwendet */
font-size: 16px; /* Basis-Schriftgröße */
line-height: 1.6; /* Guter Zeilenabstand für Lesbarkeit */
color: #3D5467; /* Deine primäre Textfarbe */
background-color: #E9E9E9; /* Heller Hintergrund für den Body */
display: flex; /* Ermöglicht Footer am unteren Rand */
flex-direction: column; /* Hauptachse ist vertikal */
min-height: 100vh; /* Mindestens volle Bildschirmhöhe */
}
/* Basis-Link-Styling */
a {
color: #14248A; /* Etwas stärkerer Kontrast als #3D5467, passend zum Header/Footer */
text-decoration: none; /* Standardmäßig kein Unterstrich */
transition: color 0.2s ease; /* Sanfter Farbwechsel beim Hovern */
}
a:hover {
color: #0f1a65; /* Dunklere Variante der Linkfarbe */
text-decoration: underline; /* Unterstrich beim Hovern */
}
/* Entferne Listenpunkte global - Überlege, ob das wirklich nötig ist.
Es ist oft besser, dies nur bei Navigationen etc. anzuwenden.
Die Regeln unter .site-main ul fügen sie wieder hinzu, was doppelt ist.
Alternative: Entferne diese Regel und füge `list-style: none;` nur zu `.nav-menu` etc. hinzu. */
ul {
list-style: none;
}
/* Container für zentrierten Inhalt mit maximaler Breite */
.container {
width: 90%; /* Prozentuale Breite für Flexibilität */
max-width: 1200px; /* Maximale Breite für große Bildschirme */
margin-left: auto; /* Zentriert den Container */
margin-right: auto;
/* Padding wurde entfernt, da es oft besser ist, Padding
direkt an Header/Main/Footer-Inhalten zu haben */
}
/* === Header === */
.site-header {
background-color: #14248A; /* Dunkles Blau */
padding: 15px 0; /* Etwas weniger Padding als zuvor */
/* border-bottom: 1px solid #0f1a65; /* Dunklere Trennlinie, wenn gewünscht */
width: 100%; /* Volle Breite */
color: #E9E9E9; /* Heller Text im Header */
position: sticky; /* Bleibt oben kleben beim Scrollen */
top: 0;
z-index: 1000; /* Stellt sicher, dass er über anderen Elementen ist */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leichter Schatten für Tiefenwirkung */
}
/* Verwende den .container für den Inhalt im Header */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
/* Füge hier das Padding hinzu, das vorher im .container war */
padding-left: 15px;
padding-right: 15px;
}
.header-left {
display: flex;
align-items: center;
gap: 15px; /* Etwas weniger Abstand */
}
/* Ersetze dies durch ein echtes ![]()
Tag in deinem Blade-Layout! */
.logo-placeholder img { /* Style das Bild, nicht den Platzhalter-Div */
display: block; /* Verhindert extra Platz unter dem Bild */
height: 100px; /* Höhe des Logos anpassen */
width: 100px; /* Breite des Logos anpassen */
}
/* Beispiel für den Platzhalter, falls du ihn temporär brauchst */
.logo-placeholder {
height: 100px;
width: 100px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
color: #555;
flex-shrink: 0;
/* border-radius: 50%; */
}
.site-title-header {
font-size: 1.6rem;
font-weight: 700;
/* color: inherit; <-- Entfernen oder auskommentieren, da wir es im Link direkt setzen */
margin: 0;
}
/* === ANPASSUNG HIER === */
/* Spezifisches Styling für den Titel-Link */
.site-title-header a,
.site-title-header a:link, /* Ungleich besuchter Link */
.site-title-header a:visited, /* Besuchter Link */
.site-title-header a:hover, /* Link, über dem die Maus ist */
.site-title-header a:active { /* Link, der gerade geklickt wird */
color: #e9e9e9 !important; /* Setze die Farbe explizit und mit !important, um andere Regeln sicher zu überschreiben */
text-decoration: none !important; /* Stelle sicher, dass keine Unterstreichung angewendet wird */
/* Entferne ggf. andere spezifische Hover-Effekte wie border-bottom */
border-bottom: none;
}
.header-navigation .nav-menu {
display: flex;
gap: 20px; /* Abstand zwischen Menüpunkten */
}
.header-navigation .nav-menu a {
color: #E9E9E9;
font-weight: 500;
padding: 8px 5px; /* Vertikales Padding erhöht Klickfläche */
border-bottom: 2px solid transparent; /* Platzhalter für Hover-Effekt */
transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.header-navigation .nav-menu a:hover,
.header-navigation .nav-menu a.active { /* Stil für aktiven Menüpunkt */
color: #E9E9E9; /* Heller beim Hovern */
text-decoration: none;
border-bottom-color: #ffffff; /* Linie unter aktivem/hover Link */
}
/* === Main Content === */
.site-main {
flex-grow: 1; /* Nimmt verfügbaren Platz ein -> drückt Footer runter */
padding-top: 40px;
padding-bottom: 60px; /* Mehr Platz zum Footer */
/* Die Breite wird jetzt durch den .container *innerhalb* von .site-main gesteuert */
}
/* Wenn du eine separate Container-Klasse *innerhalb* von site-main verwendest: */
.site-main .container {
background-color: #FEFEFE; /* Weißer Hintergrund für den Inhaltsblock */
padding: 30px; /* Innenabstand für den Inhaltsblock */
/*border-radius: 5px; /* Optionale abgerundete Ecken */
box-shadow: 0 3px 10px rgba(0,0,0,0.05); /* Optionaler leichter Schatten */
}
/* Überschriften-Styling (gemäß deiner Vorgabe) */
h1, .h1 { /* Klasse .h1 für Elemente, die wie h1 aussehen sollen, aber keine sind */
font-size: 20px; /* Deine Angabe */
font-weight: bold; /* Standard für h1-h6, hier explizit */
margin-bottom: 1.5rem; /* Abstand nach unten */
line-height: 1.3; /* Etwas engerer Zeilenabstand für Überschriften */
color: #14248A; /* Hauptüberschriften im dunklen Blau */
}
h2, .h2 {
font-size: 18px; /* Deine Angabe (entspricht 1.125rem bei 16px Basis) */
font-weight: bold;
margin-top: 2rem; /* Mehr Abstand nach oben */
margin-bottom: 1rem; /* Abstand nach unten */
line-height: 1.4;
color: #2c3e50; /* Dunkleres Grau/Blau für h2 */
}
h3, .h3 {
font-size: 16px; /* Deine Angabe (entspricht 1rem) */
font-weight: bold;
margin-top: 1.8rem;
margin-bottom: 0.8rem;
line-height: 1.5;
color: #34495e; /* Noch ein Grau/Blau-Ton */
}
h4, .h4 {
font-size: 14px; /* Deine Angabe (entspricht 0.875rem) */
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
color: #3D5467; /* Deine primäre Textfarbe */
}
h5, .h5 {
font-size: 12px; /* Deine Angabe (entspricht 0.75rem) */
font-weight: bold;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
color: #3D5467;
text-transform: uppercase; /* Oft für h5 verwendet */
letter-spacing: 0.5px;
}
h6, .h6 {
font-size: 11px; /* Deine Angabe (entspricht ~0.6875rem) */
font-weight: bold;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: #5a7a94; /* Hellerer Ton */
}
/* Styling für Textabsätze */
p {
margin-bottom: 1rem; /* Standardabstand unter Absätzen */
}
/* Styling für ungeordnete Listen (Aufzählungen) im Hauptinhalt */
/* Diese Regeln sind nur nötig, wenn du oben *nicht* global list-style: none setzt */
.site-main ul {
list-style-type: disc;
list-style-position: outside;
margin-left: 1.5em; /* Einzug für die Punkte */
margin-bottom: 1em;
}
.site-main ul ul {
list-style-type: circle;
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.site-main ul ul ul {
list-style-type: square;
}
.site-main li {
margin-bottom: 0.5em;
}
.site-main li:last-child {
margin-bottom: 0;
}
/* === Footer === */
.site-footer {
background-color: #14248A;
color: #ced4da; /* Helleres Grau für besseren Kontrast auf Blau */
padding: 20px 0;
margin-top: auto; /* Drückt den Footer nach unten */
width: 100%;
font-size: 0.9rem; /* Kleinere Schrift im Footer */
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Schirmen */
gap: 15px; /* Abstand, wenn Elemente umbrechen */
/* Füge hier das Padding hinzu */
padding-left: 15px;
padding-right: 15px;
}
.footer-navigation .nav-menu-footer {
display: flex;
gap: 15px; /* Etwas weniger Abstand */
}
.footer-navigation .nav-menu-footer a {
color: #ced4da;
/* Font-Size wird vom .site-footer geerbt */
}
.footer-navigation .nav-menu-footer a:hover {
color: #E9E9E9;
text-decoration: underline; /* Unterstrich auch hier beim Hovern */
}
/* === Responsive Anpassungen === */
@media (max-width: 992px) {
/* .container max-width wird wirksam, width: 90% passt sich an */
.site-title-header {
font-size: 1.5rem;
}
.header-navigation .nav-menu {
gap: 15px;
}
}
@media (max-width: 767px) {
body {
font-size: 15px; /* Ggf. Basisschrift leicht anpassen */
}
.site-header {
padding: 10px 0;
position: static; /* Sticky Header auf Mobile oft nicht ideal */
}
.header-container {
flex-direction: column;
gap: 10px;
}
.header-left {
/* Optional: Logo und Titel nebeneinander lassen, wenn genug Platz */
/* flex-direction: column; */
/* text-align: center; */
gap: 10px;
}
.site-title-header {
font-size: 1.3rem;
}
.header-navigation .nav-menu {
justify-content: center; /* Menüpunkte zentrieren */
flex-wrap: wrap;
gap: 5px 10px; /* Kleinerer Abstand */
border-top: 1px solid #0f1a65; /* Trennlinie zum Menü */
padding-top: 10px;
width: 100%; /* Volle Breite für zentrierte Links */
}
.header-navigation .nav-menu a {
padding: 5px;
border-bottom: none; /* Keine Linie unter Links auf Mobile */
}
.header-navigation .nav-menu a:hover,
.header-navigation .nav-menu a.active {
border-bottom: none;
background-color: rgba(255, 255, 255, 0.1); /* Leichter Hintergrund beim Hover */
border-radius: 3px;
}
.site-main {
padding-top: 25px;
padding-bottom: 40px;
}
.site-main .container {
padding: 20px; /* Weniger Innenabstand im Content */
}
.footer-container {
flex-direction: column;
text-align: center;
gap: 10px;
}
.footer-navigation .nav-menu-footer {
justify-content: center;
flex-wrap: wrap;
}
}
/* =========================================
Kontaktformular Styling (größtenteils übernommen, da schon gut)
========================================= */
.kontakt-form {
max-width: 700px;
margin: 3rem auto;
padding: 2rem; /* Etwas weniger Padding */
background-color: #FEFEFE;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
/* font-family geerbt von body */
border: 1px solid #e9ecef;
}
/* Füge diese Regel hinzu, falls der Formular-Container nicht im .site-main .container ist */
.kontakt-form-wrapper .container {
background-color: transparent; /* Kein weißer Hintergrund für den äußeren Container */
padding: 0;
box-shadow: none;
}
.kontakt-form .form-group {
margin-bottom: 1.5rem; /* Etwas weniger Abstand */
}
.kontakt-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #495057;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
width: 100%;
padding: 0.8rem 1rem; /* Etwas weniger Padding */
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 1rem;
color: #212529;
background-color: #fff;
box-sizing: border-box;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.kontakt-form textarea {
resize: vertical;
min-height: 120px; /* Etwas weniger Höhe */
line-height: 1.6;
}
.kontakt-form input[type="text"]:focus,
.kontakt-form input[type="email"]:focus,
.kontakt-form textarea:focus {
outline: none;
border-color: #14248A; /* Fokusfarbe passend zur Marke */
box-shadow: 0 0 0 0.2rem rgba(20, 36, 138, 0.25); /* Glow-Effekt anpassen */
}
/* Styling für Pflichtfelder (optional) */
.kontakt-form label.required::after {
content: " *";
color: #dc3545;
font-weight: normal; /* Nicht fett, damit es dezenter ist */
margin-left: 2px;
}
/* Füge die Klasse .required zu den Labels im HTML hinzu, z.B.