:root {
  --birkle-brand-red: #69070d;
  --birkle-control-radius: 5px;
  --birkle-image-radius: 8px;
  --birkle-header-logo-size: 90px;
}

/* Elementor uses deliberate image bleeds on wide screens. Keep those visual
   bleeds inside the viewport so no page can scroll sideways. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Static-export fallback for the homepage hero. Elementor normally creates
   this slideshow at runtime, but its split WordPress bundles are not part of
   the static deployment. Keep the original local salon photo visible even
   when that optional runtime is unavailable. */
.elementor-41 .elementor-element.elementor-element-28c65bb2 {
  background-image: url("friseurbirkle.de/wp-content/uploads/2026/08/ab2bc574-53a8-4ec4-8efb-55f0b406f515-2048x1366.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.elementor-41 .elementor-element.elementor-element-28c65bb2 > .birkle-hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.elementor-41 .elementor-element.elementor-element-28c65bb2::before {
  z-index: 1;
  pointer-events: none;
}

.elementor-41 .elementor-element.elementor-element-28c65bb2 > .e-con-inner {
  position: relative;
  z-index: 2;
}

.birkle-hero-slideshow__slide {
  position: absolute;
  inset: -2%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.1s ease-in-out;
}

.birkle-hero-slideshow__slide.is-active {
  opacity: 1;
  animation: birkle-hero-drift 8.2s ease-out both;
}

@keyframes birkle-hero-drift {
  from { transform: scale(1.055); }
  to { transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .birkle-hero-slideshow__slide {
    transition: none;
    transform: none;
  }

  .birkle-hero-slideshow__slide.is-active {
    animation: none;
  }
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

/* Compact shared header and logo across every local page. */
.elementor-126 .elementor-element.elementor-element-68d23ca {
  --padding-top: 12px;
  --padding-bottom: 12px;
  --padding-left: 16px;
  --padding-right: 16px;
}

.elementor-126 .elementor-element.elementor-element-61dab51 {
  --container-widget-width: var(--birkle-header-logo-size);
  width: var(--birkle-header-logo-size) !important;
  max-width: var(--birkle-header-logo-size) !important;
  flex: 0 0 var(--birkle-header-logo-size);
}

.elementor-126 .elementor-element.elementor-element-61dab51 img[alt="logo"] {
  display: block;
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  :root {
    --birkle-header-logo-size: 82px;
  }
}

/* Contact form: accessible consent, spam protection and inline feedback. */
[data-birkle-contact-form] .birkle-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

[data-birkle-contact-form] .birkle-form-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

[data-birkle-contact-form] .birkle-form-consent input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--birkle-brand-red);
}

[data-birkle-contact-form] .birkle-form-consent label,
[data-birkle-contact-form] .birkle-form-hint,
[data-birkle-contact-form] .birkle-form-status {
  font-size: 14px;
  line-height: 1.5;
}

[data-birkle-contact-form] .birkle-form-consent a {
  color: var(--birkle-brand-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-birkle-contact-form] .birkle-form-hint {
  margin: 0;
  color: #555;
}

[data-birkle-contact-form] .birkle-form-status {
  min-height: 24px;
  margin: 10px 0 0;
  font-weight: 600;
}

[data-birkle-contact-form] .birkle-form-status.is-error {
  color: #9b1c1c;
}

[data-birkle-contact-form] .birkle-form-status.is-ok {
  color: #176b35;
}

[data-birkle-contact-form] button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.68;
}

/* Accessible price-list lightbox. The original image links remain as a
   no-JavaScript fallback and can also be opened in a separate tab. */
.price-list-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--birkle-image-radius);
  background: transparent;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.price-list-dialog::backdrop {
  background: rgba(15, 12, 13, 0.82);
  backdrop-filter: blur(3px);
}

.price-list-dialog__panel {
  position: relative;
  max-height: calc(100vh - 32px);
  padding: 58px 18px 22px;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}

.price-list-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 18px;
  width: min(760px, 100%);
}

