/* Haarstudio Belinda – Neues Design */

/* Grundgestaltung */
body {
    background-color: #ffffff;
    color: #29292d;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.75;
}

/* Überschriften */
h1, h2, h3 {
    font-family: Georgia, serif;
    font-weight: 400;
}

/* Links */
a {
    text-underline-offset: 5px;
}

a:hover {
    color: #c71637;
}

/* Hauptnavigation */
.container-header {
    background: #ffffff;
    background-image: none;
    color: #29292d;
    border-bottom: 1px solid #e9e9ec;
}

.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .mod-menu a {
    color: #29292d;
}

/* Rote Akzente */
.btn-primary {
    background-color: #cc1738;
    border-color: #cc1738;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #ae102e;
    border-color: #ae102e;
    color: #ffffff;
}

/* Fußbereich */
.container-footer {
    background: #242428;
    background-image: none;
    color: #dddddd;
}

.container-footer a {
    color: #dddddd;
}
/* Haarstudio Belinda – Startbereich */

.belinda-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #f4f4f5;
    min-height: 540px;
    overflow: hidden;
}

.belinda-hero-text {
    padding: 65px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.belinda-label {
    color: #c71637;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.belinda-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(42px, 5vw, 76px);
    line-height: 1.08;
    margin: 20px 0 28px;
}

.belinda-hero h1 em {
    color: #cc1738;
    font-weight: 400;
}

.belinda-hero-text > p:not(.belinda-label) {
    color: #626268;
    font-size: 15px;
}

.belinda-micro {
    margin-top: 20px;
    font-size: 12px !important;
}

.belinda-hero-photo img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
}

/* Darstellung auf Smartphones */

@media (max-width: 800px) {
    .belinda-hero {
        grid-template-columns: 1fr;
    }

    .belinda-hero-text {
        padding: 40px 25px;
    }

    .belinda-hero-photo img {
        height: 350px;
        min-height: 0;
    }
}
/* Haarstudio Belinda – dunkle Informationsleiste */

.belinda-infoleiste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #29292d;
    color: #ffffff;
    padding: 28px 35px;
    gap: 25px;
}

.belinda-info-punkt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 20px;
    border-left: 2px solid #cc1738;
}

.belinda-info-punkt strong {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.belinda-info-punkt span {
    color: #ccccd0;
    font-size: 13px;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-infoleiste {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 15px;
    }

    .belinda-info-punkt {
        padding: 8px 15px;
    }
}
/* Haarstudio Belinda – Über uns */

.belinda-ueber-uns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    padding: 85px 45px;
    background-color: #ffffff;
}

.belinda-ueber-uns-bild img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 4px;
}

.belinda-ueber-uns-text h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #29292d;
    margin: 15px 0 25px;
}

.belinda-ueber-uns-text p {
    color: #626268;
    font-size: 16px;
    line-height: 1.8;
}

.belinda-ueber-uns-text .belinda-label {
    color: #c71637;
    font-size: 11px;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-ueber-uns {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 25px;
    }

    .belinda-ueber-uns-bild img {
        height: 320px;
    }
}
/* Haarstudio Belinda – Unsere Leistungen */

.belinda-leistungen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    padding: 85px 45px;
    background-color: #f4f4f5;
}

.belinda-leistungen-text h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #29292d;
    margin: 15px 0 25px;
}

.belinda-leistungen-text p {
    color: #626268;
    font-size: 16px;
    line-height: 1.8;
}

.belinda-leistungen-text .belinda-label {
    color: #c71637;
    font-size: 11px;
}

.belinda-leistungen-text ul {
    margin-top: 25px;
    padding-left: 22px;
}

.belinda-leistungen-text li {
    margin-bottom: 12px;
    color: #29292d;
}

.belinda-leistungen-bild img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 4px;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-leistungen {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 25px;
    }

    .belinda-leistungen-bild img {
        height: 320px;
    }
}
/* Haarstudio Belinda – Unsere Leistungen */

.belinda-leistungen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    padding: 85px 45px;
    background-color: #f4f4f5;
}

