/* :root ist ein CSS-Pseudoselektor für das oberste HTML-Element () */ /* Er wird oft verwendet, um globale CSS-Variablen zu definieren */ /* CSS-Variablen, die in :root definiert sind, sind überall im Dokument gültig */ :root { --pe2-header-logo: url("../../pe2/images/logo/pe2-LOGO_black.png"); --pe2-footer-logo: url("../../pe2/images/logo/pe2-LOGO_white.png"); --pe2-hero-bg: url("../../pe2/images/hero/pe2hairbeauty-011-bw-4.jpg"); --boho-main: #f3d6ce; --boho-main-text: #333333; --boho-accent: #FFE8D6; --boho-accent-text: #FFE8D6; --boho-light: #F2E8CF; --boho-light-text: #FFE8D6; --boho-bg: #FBF6F0; --boho-bg-text: #333333; --boho-secondary: #A8B5A2; --boho-secondary-text: #ffffff; --boho-section-title-text: #D36E52; --boho-section-subtitle-text: #3a3a3a; --boho-footer: #f3d6ce; --boho-footer-text: #333333; } /* Grundlayout */ html { scroll-behavior: smooth; /* sanftes Scrollen */ } button:focus { outline: none !important; box-shadow: none !important; } section { /* height: 100vh; */ /* volle Höhe */ } /* body { background-color: var(--boho-bg); color: #333; } */ .container { max-width: 1400px; /* Setze hier deine gewünschte Breite */ width: 100%; /* Optional: Setze die Breite auf 100% */ } .boho-feature-image { background-color: white; border-radius: 10px; margin: 15px; } .pe2-header-logo { content: var(--pe2-header-logo); } .pe2-footer-logo { content: var(--pe2-footer-logo); } .boho-footer { background-color: var(--boho-footer); color: var(--boho-footer-text) !important; } .boho-footer-text, .boho-footer-text * { color: var(--boho-footer-text) !important; } h6 { font-size: 16px !important; font-weight: none !important; margin-bottom: 12px; } a { color: var(--boho-main-text) !important; text-decoration: none; } a:hover { color: var(--boho-accent); } .boho-nav-item { color: var(--boho-main-text) !important; text-decoration: none; } @media only screen and (max-width: 767px) { .boho-nav-item { color: var(--boho-main-text) !important; background-color: var(--boho-main) !important; /* color: white !important; background-color: #D36E52 !important; */ } } .boho-nav-item:hover { color: var(--boho-accent); } .header-upper { /* height: 150px; */ /* only for wavy, remove it if don't use */ background-color: var(--boho-main) !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: schöner Shadow beim Scrollen */ } .hero-title { color: var(--boho-accent-text) !important; text-decoration: none; } .hero-subtitle { color: var(--boho-light-text) !important; text-decoration: none; } .hero-content.style-pe2 h1 { color: transparent; margin-bottom: 20px; -webkit-text-stroke: 2px; -webkit-text-stroke-color: black; } .hero-content.style-pe2 h2 { color: transparent; margin-bottom: 10px; -webkit-text-stroke: 1px; -webkit-text-stroke-color: black; } /* Buttons */ .theme-btn, .btn-primary { background-color: var(--boho-main); border-color: var(--boho-main); color: var(--boho-main-text); } .theme-btn:hover, .btn-primary:hover { background-color: var(--boho-accent); border-color: var(--boho-accent); } /* Überschriften / Sektionen */ .section-title h2, h1, h2, h3, h4, h5 { color: var(--boho-secondary-text); } .pe2-section-title h2, h1, h2, h3, h4, h5 { color: var(--boho-section-title-text); } .boho-feature-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: 0.15s; -o-transition: 0.15s; transition: 0.15s; background: white; color: black; border-radius: 5px; margin-bottom: 30px; padding: 25px 30px 10px; outline-color: #e8e8e8; border: 1px solid #e8e8e8; } @media only screen and (max-width: 479px) { .boho-feature-item { /* display: block; */ padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 375px) { .boho-feature-item { padding-left: 20px; padding-right: 20px; } } .boho-feature-item .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 60px; font-size: 60px; color: var(--boho-section-title-text) !important; margin: 5px 20px 15px 0; } .boho-feature-item:hover { outline: 2px solid #e8e8e8; } .boho-feature-item.style-two { border: none; outline: none; background: #1f1f1f; } .boho-feature-item.style-two .icon { width: 50px; font-size: 45px; } .boho-feature-item.style-two h4 a:not(:hover) { color: white; } .feature-item.style-two p { color: white; opacity: 0.6; } .pe2-section-subtitle { color: var(--boho-section-subtitle-text); } .boho-tab { color: black !important; } /* Formularfelder */ /* Header und Footer */ header, footer { background-color: var(--boho-main); color: #fff; } /* Hero-Bereich - Boho Overlay */ .hero-section .hero-bg-shapes { background: transparent !important; /* rgba(164, 113, 73, 0.3); */ /* Boho-Braun halbtransparent */ } .hero-section-boho { background-image: var(--pe2-hero-bg); background-size: cover; background-position: center; } /* Optional: Extra flächendeckendes Overlay */ .hero-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent !important; /* rgba(164, 113, 73, 0.15); */ z-index: 0; } .hero-section > * { position: relative; z-index: 1; } .wavyBU { --mask: radial-gradient(61.77px at 50% calc(100% - 84px), #000 99%, #0000 101%) calc(50% - 60px) 0/120px 100%, radial-gradient(61.77px at 50% calc(100% + 54px), #0000 99%, #000 101%) 50% calc(100% - 30px)/120px 100% repeat-x; -webkit-mask: var(--mask); mask: var(--mask); } .price-item .pe2-price { font-size: 16px; color: #704504; font-family: "Oswald", sans-serif; } .pe2-services { padding: 70px 50px 50px 10px; } @media only screen and (max-width: 1199px) { .pe2-services { padding-left: 0px; padding-right: 15px; } #pe2-services-img { height: 500px; } } @media only screen and (max-width: 479px) { .pe2-services { padding-left: 0px; padding-right: 15px; } #pe2-services-img { height: 400px; } } @media only screen and (max-width: 375px) { .pe2-services { padding-left: 0px; padding-right: 15px; } #pe2-services-img { height: 300px; } } @media only screen and (max-width: 767px) { .smartphone-line-height { line-height: 1.5 !important; } }