/*
    Gesundheitszentrum Stefanie Kober - KOMPLETT-CSS FINAL FIX
    Optimiert für Layout-Stabilität und Farbschema
*/

/* --- 1. Header & Metamenü Fix --- */
header {
    background: #ffffff;
    border-bottom: 3px solid #486272;
    padding: 0; /* Padding wird über die inneren Elemente gesteuert */
    position: relative;
    min-height: 120px;
}

header .row {
    max-width: 70em;
    margin: 0 auto;
    position: relative;
    padding: 50px 20px 20px 20px; /* Platz oben für die Meta-Leiste */
}

.website-header {
    color: #486272;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 1.6em;
    text-align: right;
    width: 100%;
}

.meta {
text-align:right;
}

#meta-bottom {
text-align: center;	
}

.meta ul {
margin:0;
padding:0;
display:inline;
}

.meta ul li {
list-style-type:none;
font-size:90%;
text-transform:uppercase;
display:inline-block;
margin:0;
padding:0 1em;
}

.meta ul li a:link,
.meta ul li a:visited {
text-decoration:none;
color:#486272;
}

.meta ul li a:hover,
.meta ul li a:visited:hover,
.meta ul li a:active,
.meta ul li a:visited:active {
color:#000;
}


/* --- 2. Navigation & Hero --- */
#nav {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    clear: both;
}

#hero {
    background: #486272;
    padding: 3px 0;
}

#hero p {
    font-family: "Poppins", sans-serif;
    color: #ffffff;
    line-height: 1.6em;
    margin: 10px;
}

#hero h1, #hero h2 {
    color: #ffffff;
    font-weight: 600;
}

h1, h2, h3 { color: #486272; }

/* Akzentbalken links */
.sp {
    border-left: 5px #486272 solid;
    padding-left: 15px;
    margin: 20px 0;
    color: #444;
}



/* --- 4. Footer & Hilfsmittel --- */
footer {
    padding: 60px 0;
    background-color: #486272;
    color: #ffffff;
    text-align: center;
}

footer a { color: #80CBC4; font-weight: bold; }

/* --- Optimierte Fußzeile --- */
.site-footer {
    background-color: #486272; /* Das dunkle Slate-Grau aus deinem Design */
    color: #ffffff;
    padding: 40px 20px;
    font-family: "Poppins", sans-serif;
    border-top: 4px solid #486272; /* Petrol-Akzentlinie oben */
}

.footer-row {
    max-width: 70em;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Copyright links, Links rechts */
    align-items: center;
}

.copyright {
    font-size: 0.95em;
    letter-spacing: 0.5px;
}

.copyright strong {
    color: #80CBC4; /* Heller Petrol-Ton für den Namen */
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #93A0B7;
    text-decoration: underline;
}

/* Responsive: Auf dem Handy alles zentrieren und untereinander */
@media (max-width: 600px) {
    .footer-row {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .footer-links a {
        margin: 0 10px;
    }
}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; 
bottom:5px; right:5px; width:30px; height:30px; line-height:26px; border-radius:5px; 
font-size:1rem; text-align:center; opacity:.2; text-decoration:none;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}

#backtotop {
 
    background-color: #486272;
	color:#fff;
  
}

.breadcrumbs { background: transparent; height: auto; padding: 5px 0; }

/* --- 5. Responsive --- */
@media (max-width: 768px) {
    header { min-height: auto; }
    .meta { position: relative; right: 0; width: 100%; text-align: center; border-radius: 0; }
    .meta ul { justify-content: center; }
    .website-header { text-align: center; padding: 20px 0; }
    header .row { padding: 0; }
}