.price-list-dialog__header h2 {
  margin: 0;
  color: #2f2d35;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.price-list-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--birkle-control-radius);
  background: var(--birkle-brand-red);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.price-list-dialog__image {
  display: block;
  width: min(760px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: var(--birkle-image-radius);
}

.price-list-dialog__external {
  color: var(--birkle-brand-red);
  font-weight: 700;
  white-space: nowrap;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .price-list-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .price-list-dialog__panel {
    max-height: calc(100vh - 16px);
    padding: 54px 10px 16px;
  }

  .price-list-dialog__header {
    display: block;
  }

  .price-list-dialog__external {
    display: inline-block;
    margin-top: 8px;
  }
}

/* Helpful, crawlable detail copy added to the service and price pages. */
.birkle-seo-details {
  padding: clamp(56px, 7vw, 96px) 24px;
  background: #f5f5f6;
  color: #2f2d35;
}

.birkle-seo-details__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.birkle-seo-details__eyebrow {
  margin: 0 0 10px;
  color: var(--birkle-brand-red);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.birkle-seo-details h2 {
  max-width: 850px;
  margin: 0 0 32px;
  color: #2f2d35;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.12;
}

.birkle-seo-details__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.birkle-seo-details__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.birkle-seo-details article {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(137, 8, 18, 0.15);
  border-radius: var(--birkle-image-radius);
  background: #fff;
}

.birkle-seo-details article h3 {
  margin: 0 0 12px;
  color: #2f2d35;
  font-size: clamp(1.28rem, 2vw, 1.55rem);
  line-height: 1.25;
}

.birkle-seo-details article p,
.birkle-seo-details__cta {
  font-size: 1.08rem;
  line-height: 1.7;
}

.birkle-seo-details article p {
  margin: 0;
}

.birkle-seo-details__cta {
  margin: 28px 0 0;
}

.birkle-seo-details a {
  color: var(--birkle-brand-red);
  font-weight: 700;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .birkle-seo-details__grid,
  .birkle-seo-details__grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .birkle-seo-details {
    padding-inline: 18px;
  }

  .birkle-seo-details article {
    padding: 22px;
  }
}

@media (max-width: 767px) {
  :root {
    --birkle-header-logo-size: 74px;
  }

  .elementor-126 .elementor-element.elementor-element-68d23ca {
    --padding-top: 10px;
    --padding-bottom: 10px;
    --padding-left: 14px;
    --padding-right: 14px;
  }
}

/* Footer: compact brand block and balanced information columns. */
.elementor-138 .elementor-element.elementor-element-a573f87 {
  --padding-right: 48px;
  gap: 18px;
}

@media (min-width: 1025px) {
  .elementor-138 .elementor-element.elementor-element-46c190f {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(430px, 1.35fr) minmax(320px, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.elementor-138 .elementor-element.elementor-element-17663da {
  --container-widget-width: 120px;
  width: 120px !important;
  max-width: 120px !important;
  flex: 0 0 120px;
}

.elementor-138 .elementor-element.elementor-element-17663da img[alt="logo"] {
  display: block;
  width: 100% !important;
  height: auto !important;
}

.elementor-138 .elementor-element.elementor-element-4779b40 {
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.55;
}

.elementor-138 .elementor-element.elementor-element-4779b40 p {
  margin: 0;
}

.elementor-138 .elementor-element.elementor-element-9490e56 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 34px 40px;
}

.elementor-138 .elementor-element.elementor-element-bfaea02 {
  grid-column: 1 / -1;
}

.birkle-footer-hours {
  color: var(--e-global-color-secondary);
}

.birkle-footer-hours > .elementor-heading-title {
  display: block;
  margin-bottom: 10px;
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-7044a64-font-family), Sans-serif;
  font-size: var(--e-global-typography-7044a64-font-size);
  font-weight: var(--e-global-typography-7044a64-font-weight);
  line-height: var(--e-global-typography-7044a64-line-height);
}

.birkle-footer-hours dl {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 4px 12px;
  margin: 0;
}

.birkle-footer-hours dl > div {
  display: contents;
}

.birkle-footer-hours dt,
.birkle-footer-hours dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.birkle-footer-hours dt {
  font-weight: 500;
}

@media (max-width: 1024px) {
  .elementor-138 .elementor-element.elementor-element-a573f87 {
    --padding-right: 36px;
  }

  .elementor-138 .elementor-element.elementor-element-17663da {
    --container-widget-width: 108px;
    width: 108px !important;
    max-width: 108px !important;
    flex-basis: 108px;
  }
}

@media (max-width: 767px) {
  .elementor-138 .elementor-element.elementor-element-a573f87 {
    --padding-right: 0px;
    gap: 14px;
  }

  .elementor-138 .elementor-element.elementor-element-17663da {
    --container-widget-width: 96px;
    width: 96px !important;
    max-width: 96px !important;
    flex-basis: 96px;
  }

  .elementor-138 .elementor-element.elementor-element-4779b40 {
    max-width: 34ch;
    font-size: 14px;
  }

  .elementor-138 .elementor-element.elementor-element-9490e56 {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .elementor-138 .elementor-element.elementor-element-bfaea02 {
    grid-column: auto;
  }
}

/* Back-to-top control: replace Astra's default blue with the brand red. */
#ast-scroll-top,
.ast-scroll-top-icon {
  background-color: var(--birkle-brand-red) !important;
  border-color: var(--birkle-brand-red) !important;
  border-radius: var(--birkle-control-radius) !important;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus-visible,
.ast-scroll-top-icon:hover,
.ast-scroll-top-icon:focus-visible {
  background-color: #7b0a12 !important;
  border-color: #7b0a12 !important;
}

/* Consistent, subtle corner treatment for interactive controls. */
.elementor-kit-15 .elementor-button,
.elementor-kit-15 button,
.elementor-kit-15 input[type="button"],
.elementor-kit-15 input[type="submit"],
.elementor-kit-15 input[type="reset"],
.elementor-menu-toggle,
.ast-button,
.button {
  border-radius: var(--birkle-control-radius) !important;
}

/* Elementor's exported dropdown inherits the narrow width of the hamburger
   widget. Give the tablet/mobile menu its own full-width viewport layer so
   links never wrap into a thin, off-screen column. */
@media (max-width: 1024px) {
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
    position: fixed !important;
    top: var(--birkle-mobile-menu-top, 88px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: 0 14px 28px rgb(20 20 24 / 18%);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform-origin: top center !important;
    z-index: 99999 !important;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown[aria-hidden="false"] {
    display: block !important;
    height: auto !important;
    max-height: calc(100vh - var(--birkle-mobile-menu-top, 88px)) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown[aria-hidden="true"] {
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scaleY(0) !important;
    pointer-events: none;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-nav-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 !important;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .menu-item,
  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item {
    width: 100% !important;
  }

  .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item {
    display: block !important;
    padding: 15px clamp(22px, 7vw, 48px) !important;
    font-size: clamp(18px, 4.5vw, 22px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

/* Red icon tiles and framed Elementor symbols. */
.elementor-widget-icon .elementor-icon,
.elementor-icon-box-icon .elementor-icon,
.elementor-icon-wrapper .elementor-icon {
  border-radius: var(--birkle-control-radius) !important;
}

/* Standalone editorial images; logos and review avatars remain unchanged. */
.elementor-widget-image img:not([alt="logo"]),
.elementor-image img:not([alt="logo"]) {
  border-radius: var(--birkle-image-radius) !important;
}

/* Lukas portrait: keep the visible image itself rounded and centered on
   tablet/mobile, independent of Elementor's inherited negative offset. */
.elementor-60 .elementor-element.elementor-element-52074af img[alt="owner"] {
  border-radius: var(--birkle-image-radius) !important;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .elementor-60 .elementor-element.elementor-element-b6c50fa {
    --margin-right: 0px;
    margin-right: 0 !important;
    align-items: center;
  }

  .elementor-60 .elementor-element.elementor-element-52074af {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .elementor-60 .elementor-element.elementor-element-52074af img[alt="owner"] {
    display: block;
    width: min(100%, 333.333px) !important;
    height: auto !important;
    margin-inline: auto !important;
    object-fit: cover;
    object-position: center center;
  }
}

