/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@import "fonts.css";

/* Font Definitions */
html, body {
  font-family: 'Red Hat Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.cookie {
  font-family: 'Cookie', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: min(max(56px, 5vw), 72px); /* Cookie */
  font-size: min(max(36px, 5vw), 50px); /* Red Hat Display */
  line-height: 1.4;
}

/* Text-Links im Content-Bereich unterstreichen, aber nicht in der Blog-Übersicht und auf der Beitragsseite */
#brx-content a:not(.brxe-image):not(.brxe-posts a):not(.brxe-post-navigation a):not(.bricks-lightbox) {
  border-bottom: 2px dotted #ab9b85;
}

/* Sticky-Navigation aktivieren */
.sticky {
  z-index: 10;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
}

/* Navigation im Grundzustand (nicht sticky) */
/* margin-right gleicht das ausgeblendete Menü-Element optisch aus */
:where(.brxe-nav-menu) .bricks-nav-menu {
  margin-right: 70px;
  transition: margin-right 0.5s ease, transform 0.5s ease;
}

/* Sticky-Zustand: margin entfällt, dafür optischer Ausgleich durch translateX */
.sticky :where(.brxe-nav-menu) .bricks-nav-menu {
  margin-right: 0;
  transform: translateX(20px);
}

/* Menüpunkt "Home" (nun über .menu-item-home) – im Normalzustand unsichtbar */
.menu-item-home > a {
  position: relative;
  display: inline-block;
  transition: all 0.25s ease;
  color: transparent !important;
  user-select: none !important;
  pointer-events: none;
}

