/* =====================================================================
   bauco – Marken-CSS (Ebene C des Design Systems)
   Enthält nur, was sich in Elementor nicht über Felder abbilden lässt.
   Farben, Schriften und Abstände kommen aus den Global Styles.
   Werte 1:1 aus dem Prototyp index-v2.html.
   ===================================================================== */

:root{
  --bc-anthrazit:#3b3b3a;
  --bc-anthrazit-deep:#2a2a29;
  --bc-creme:#fbf1e6;
  --bc-creme-2:#f5e4d2;
  --bc-sand:#f3d8b5;
  --bc-rust:#8f3a2c;
  --bc-rust-2:#ad4634;
  --bc-copper:#c8683a;
  --bc-copper-light:#de8561;

  /* Verläufe */
  --bc-grad:linear-gradient(90deg,#8f3a2c 0%,#b7503a 40%,#de8561 100%);
  --bc-grad-v:linear-gradient(180deg,#8f3a2c 0%,#c8683a 100%);
  --bc-grad-on-dark:linear-gradient(95deg,#d2764a 0%,#de8561 45%,#f0b189 100%);

  /* Die Logo-Raute: Tiefe = 0,2726 x Breite. Gilt für JEDE Kerbe im Layout. */
  --bc-notch-w:56px;
  --bc-notch-h:15.3px;

  --bc-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   1 · Layout
   --------------------------------------------------------------- */
.bc-bleed{                       /* Hero: bricht aus dem 1280er Raster aus */
  width:100%;
  max-width:none;
  padding-inline:clamp(20px,3.6vw,120px);
}

/* ---------------------------------------------------------------
   2 · Text
   --------------------------------------------------------------- */
.bc-eyebrow{
  display:flex;
  align-items:flex-start;
  gap:14px;
  line-height:1.5;
}
.bc-eyebrow::before{
  content:"";
  flex:none;
  width:34px;
  height:2px;
  margin-top:.65em;
  background:var(--bc-grad);
}

/* Verlaufs-Headline. Das Padding verhindert, dass Umlautpunkte
   und Unterlängen aus der Zeilenbox fallen und abgeschnitten werden. */
.bc-h-grad,
.bc-h-grad .elementor-heading-title{
  background:var(--bc-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding:.18em .05em .06em 0;
  margin:-.18em 0 -.06em;
}

/* Gleiche Headline auf dunklem Grund oder über Fotos: aufgehellte Rampe. */
.bc-h-grad-dark,
.bc-h-grad-dark .elementor-heading-title{
  background:var(--bc-grad-on-dark);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding:.16em .06em .04em 0;
  margin:-.16em 0 0;
}

/* Weicher Halo – nur für Text, der über einem Foto steht.
   Auf glatter Fläche nicht verwenden, dort wirkt er als Fleck. */
.bc-text-halo{
  filter:drop-shadow(0 2px 10px rgba(42,42,41,.75)) drop-shadow(0 0 34px rgba(42,42,41,.55));
}
.bc-text-halo-soft{
  text-shadow:0 2px 16px rgba(42,42,41,.7);
}

/* »-Liste mit Chevron im Logo-Winkel */
.bc-list-chev ul,
.bc-list-chev ol,
ul.bc-list-chev{ list-style:none; margin:0; padding:0; }

.bc-list-chev li,
.bc-list-chev > *{
  position:relative;
  padding-left:30px;
}
.bc-list-chev li{ margin-bottom:10px; }

.bc-list-chev li::before,
.bc-list-chev > *::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:11px;
  height:11px;
  border-right:2.5px solid var(--bc-copper);
  border-top:2.5px solid var(--bc-copper);
  transform:rotate(45deg);
}
.bc-list-chev.bc-on-dark li::before,
.bc-list-chev.bc-on-dark > *::before{ border-color:var(--bc-copper-light); }

/* ---------------------------------------------------------------
   3 · Logo-Rauten als Kerben
   Alle vier Varianten nutzen dasselbe Seitenverhältnis.
   --------------------------------------------------------------- */

/* Kerbe oben links – Zitatkarten, FAQ-Einträge */
.bc-notch-top{
  position:relative;
  clip-path:polygon(
    0 0, 40px 0, calc(40px + var(--bc-notch-w)/2) var(--bc-notch-h),
    calc(40px + var(--bc-notch-w)) 0, 100% 0, 100% 100%, 0 100%);
}

/* Kerbe oben rechts – Kontaktkarten */
.bc-notch-top-right{
  position:relative;
  clip-path:polygon(
    0 0, calc(100% - 40px - var(--bc-notch-w)) 0,
    calc(100% - 40px - var(--bc-notch-w)/2) var(--bc-notch-h),
    calc(100% - 40px) 0, 100% 0, 100% 100%, 0 100%);
}

/* Kerbe unten mittig – Leistungskacheln. Als Pseudo-Element, damit das
   Bild darunter nicht beschnitten wird, sondern die Kartenfarbe greift. */
.bc-notch-bottom{ position:relative; overflow:hidden; }
.bc-notch-bottom::before{
  content:"";
  position:absolute;
  left:50%;
  top:auto;                      /* Elementor setzt top:0 auf Pseudo-Elemente */
  bottom:-1px;
  width:72px;
  height:19.6px;
  transform:translateX(-50%);
  background:#fff;
  clip-path:polygon(0 100%,50% 0,100% 100%);
  z-index:2;
}
.bc-notch-bottom.bc-on-cream::before{ background:var(--bc-creme); }

/* Halbe Raute an der linken Bildkante, außermittig – Hero, Über uns */
.bc-notch-edge{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,
    0 calc(68% + 82px), 44px 68%, 0 calc(68% - 82px));
}
.bc-notch-edge-high{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,
    0 calc(28% + 74px), 40px 28%, 0 calc(28% - 74px));
}

/* Raute, die aus dem Header ins Bild ragt – Hero oben mittig */
.bc-notch-header{
  position:absolute;
  top:0;
  bottom:auto;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:clamp(112px,13vw,196px);
  aspect-ratio:200/54.5;
  background:#fff;
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* ---------------------------------------------------------------
   4 · Bilder
   --------------------------------------------------------------- */

/* Warme Markentonung – lässt unterschiedliche Aufnahmen wie eine Serie wirken */
.bc-photo{ position:relative; }
.bc-photo::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:linear-gradient(160deg,rgba(200,104,58,.22),rgba(59,59,58,.18));
}
.bc-photo-warm::after{
  background:linear-gradient(160deg,rgba(222,133,97,.35),rgba(143,58,44,.28));
}

/* Hero-Scrim: nur das untere Drittel abdunkeln, Gesichter bleiben hell */
.bc-scrim{ position:relative; }
.bc-scrim::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(42,42,41,.34) 0%,rgba(42,42,41,0) 13%),
    linear-gradient(to top,rgba(42,42,41,.78) 0%,rgba(42,42,41,.56) 18%,
                    rgba(42,42,41,.28) 33%,rgba(42,42,41,.06) 46%,rgba(42,42,41,0) 56%);
}