.belinda-leistungen-text h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #29292d;
    margin: 15px 0 25px;
}

.belinda-leistungen-text p {
    color: #626268;
    font-size: 16px;
    line-height: 1.8;
}

.belinda-leistungen-text .belinda-label {
    color: #c71637;
    font-size: 11px;
}

.belinda-leistungen-text ul {
    margin-top: 25px;
    padding-left: 22px;
}

.belinda-leistungen-text li {
    margin-bottom: 12px;
    color: #29292d;
}

.belinda-leistungen-bild img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 4px;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-leistungen {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 25px;
    }

    .belinda-leistungen-bild img {
        height: 320px;
    }
}
/* Haarstudio Belinda – Hochzeit & festliche Frisuren */

.belinda-hochzeit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 65px;
    padding: 85px 45px;
    background-color: #29292d;
    color: #ffffff;
}

.belinda-hochzeit-bild img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 4px;
}

.belinda-hochzeit-text h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #ffffff;
    margin: 15px 0 25px;
}

.belinda-hochzeit-text p {
    color: #dddddf;
    font-size: 16px;
    line-height: 1.8;
}

.belinda-hochzeit-text .belinda-label {
    color: #ff708a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-hochzeit {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 50px 25px;
    }

    .belinda-hochzeit-bild img {
        height: 320px;
    }
}
/* Haarstudio Belinda – Preise */

.belinda-preise {
    background-color: #ffffff;
    padding: 85px 45px;
}

.belinda-preise > h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #29292d;
    margin: 15px 0 25px;
}

.belinda-preise > p {
    color: #626268;
    line-height: 1.8;
}

.belinda-preise > .belinda-label {
    color: #c71637;
    font-size: 11px;
}

.belinda-preise-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 45px;
    margin-top: 45px;
}

.belinda-preise-gruppe {
    min-width: 0;
}

.belinda-preise-gruppe h3 {
    font-family: Georgia, serif;
    font-size: 27px;
    color: #29292d;
    padding-bottom: 15px;
    border-bottom: 2px solid #cc1738;
}

.belinda-preis-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #e9e9ec;
}

.belinda-preis-zeile span {
    color: #29292d;
}

.belinda-preis-zeile strong {
    color: #29292d;
    white-space: nowrap;
}

.belinda-preise .belinda-preise-hinweis {
    margin-top: 40px;
    font-size: 13px;
    color: #73737a;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-preise {
        padding: 50px 25px;
    }

    .belinda-preise-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .belinda-preis-zeile {
        gap: 12px;
    }
}
/* Haarstudio Belinda – Anfahrt & Öffnungszeiten */

.belinda-anfahrt {
    background-color: #f4f4f5;
    padding: 85px 45px;
}

.belinda-anfahrt > h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.5vw, 48px);
    line-height: 1.2;
    color: #29292d;
    margin: 15px 0 35px;
}

.belinda-anfahrt > .belinda-label {
    color: #c71637;
    font-size: 11px;
}

.belinda-anfahrt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
}

.belinda-anfahrt h3 {
    font-family: Georgia, serif;
    font-size: 26px;
    color: #29292d;
    margin-bottom: 20px;
}

.belinda-anfahrt p {
    color: #626268;
    line-height: 1.8;
}

.belinda-anfahrt strong {
    color: #29292d;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-anfahrt {
        padding: 50px 25px;
    }

    .belinda-anfahrt-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
/* Haarstudio Belinda – Abschlussbereich */

.belinda-abschluss {
    background-color: #cc1738;
    color: #ffffff;
    padding: 85px 30px;
    text-align: center;
}

.belinda-abschluss-inhalt {
    max-width: 750px;
    margin: 0 auto;
}