/* Pseudo-Element als Logo (sichtbar nur im Sticky-Zustand) */
.menu-item-home > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 34px;
  width: 100px;
  background-image: url('/wp-content/themes/bricks-child/assets/k+k.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}

/* Im Sticky-Zustand: Logo anzeigen, Menüpunkt interaktiv schalten */
.sticky .menu-item-home > a {
  pointer-events: auto;
}

.sticky .menu-item-home > a::before {
  opacity: 1;
}



/* Masonry Images 100% width darstellen */
.isotope img {
  width: 100%;
}

/* Bildunterschriften bei Masonry Images */
.brxe-image-gallery .bricks-image-caption {
  position: absolute !important;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background: rgba(0,0,0,.4);
  width: auto;
  margin: 0;
  padding: 10px 15px;
  color: #fff;
  font-size: 18px;
  text-align: left;
  /* transform: rotate(-90deg);
  transform-origin: top right; */
  background: rgba(255,255,255,.85);
  color: inherit;
  /* color: var(--bricks-color-oiphgs); */
  border-right: 3.5px solid #1e2025;
  border-top: 3.5px solid #1e2025;
}



/* Hängende Initialen */
.initialletter::first-line {
  line-height: 100%;
}

.initialletter::first-letter {
  /* font-size: 540%; */
  font-size: 420%;
  /* -webkit-initial-letter: 3;
  initial-letter: 3; */
  font-weight: 400;
  line-height: 100%;
  float: left;
  /* margin: -0.07em 0.1em 0 -0.07em; */
  margin: -0.1em 0.1em 0 -0.07em;
}

/* Targeting Firefox only */
@-moz-document url-prefix('') {
  .initialletter::first-letter {
    margin-top: 0.08em;
  }
}



/* Chevron neben High-End-Megamanü verstecken */
.brx-has-megamenu button {
  display: none;
}

/* Button „High End“ highlighten, wenn ein Submenü-Button aktiv ist */
.brx-has-megamenu .aria-current a {
  color: #9a8874;
  font-weight: 700;
}

/* Menü-Buttons Transition geben */
.brxe-nav-menu a {
  transition: all 250ms;
}

.brxe-nav-menu a:hover {
  color: #9a8874;
}



/* Kontakt-Seite → Checkbox */
.options-wrapper input[type="checkbox"] {
  float: left;
  accent-color: #ab9b85;
  width: 18px;
  height: 18px;
  margin-top: 6px;
}

.options-wrapper input[type="checkbox"] + label {
  display: unset;
  margin-left: 10px;
  user-select: none;
}

/* .options-wrapper input[type="checkbox"] + label a {
  border-bottom: 2px dotted #ab9b85;
} */

label.required::after {
  color: indianred;
  font-weight: 600;
}

.options-wrapper input[name*="required"] + label::after {
  color: indianred;
  font-weight: 600;
  content: "*";
  padding: 0 2px;
  position: relative;
  top: -2px;
}

button[type="submit"] {
  padding: 10px 20px 13px 20px;
  border-radius: 2px;
  transition: all 200ms;
}

button[type="submit"]:hover {
  background-color: hsl(35, 18%, 80%) !important;
  color: rgba(0,0,0,.9) !important;
}


/* Seite Kreateure → Bild bei :hover ausfaden lassen */
.kreateure-container img {
  transition: opacity 200ms;
}

.kreateure-container img:hover {
  opacity: 0;
}



/* Namen der Mitarbeiter auf Seite Kreateure unterstreichen */
.border-bottom::after {
  content: '';
  position: relative;
  border-bottom: 4px solid #ab9b85;
  width: 60px;
  display: block;
  padding-bottom: 4px;
  margin-bottom: 8px;
}



/* Zahlen bei „Was uns ausmacht“ */
.digits {
  box-shadow: 0 0 8px rgba(0,0,0,.3);
  background-image: linear-gradient(135deg, #897c6c 40%, #ab9f8c 95%);
}

.digits::before {
  position: absolute;
  font-size: 600%;
  font-weight: 600;
  /* top: -.3em; */
  /* top: -.120em; */
  bottom: -.1em;
  right: .3em;
  color: black;
  opacity: .3;
}

/*
.digits:nth-of-type(1):before {
  content: '1.';
}
.digits:nth-of-type(2):before {
  content: '2.';
}
.digits:nth-of-type(3):before {
  content: '3.';
}
.digits:nth-of-type(4):before {
  content: '4.';
}
*/



/* Gewählten Button im Mega-Menu für Seite aus Arbeits- und Lebenswelten highlighten */
[aria-current="page"] {
  font-weight: 500;
  color: white;
  border-bottom: 1px dashed white;
}



/* Close-Icon neu positionieren, wenn das Mega-Menü geöffnet ist. */
/* @layer bricks { */
  @media (max-width: 767px) {
    #brxe-poukcn .bricks-mobile-menu-toggle[aria-expanded="true"] {
      position: fixed;
      top: 30px;
      right: 29px;
      color: white;
    }
  }
/* } */



/**
 * Siblings-Navigation unterhalb der Arbeits- und Lebenswelten-Seiten in
 * /kuk2025/wp-content/themes/bricks-child/partials/sibling-navigation.php
 */
.sibling-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 2em;
}

.sibling-navigation .prev-page a,
.sibling-navigation .next-page a {
  display: block;
  padding: 1em;
  border: 1px solid #a69786 !important;
  transition: all 250ms;
}

.sibling-navigation a:hover {
  color: #a69786;
  border-color: white !important;
  /* text-decoration: underline; */
}

@media (max-width: 767px) {
  .sibling-navigation {
    display: block;
  }
  .sibling-navigation a {
    width: 100%;
  }
  .sibling-navigation .prev-page a {
    margin-bottom: 2em;
  }
}


/* In der Blog-Übersicht bei :hover die BG-Farbe ändern */
.brxe-posts a .content-wrapper {
  transition: all 250ms;
  background-color: rgba(255,255,255,.10) !important;
}

.brxe-posts a:hover .content-wrapper {
  background-color: rgba(255,255,255,.15) !important;
}

/* Für die Datemanzeige, die links herausläuft */
/*.bricks-layout-item*/.bricks-layout-inner {
  overflow: visible !important;
}

/* div.overlay-wrapper div.overlay-inner div.dynamic {
  left: -6px;
  border: 1px solid red;
} */



/* Test */
/* #brxe-nhcyix {
  transition: all 250ms;
  max-height: none !important;
  height: 600px;
  overflow: hidden;
}

#brxe-nhcyix:hover {
  height: calc-size(auto);
} */


h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
}