/*
Theme Name: Friseurstube an der Schleuse
Author: ChatGPT
Version: 1.0
Description: Professionelles WordPress Theme im dezenten Khaki-Stil.
*/
body{margin:0;/*font-family:Arial,sans-serif;*/color:#333;background:#f8f7f2}
header{background:#b7ad7a; /*padding:20px*/}
header h1{margin:0;color:#fff}
nav a{color:#fff;margin-right:18px;text-decoration:none;font-weight:bold}
h1 a{color:#fff;margin-right:18px;text-decoration:none;font-weight:bold}
.container{max-width:1100px;margin:auto;padding:40px 20px}
h1,h2,h3{color:#6f6946}
footer{background:#e4e0c8;padding:20px;text-align:center;margin-top:40px}
.card{background:#fff;padding:24px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
table{width:100%;border-collapse:collapse}
td,th{padding:10px;border-bottom:1px solid #ddd; text-align: left;}
iframe{border:0;border-radius:8px}
/*
img{max-width:100%;border-radius:8px}
*/
body {
    font-family: 'Inter', sans-serif;
    color: #333;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.card-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* wichtig für Handy */
    margin-top: 20px;
	margin-bottom: 20px;
	
	align-items: stretch;
}



.card.fixed {
    flex: 0 0 280px; /* feste Breite links */
}

.card.grow {
    flex: 1; /* nimmt Rest der Breite */
}

/* optional bessere Map */
.card-wrapper .card iframe {
    width: 100%;
    height: 250px;
    border: 0;
    border-radius: 8px;
}


/* --------------------------------------------------------------------------------------  */

.hero-image {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 12px;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* dunkler Overlay */
.hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* Text über Bild */
.hero-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 2;
}

.hero-overlay h1 {
    font-size: 42px;
    margin: 0;
}

.hero-overlay p {
    font-size: 18px;
    margin: 10px 0 20px;
}

/* Button */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background: #b7ad7a; /* Khaki */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s;
}

.btn:hover {
    background: #a29666;
}

/* -------------------------------------------------------------------- */
.phone-link {
    color: #333;
    text-decoration: none;
}

.phone-link:hover {
    color: #6f6946; /* Khaki Hover */
}

/* -------------------------------------------------------------------- */

@media (max-width: 768px) {
    .card-wrapper {
        flex-direction: column;
    }

    .hero {
        height: 350px;
    }
}