/* ---------------------------------------------------------------
   5 · Hintergrund-Glyphe („5“, „„“, „?“)
   --------------------------------------------------------------- */
.bc-glyph,
.bc-glyph .elementor-heading-title{
  font-family:'Bitter',Georgia,serif;
  font-weight:800;
  font-size:clamp(300px,36vw,560px);
  line-height:1;
  color:var(--bc-creme-2);
  user-select:none;
  pointer-events:none;
}
.bc-glyph-light,
.bc-glyph-light .elementor-heading-title{ color:rgba(255,255,255,.035); }

/* ---------------------------------------------------------------
   6 · Mosaik „Mit uns arbeiten heißt“
   --------------------------------------------------------------- */
.bc-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(220px,22vw);
  gap:0;
}
.bc-mosaic > .bc-tile-wide{ grid-column:span 2; }
.bc-mosaic > .bc-tile-tall{ grid-row:span 2; }

@media (max-width:900px){
  .bc-mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(180px,44vw); }
  .bc-mosaic > .bc-tile-tall{ grid-row:span 1; }
}

/* ---------------------------------------------------------------
   7 · Zustände
   --------------------------------------------------------------- */
.bc-card{
  transition:transform .5s var(--bc-ease), box-shadow .5s var(--bc-ease);
  box-shadow:0 20px 40px -30px rgba(59,59,58,.35);
}
.bc-card:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 60px -30px rgba(143,58,44,.35);
}
.bc-card::after{                 /* Kupferlinie, die beim Hover einläuft */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background:var(--bc-grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--bc-ease);
}
.bc-card:hover::after{ transform:scaleX(1); }

/* Textlink mit wanderndem » */
.bc-link::after{
  content:"»";
  display:inline-block;
  margin-left:8px;
  font-size:1.3em;
  line-height:1;
  transition:transform .3s var(--bc-ease);
}
.bc-link:hover::after{ transform:translateX(4px); }

@media (prefers-reduced-motion:reduce){
  .bc-card,
  .bc-card::after,
  .bc-link::after{ transition:none; }
  .bc-card:hover{ transform:none; }
}

/* ---------------------------------------------------------------
   8 · Hauptnavigation (Elementor nav-menu ist ein V3-Widget –
   seine Typografie ist über globale Klassen nicht erreichbar)
   --------------------------------------------------------------- */
.elementor-nav-menu--main .elementor-item{
  font-family:'Roboto',Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:14.5px;
  letter-spacing:.01em;
  color:var(--bc-anthrazit);
  padding:10px 0;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted{
  color:var(--bc-rust-2);
}

/* Unterstreichung im Kupferverlauf statt einfarbig */
.elementor-nav-menu--main.e--pointer-underline .elementor-item:after{
  background:var(--bc-grad) !important;
  height:2px !important;
}

/* Untermenü: weiße Fläche mit Logo-Raute als Zeiger */
.elementor-nav-menu--dropdown{
  background-color:#fff !important;
  box-shadow:0 30px 50px -20px rgba(59,59,58,.35);
  margin-top:12px;
}
.elementor-nav-menu--main .elementor-nav-menu--dropdown::after{
  content:"";
  position:absolute;
  left:24px;
  top:-11px;
  width:40px;
  height:11px;
  background:#fff;
  clip-path:polygon(0 100%,50% 0,100% 100%);
}
.elementor-nav-menu--dropdown a{
  font-family:'Roboto',Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:15px;
  color:var(--bc-anthrazit);
  padding:10px 24px !important;
}
.elementor-nav-menu--dropdown a:hover{
  background-color:var(--bc-creme) !important;
  color:var(--bc-rust-2) !important;
  padding-left:30px !important;
}

/* Burger */
.elementor-menu-toggle{
  color:var(--bc-anthrazit) !important;
  background:none !important;
}