/* hausfriseur-bochum.de — Site-Styles 2026
   Custom-Layer auf Bootstrap 5. Bewahrt die Markenfarben (Grün + Bordeaux),
   ersetzt aber das alte Stockfoto-BG durch einen ruhigen Cream-Untergrund. */

:root {
    --hf-green:        #009900;
    --hf-green-dark:   #007a00;
    --hf-bordeaux:     #990000;
    --hf-bordeaux-2:   #cc0066;
    --hf-text:         #2a2a2a;
    --hf-muted:        #666;

    --hf-cream-1:      #fcfaf5;
    --hf-cream-2:      #f4ede0;
    --hf-cream-3:      #ece2d3;

    --bs-link-color:   var(--hf-bordeaux);
    --bs-link-hover-color: var(--hf-bordeaux-2);
}

html, body { height: 100%; }

body {
    color: var(--hf-text);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    background-color: var(--hf-cream-1);
    background-image:
        /* zarte Brand-Glanzlichter — kein Bild, nur Farbnebel */
        radial-gradient(ellipse 60vw 40vh at 0% 0%,   rgba(0, 153, 0, 0.05),    transparent 60%),
        radial-gradient(ellipse 60vw 40vh at 100% 0%, rgba(153, 0, 0, 0.04),    transparent 60%),
        radial-gradient(ellipse 80vw 50vh at 50% 100%, rgba(153, 0, 0, 0.03),   transparent 60%),
        linear-gradient(160deg, var(--hf-cream-1) 0%, var(--hf-cream-2) 60%, var(--hf-cream-3) 100%);
    background-attachment: fixed;
}

main { flex: 1 0 auto; }

/* Header */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 3px solid var(--hf-bordeaux);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.site-header .brand img { max-height: 64px; width: auto; }
.site-header .phone {
    color: var(--hf-bordeaux);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
}
.site-header .phone:hover { color: var(--hf-bordeaux-2); }

/* Navi */
.navbar-hf .nav-link {
    color: var(--hf-bordeaux);
    font-weight: 600;
    border-radius: .375rem;
    padding: .4rem .9rem;
}
.navbar-hf .nav-link:hover,
.navbar-hf .nav-link:focus {
    background: var(--hf-bordeaux);
    color: #fff;
}
.navbar-hf .nav-link[aria-current="page"] {
    background: var(--hf-green);
    color: #fff;
}

/* Mood-Strip — vier Stimmungsbilder unter dem Header */
.mood-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding: .5rem 0 0;
    margin: 0;
}
.mood-strip picture {
    display: block;
    aspect-ratio: 24 / 9;
    overflow: hidden;
    position: relative;
}
.mood-strip img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Köpfe sitzen meist im oberen Drittel — Anker hochziehen, damit
       sie beim 24:9-Crop nicht abgeschnitten werden. */
    object-position: 50% 28%;
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
    filter: saturate(.95) contrast(1.02);
}
.mood-strip picture:hover img { transform: scale(1.04); }
@media (max-width: 768px) {
    .mood-strip { grid-template-columns: repeat(2, 1fr); gap: .25rem; }
    .mood-strip picture { aspect-ratio: 16 / 10; }
}

/* Inhalts-Card mit feinem Brand-Streifen oben */
.page-card {
    position: relative;
    background: #fff;
    border: 1px solid #ece2d3;
    border-radius: .75rem;
    padding: 2rem 1.75rem;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.page-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--hf-green) 0%,
        var(--hf-green) 35%,
        var(--hf-bordeaux) 65%,
        var(--hf-bordeaux) 100%);
}
.page-card h1, .page-card h2, .page-card h3 {
    color: var(--hf-bordeaux);
}
.page-card a { color: var(--hf-bordeaux); font-weight: 600; }
.page-card a:hover { color: #000; }

/* Footer */
.site-footer {
    background: #1a1a1a;
    color: #ddd;
    font-size: .85rem;
    padding: 1rem 0;
    margin-top: 2rem;
}
.site-footer a { color: #fff; text-decoration: underline; }
.site-footer a:hover { color: var(--hf-bordeaux-2); }

/* Anfrage-Formular */
.form-anfrage label { font-weight: 600; }
.form-anfrage .honey { position: absolute; left: -10000px; }

/* Print */
@media print {
    .site-header nav, .site-footer, .mood-strip { display: none; }
    body { background: #fff; }
    .page-card { box-shadow: none; border: none; }
    .page-card::before { display: none; }
}