.belinda-abschluss-label {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.belinda-abschluss h2 {
    font-family: Georgia, serif;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.2;
    color: #ffffff;
    margin: 20px 0;
}

.belinda-abschluss-inhalt > p {
    color: #ffffff;
    line-height: 1.8;
}

.belinda-abschluss-button {
    display: inline-block;
    margin-top: 25px;
    padding: 15px 30px;
    background-color: #ffffff;
    color: #cc1738;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.belinda-abschluss-button:hover {
    background-color: #f4f4f5;
    color: #ae102e;
}

/* Smartphone-Ansicht */

@media (max-width: 800px) {
    .belinda-abschluss {
        padding: 55px 25px;
    }

    .belinda-abschluss-button {
        max-width: 100%;
    }
}
/* Korrektur: Termin anfragen im Hauptmenü */

.container-header .mod-menu a.belinda-menue-termin,
.container-header .mod-menu li.belinda-menue-termin > a,
.container-header .mod-menu .belinda-menue-termin > a {
    display: inline-block;
    background-color: #cc1738 !important;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.container-header .mod-menu a.belinda-menue-termin:hover,
.container-header .mod-menu li.belinda-menue-termin > a:hover {
    background-color: #ae102e !important;
    color: #ffffff !important;
}
/* Test: Alle Menüpunkte sichtbar machen */

.container-header .mod-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

.container-header .mod-menu > li {
    display: block !important;
}

.container-header .mod-menu > li > a {
    color: #29292d !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Terminbutton weiterhin rot */
.container-header .mod-menu a.belinda-menue-termin {
    background-color: #cc1738 !important;
    color: #ffffff !important;
}
/* Haarstudio Belinda – breiter Startseitenbereich */

body:has(.belinda-hero) .site-grid {
    grid-template-columns:
        [full-start] minmax(0, 1fr)
        [main-start] minmax(0, 1fr)
        [main-end] minmax(0, 1fr)
        [full-end];
}

body:has(.belinda-hero) .container-component {
    grid-column: full-start / full-end;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

body:has(.belinda-hero) .com-content-article__body {
    width: 100%;
}
/* Haarstudio Belinda – Breitenkorrektur */

body:has(.belinda-hero) .site-grid {
    display: block !important;
}

body:has(.belinda-hero) .container-component,
body:has(.belinda-hero) main,
body:has(.belinda-hero) .com-content-article,
body:has(.belinda-hero) .com-content-article__body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

body:has(.belinda-hero) .container-component {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

body:has(.belinda-hero) .belinda-hero {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 800px) {
    body:has(.belinda-hero) .belinda-hero {
        grid-template-columns: 1fr;
    }
}
/* Haarstudio Belinda – kompakter Kopfbereich */

.container-header {
    padding-top: 0;
    padding-bottom: 0;
}

.container-header .navbar-brand {
    margin-top: 0;
    margin-bottom: 0;
}

.container-header .container-nav {
    padding-top: 10px;
    padding-bottom: 10px;
}

.container-header .navbar-brand img {
    max-width: 100%;
    height: auto;
}
/* Haarstudio Belinda – Schriftzug im Kopfbereich */

.container-header .navbar-brand a {
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: #29292d !important;
    text-decoration: none !important;
}

.container-header .navbar-brand a:hover {
    color: #cc1738 !important;
}

@media (max-width: 800px) {
    .container-header .navbar-brand a {
        font-size: 24px;
    }
}
/* Haarstudio Belinda – Schriftzug wie im Originalbanner */

.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .navbar-brand .site-title {
    font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif !important;
    font-size: clamp(28px, 3vw, 43px) !important;
    font-weight: 300 !important;
    letter-spacing: -1px;
    color: #ffffff !important;
    -webkit-text-stroke: 1.5px #ed1741;
    paint-order: stroke fill;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.container-header .navbar-brand a:hover {
    color: #ffffff !important;
}

@media (max-width: 800px) {
    .container-header .navbar-brand,
    .container-header .navbar-brand a,
    .container-header .navbar-brand .site-title {
        font-size: 27px !important;
        -webkit-text-stroke: 1px #ed1741;
    }
}
/* Haarstudio Belinda – Schriftzug optimieren */

.container-header .navbar-brand {
    display: inline-block;
    background-color: #929298;
    padding: 8px 16px;
    border-radius: 3px;
}

.container-header .navbar-brand a,
.container-header .navbar-brand .site-title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(32px, 3.5vw, 48px) !important;
    font-weight: 500 !important;
    letter-spacing: -1.5px;
    color: #ffffff !important;
    -webkit-text-stroke: 2px #ed1741;
    paint-order: stroke fill;
    text-decoration: none !important;
    text-shadow: none;
}

@media (max-width: 800px) {
    .container-header .navbar-brand {
        padding: 6px 10px;
    }

    .container-header .navbar-brand a,
    .container-header .navbar-brand .site-title {
        font-size: 29px !important;
        -webkit-text-stroke: 1.5px #ed1741;
    }
}
/* Haarstudio Belinda – roter Footer */
.container-footer {
    background: #b7192f;
    color: #ffffff;
}

.container-footer a {
    color: #ffffff;
    text-decoration: none;
}

.container-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}
/* Footer-Menü im roten Bereich – weiße Schrift */
.belinda-footer-links a,
.belinda-footer-links a:visited {
    color: #ffffff !important;
    text-decoration: none;
}

.belinda-footer-links a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}
/* Visforms – Kontrollkästchen deutlicher anzeigen */
.visforms input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #b7192f;
    border: 2px solid #555;
    cursor: pointer;
}
/* Haarstudio Belinda – Links im roten Abschlussbereich */
.belinda-footer-links {
    margin-top: 30px;
    text-align: center;
}

.belinda-footer-links a {
    color: #ffffff !important;
}
/* Footer-Links nebeneinander */
.belinda-footer-links ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    list-style: none;
    padding: 0;
    margin: 25px 0 0;
}

.belinda-footer-links li {
    margin: 0;
}

.belinda-footer-links a {
    color: #ffffff !important;
    text-decoration: none;
}

.belinda-footer-links a:hover {
    text-decoration: underline;
}
/* Haarstudio Belinda – Footer-Menü waagerecht */
.belinda-footer-links .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    padding: 0 !important;
    margin-top: 25px !important;
    list-style: none !important;
}

.belinda-footer-links .mod-menu > li {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}

.belinda-footer-links .mod-menu a {
    color: white !important;
}
/* Telefon-Button nur auf Smartphones anklickbar */

/* PC und Tablet */
@media (min-width: 768px) {
    .belinda-telefon-link {
        pointer-events: none !important;
        cursor: default !important;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .belinda-telefon-link {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}
/* Telefon-Link auf PC und Tablet deaktivieren */
@media screen and (min-width: 768px) {
    a.belinda-abschluss-button[href^="tel:"] {
        pointer-events: none !important;
        cursor: default !important;
    }
}

/* Auf Smartphones aktiv lassen */
@media screen and (max-width: 767px) {
    a.belinda-abschluss-button[href^="tel:"] {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}
/* Haarstudio Belinda – einheitlicher roter Footer */
.container-footer {
    background: #c8102e !important;
}

.container-footer .belinda-abschluss {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* Haarstudio Belinda – Telefon-Button im Footer */
.container-footer .belinda-abschluss-button,
.container-footer .belinda-abschluss-button:visited {
    color: #b7192f !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
}

.container-footer .belinda-abschluss-button:hover {
    color: #b7192f !important;
}
/* Haarstudio Belinda – kompakter roter Footer */
.container-footer {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.container-footer .belinda-abschluss {
    padding: 15px 20px !important;
    min-height: 0 !important;
}

.container-footer .belinda-abschluss h2 {
    margin: 5px 0 10px !important;
}

.container-footer .belinda-abschluss p {
    margin-bottom: 10px !important;
}
/* Haarstudio Belinda – extra flacher Footer */
.container-footer {
    padding: 5px 15px !important;
    gap: 0 !important;
}

.container-footer .belinda-abschluss {
    padding: 5px 15px !important;
    min-height: 0 !important;
}

.container-footer .belinda-abschluss h2 {
    margin: 2px 0 5px !important;
}

.container-footer .belinda-abschluss p {
    margin: 3px 0 6px !important;
}

.container-footer .belinda-abschluss-button {
    padding: 7px 18px !important;
}

.container-footer .mod-menu {
    margin: 5px 0 !important;
}