@charset "UTF-8";



/* ----- Neutralize some Boostraap css  --------------------------------------------------- */
.navbar-default {
    background-color: #FFFFFF;
    border: none;
    border-bottom: 1px solid #eeeeee;
} 

.jumbotron {
    background-color: transparent;
}
.container .jumbotron, .container-fluid .jumbotron {
    border-radius: none;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; }
.navbar-default .navbar-toggle { border: none; }

.btn {
border-radius: 0px;
border: 2px solid #000 !important;
background-color: transparent !important;
color: #000 !important;
}

.btn:hover{
border: 2px solid #000;
background-color: #000 !important;
color: #fff !important;
}

.form-control {
  border-radius: 0px;
}


/* ----- New css templates  --------------------------------------------------- */
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.no-gutters > [class^="col-"],
.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}
.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
    -webkit-box-align : center;
  -webkit-align-items : center;
       -moz-box-align : center;
       -ms-flex-align : center;
          align-items : center;
  width: 100%;
         -webkit-box-pack : center;
            -moz-box-pack : center;
            -ms-flex-pack : center;
  -webkit-justify-content : center;
          justify-content : center;
}

.headertitles {
  padding: 65px 0 0 15px;
}


/* ----- Contact form honeypot -------------------------------------------- */

.honeypot {
    position: absolute;
    left: -9999px;
}

/* ----- General --------------------------------------------------- */

main {
  display: block;
}

body {
  margin: 0;
  font-family: var(--font-body, sans-serif);
  font-weight: 100;
  font-size: 17px;
  line-height: 1.47059;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-heading, var(--font-body, sans-serif));
     font-weight: var(--font-heading-weight, 700);
}
h1 {
     font-size: 24px;
}
h2 {
     font-size: 24px;
}
html {
  width: 100%;
  height: 100%;
}



/* ----- Navbar  --------------------------------------------------- */
.navbar-brand { 
    font-size: 24px;
}

.navbar-logo img {
    padding: 15px;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

@media(min-width:768px) {
    .navbar-logo img {
        padding: 10px 0 0 15px;
    }
}

.fa-chevron-up {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.top-nav-collapse .navbar-brand .navbar-logo { 
    font-size: 16px; 
    -webkit-transition: font-size .5s ease;
    -moz-transition: font-size .5s ease;
    -o-transition: font-size .5s ease;
    transition: font-size .5s ease;
}

.navbar-default .navbar-nav > li > a, #section-copyright > a {
    color: #000000;
}

.navbar-default a.active {
    font-weight: 700;
    border: none;
}

.navbar-default .navbar-toggle {
    background-color: #FFF;
}


/* ----- home header  --------------------------------------------------- */
@media(min-width:767px) {
    .navbar { 
      padding: 30px 0 5px 0; 
      -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
      -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse { padding: 25px 0 8px 0; }
    .navbar-logo img { padding: 10px 0 0 0; }
}

#section-header { 
  height: 100%; 
  text-align: left; 
}
#section-header .jumbotron { 
  padding-top: 0px 
}


/* ----- Sections  --------------------------------------------------- */
section {
  border-bottom: 1px solid #eeeeee;
}
section:nth-child(even) { 
  background: #ffffff; 
}
section:nth-child(odd) { 
  background: #f9f9f9; 
}
section .container {
  padding-top: 60px;
  padding-bottom: 70px;
}
@media(min-width:767px) {
 section:first-of-type { padding-top: 60px; }
}


hr.line {
    max-width: 50px;
    border-width: 2px;
    padding-bottom: 60px;
}

/* ----- scrollup  --------------------------------------------------- */
.scrollup { 
  position: fixed; 
  right: 30px; 
  bottom: 30px; 
}




/* ----- thumbnails  --------------------------------------------------- */
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;

}
.hovereffect .overlay:hover{
      opacity: 1;      
  }
.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(256,256,256,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  opacity: 0;
}

.hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=1);
}

.hovereffect h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  background-color: transparent;
  margin: 0px;
}




/* ----- share  --------------------------------------------------- */
#section-share .fa {
  margin: 0 15px;
}



/* ----- project  --------------------------------------------------- */
#section-project img {
  padding-bottom: 20px;
}


/* ----- social  --------------------------------------------------- */
#section-social a {
  color: #fff;
  text-decoration: none;
}
#section-social .fa {
  margin: 0 15px;
}

/* ----- blog  --------------------------------------------------- */
@media(max-width:767px) {
    .article
     { padding-bottom: 40px; }
}


/* ----- client  --------------------------------------------------- */
@media(max-width:767px) {
    .client
     { padding-bottom: 20px; }
}

/* ----- team  --------------------------------------------------- */
@media(max-width:767px) {
    .member { padding-bottom: 40px; }
}
.carousel-control { 
  text-shadow: none;
}
.carousel-control.left,.carousel-control.right { 
  background-image: none; 
}
.carousel-control .icon-next, .carousel-control .icon-prev { 
  font-family: sans-serif; 
}
.carousel-control .btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}
.carousel-indicators { 
  position: relative; 
}


/* ----- services  --------------------------------------------------- */
.icon {
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: 67px;
    height: 67px;
    line-height: 75px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.icon-legend-right {
    padding-left: 30px;
}

/* ==========================================================================
   SCHATZL — Page Title Styles
   ========================================================================== */

h1.text-center {
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 20px;
}

.page-intro {
  text-align: left;
  margin-bottom: 40px;
}

.page-intro blockquote {
  font-style: italic;
  font-size: 1.1em;
  line-height: 1.6;
}

.section-intro {
  text-align: left;
  margin-bottom: 40px;
}

/* ==========================================================================
   Language Switcher
   ========================================================================== */

.navbar-nav > li.language-switcher {
  display: inline-block;
  vertical-align: middle;
}

.navbar-nav > li.language-switcher > .language-links {
  display: block;
  padding: 15px;
  line-height: 20px;
}


/* ==========================================================================
   Navbar Logo Fix
   ========================================================================== */

.navbar-logo {
  display: flex;
  align-items: center;
  height: 50px;
}

.navbar-logo img {
  padding: 0;
  vertical-align: middle;
}

a.navbar-logo {
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1000;
  position: relative;
}

@media(max-width:767px) {
  .navbar-logo {
    padding: 12px 0 0 15px;
  }
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid #eeeeee;
  padding: 30px 0;
}


/* FOOTER - baseline alignment */
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 15px;
}

.site-footer__brand {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.site-footer__logo {
  display: flex;
  align-items: baseline;
}

.site-footer__logo img {
  display: block;
}

.site-footer__statement {
  line-height: 1;
}

.site-footer__legal {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #666;
}

.site-footer__link {
  color: inherit;
  text-decoration: none;
}

.site-footer__link:hover {
  text-decoration: underline;
}

.site-footer__divider {
  color: #999;
}

.site-footer__copy {
  color: inherit;
}

/* Footer Mobile */
@media(max-width:767px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 25px;
  }
  
  .site-footer__brand {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 15px;
    padding-left: 10px;
  }
  
  .site-footer__logo img {
    height: 17px !important;
  }
  
  .site-footer__legal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 10px;
  }
  
  .site-footer__copy {
    display: inline;
  }
  
  .site-footer__links {
    display: inline-flex;
    gap: 5px;
  }
  
  .site-footer__divider {
    display: none;
  }
  
  .site-footer__links .site-footer__divider {
    display: inline;
  }
  
  .site-footer__link {
    display: inline;
  }
}


/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.scrollup.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 0;
  background-color: #000;
  border-color: #000;
  opacity: 0.7;
}

.scrollup.btn-danger:hover {
  opacity: 1;
  background-color: #333;
  border-color: #333;
}

.scrollup .fa-chevron-up {
  color: #fff;
  font-size: 18px;
}

/* ==========================================================================
   Partner Grid
   ========================================================================== */

.partner-grid {
  margin-top: 40px;
}

.partner-item {
  margin-bottom: 30px;
  text-align: center;
}

.partner-link {
  display: block;
  padding: 20px;
  transition: opacity 0.3s ease;
}

.partner-link:hover {
  opacity: 0.7;
}

.partner-logo {
  max-height: 80px;
  width: auto;
  margin: 0 auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.partner-link:hover .partner-logo {
  filter: grayscale(0%);
}

.partner-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #333;
}

.partner-detail-stage {
  height: 120px;
  margin: 70px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.partner-detail-logo {
  width: 100%;
  max-width: 280px;
}

.partner-detail-logo img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}

.partner-website { margin: 0 0 30px; }
.partner-website a { text-decoration: underline; text-underline-offset: 3px; }

.partner-intro {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ==========================================================================
   Items Overview
   ========================================================================== */

.items-logos .item-cell {
  margin-bottom: 40px;
  text-align: center;
}

.items-logos .item-logo-link {
  display: table-cell;
  width: 250px;
  height: 120px;
  vertical-align: middle;
  text-align: center;
  padding: 10px;
  transition: opacity 0.3s ease;
}

.items-logos .item-logo-link:hover {
  opacity: 0.7;
}

.items-logos .item-logo {
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
}

/* Logo ring (sectionembed, display style "logos"): one endless row.
   --ring-n = logos visible at once; read by assets/js/logo-ring.js */
.logo-ring {
  --ring-n: 2;
  position: relative;
  margin: 0 auto 40px;
  padding: 0 36px;
}
@media (min-width: 768px) { .logo-ring { --ring-n: 3; } }
@media (min-width: 992px) { .logo-ring { --ring-n: 4; } }

.logo-ring__viewport {
  overflow-x: auto;
  touch-action: pan-y;
}
.logo-ring.is-ready .logo-ring__viewport { overflow: hidden; }

.logo-ring__track {
  display: flex;
  will-change: transform;
}
.logo-ring.is-static .logo-ring__track { justify-content: center; }

.logo-ring__item {
  flex: 0 0 calc(100% / var(--ring-n));
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 10px;
  user-select: none;
}
.logo-ring .item-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
.logo-ring .item-logo-link:hover { opacity: 0.7; }
.logo-ring .item-logo-link:focus:not(:focus-visible) { outline: none; }
.logo-ring .item-logo {
  max-width: min(180px, 100%);
  max-height: 80px;
  width: auto;
  height: auto;
  -webkit-user-drag: none;
}

.logo-ring__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: #111111;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.logo-ring__nav:hover,
.logo-ring__nav:focus-visible { opacity: 1; }
.logo-ring__nav--prev { left: 0; }
.logo-ring__nav--next { right: 0; }

.item-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #333;
}

/* Items List Style */
.items-list .item-row {
  padding: 30px 0;
  border-bottom: 1px solid #eee;
}

.items-list .item-row:last-child {
  border-bottom: none;
}

.items-list .item-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.items-list .item-link:hover h3 {
  color: #c00;
}

.item-list-logo {
  max-width: 200px;
  max-height: 80px;
  width: auto;
  height: auto;
  margin-bottom: 10px;
}

@media(max-width:991px) {
  .item-list-logo {
    margin-bottom: 20px;
  }
  
  .item-list-content h3 {
    margin-top: 15px;
  }
}

.item-list-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.item-list-content p {
  margin-bottom: 0;
  color: #666;
}

.items-list .item-category {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
}

/* Workshop Meta */
.workshop-meta .meta-item {
  display: inline-block;
  margin: 0 15px 10px 0;
}

.item-intro {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 30px;
}

.item-placeholder {
  background: var(--section-gray, #f5f5f5);
  padding-top: 66%;
}

.item-cell {
  padding-left: 0;
  padding-right: 0;
}

.block-image {
  margin-bottom: 20px;
}
.block-image img {
  width: 100%;
  height: auto;  
}

/* ==========================================================================
   Shop Embed Block (Full Width)
   ========================================================================== */

.block-shopembed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0 15px;
}

@media (min-width: 768px) {
  .block-shopembed {
    padding: 0 30px;
  }
}

@media (min-width: 1200px) {
  .block-shopembed {
    padding: 0 60px;
  }
}

/* Hide title below 990px when hideHeadline is set */
@media (max-width: 990px) {
  .hide-below-990 {
    display: none;
  }
}

/* Show title only above 991px (desktop) */
.show-above-991 {
  display: none;
}

@media (min-width: 992px) {
  .show-above-991 {
    display: block;
  }
}

/* ==========================================================================
   Items Cards
   ========================================================================== */

.items-cards {
  margin-top: 30px;
}

.items-cards .item-cell {
  margin-bottom: 30px;
}

.item-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  transition: transform 0.2s ease;
}

.item-card:hover {
  text-decoration: none;
  color: inherit;
}

.item-card:hover h3 {
  color: #666;
}

.item-card .card-image {
  overflow: hidden;
}

.item-card .card-image img {
  width: 100%;
  height: auto;
  display: block;
}

.item-card .card-content {
  padding: 0;
}

.item-card .card-content h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: normal;
}

.item-card .card-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}

.item-card .card-meta {
  display: block;
  margin-top: 10px;
  font-size: 0.8rem;
  color: #999;
}

/* Cards without image */
.item-card:not(:has(.card-image)) .card-content {
  padding: 30px 20px;
}

/* Fallback for browsers without :has() */
.item-card .card-content:first-child {
  padding: 30px 20px;
}

/* ==========================================================================
   Block: Item Embed
   ========================================================================== */

.block-itemembed {
  margin: 30px 0;
}

.block-itemembed .row {
  margin-left: -15px;
  margin-right: -15px;
}

/* ==========================================================================
   Item Embed Block - Cards
   ========================================================================== */

.block-itemembed {
  margin: 40px 0;
}

.block-itemembed .items-cards,
.block-itemembed .items-grid {
  margin-left: -15px;
  margin-right: -15px;
}
/* Tile grid without gutters: same width as the section embed on the home page */
.block-itemembed .items-grid.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.items-cards .item-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 30px;
}

.items-cards .card-image {
  overflow: hidden;
  margin-bottom: 15px;
}

.items-cards .card-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.items-cards .item-card:hover .card-image img {
  transform: scale(1.03);
}

.items-cards .card-content h3 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.items-cards .card-content p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  margin: 0;
}

.items-cards .card-meta {
  font-size: 0.85rem;
  color: #999;
}

/* Tiles (grid) with permanent overlay title */
.items-tiles .item-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 30px;
}

.items-tiles .tile-image {
  position: relative;
  overflow: hidden;
}

.items-tiles .tile-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.items-tiles .item-tile:hover .tile-image img {
  transform: scale(1.03);
}

.items-tiles .tile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  padding: 40px 15px 15px 15px;
}

.items-tiles .tile-overlay h3 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: normal;
  margin: 0;
}

/* Cards without images - minimal style */
.items-cards .item-card:not(:has(.card-image)) .card-content h3,
.items-cards .card-content:first-child h3 {
  font-size: 1rem;
  padding: 0;
}

/* ==========================================================================
   Grid Compact (square tiles with hover overlay)
   ========================================================================== */

.items-grid-compact .hovereffect-compact {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
}

.items-grid-compact .hovereffect-compact img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.items-grid-compact .hovereffect-compact .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.items-grid-compact .hovereffect-compact .item-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Grid Permanent (square tiles with always-visible overlay)
   Experimental style for OFC - frozen hover state
   ========================================================================== */

.items-grid-permanent .hovereffect-permanent {
  position: relative;
  width: 100%;
  padding-bottom: 66.66%; /* 3:2 aspect ratio */
  overflow: hidden;
}

.items-grid-permanent .hovereffect-permanent img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.items-grid-permanent .hovereffect-permanent .item-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.items-grid-permanent .overlay-permanent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.items-grid-permanent .overlay-permanent h2 {
  text-transform: uppercase;
  text-align: center;
  font-size: 17px;
  font-weight: normal;
  color: #000;
  padding: 10px;
  margin: 0;
}

/* Disable hover effect for grid-permanent */
.items-grid-permanent .hovereffect-permanent:hover .overlay-permanent {
  background-color: rgba(255,255,255,0.85);
}

.items-grid-permanent .hovereffect-permanent .overlay-permanent {
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.85);
}

.items-grid-permanent .hovereffect-permanent:hover .overlay-permanent,
.items-grid-permanent .hovereffect-permanent .overlay-permanent:hover {
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.85);
}

.items-grid-permanent .hovereffect-permanent h2,
.items-grid-permanent .hovereffect-permanent:hover h2 {
  opacity: 1 !important;
}


/* ----- Navbar logo, vertically aligned with the menu ------------------ */
@media(min-width:768px) {
    .navbar-header { height: 50px; display: flex; align-items: center; }
    .navbar-header a.navbar-logo { display: flex; }
    .navbar-logo img { display: block; padding: 0; }
}


/* ----- Hero: hatching, button, large headline ------------------------- */
#section-header { position: relative; overflow: hidden; }
#section-header .headertitles { position: relative; z-index: 2; }

.hero-hatching {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: #111111;
    pointer-events: none;
    -webkit-mask: var(--hatching) top / cover no-repeat;
    mask: var(--hatching) top / cover no-repeat;
}

.hero-button {
    display: inline-block;
    margin-top: 12px;
    padding: 13px 20px;
    line-height: 22px;
    background: var(--palette-signal);
    color: #111111 !important;
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
}
.hero-button:hover { background: #f98a60; }

#section-header.hero-large .headertitles {
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 120px;
    padding-bottom: 56px;
}
#section-header.hero-large h1 {
    max-width: 640px;
    margin: 0 0 16px 0;
    font-size: 48px;
    line-height: 1.1;
}
/* The claim is the strongest statement of the page: full black, never grey */
#section-header h1 { color: #111111; }

@media(max-width:767px) {
    /* Slim hatching on phones, so the claim keeps a wide, calm column */
    .hero-hatching { width: 60px; }
    #section-header.hero-large .headertitles { min-height: 0; padding-top: 100px; padding-right: 72px; padding-bottom: 36px; }
    #section-header.hero-large h1 { margin-bottom: 20px; font-size: 26px; line-height: 1.15; hyphens: manual; }
    .hero-button { padding: 11px 10px; font-size: 14px; line-height: 20px; white-space: nowrap; }
}


/* ----- Content blocks ------------------------------------------------- */
.block-heading { scroll-margin-top: 90px; }
h2.block-heading { margin: 0 0 24px 0; font-size: 28px; line-height: 1.2; }
h3.block-heading { margin: 20px 0 10px 0; font-size: 19px; line-height: 1.3; }
h4.block-heading { margin: 24px 0 8px 0; font-size: 17px; line-height: 1.3; }

.block-text p, .block-text li { font-size: 17px; line-height: 1.6; }
.block-text p { margin: 0 0 14px 0; }
.block-text ul { margin: 0 0 14px 0; padding-left: 20px; }
.block-text li { margin: 0 0 8px 0; }
.block-text a { text-decoration: underline; }

.block-quote {
    margin: 8px 0 24px 0;
    padding: 0;
    border: 0;
}
.block-quote__text {
    margin: 0;
    font-family: var(--font-body, serif);
    font-size: 28px;
    line-height: 1.35;
    font-style: italic; /* a quote on white or light grey reads as a guiding sentence */
}
.block-quote__cite {
    display: block;
    margin-top: 10px;
    font-family: var(--font-heading, sans-serif);
    font-style: normal;
    font-size: 15px;
}

.block-image { margin: 8px 0 24px 0; }
.block-image img { display: block; width: 100%; height: auto; }
/* More white space around images than between paragraphs */
.block-image { margin-top: 28px; margin-bottom: 36px; }
.block-image__link { display: block; }
.block-image__link img { border: 1px solid #e3e3e3; transition: opacity 0.2s ease; }
.block-image__link:hover img { opacity: 0.85; }
.block-image__caption { margin-top: 8px; font-family: var(--font-heading, sans-serif); font-size: 14px; color: #444444; }

@media(max-width:767px) {
    /* Phones: claim 26, H2 22, lead quote 21 (black, italic), text 17 */
    h2.block-heading { font-size: 22px; }
    .block-quote__text { font-size: 21px; line-height: 1.4; color: #111111; }
}

#section-header.hero-large { height: auto; }

/* ----- Menu and footer in the heading font, menu row centred --------- */
.navbar, .site-footer { font-family: var(--font-heading, var(--font-body, sans-serif)); }
@media(min-width:768px) {
    .navbar { padding: 18px 0; }
    .top-nav-collapse { padding: 10px 0; }
}
.site-footer__copy { margin-right: 16px; }

/* ----- Large logos must not push the menu into a second row ---------- */
@media(min-width:768px) and (max-width:991px) {
    .navbar-logo img { max-width: 180px; height: auto !important; }
}
@media(min-width:992px) and (max-width:1199px) {
    .navbar-logo img { max-width: 380px; height: auto !important; }
}


/* ----- Layout rows (theme-home, layout field) ------------------------- */
.layout-row { padding: 52px 0 68px 0; background: #ffffff; }
.layout-row--continued { padding-top: 24px; }
.layout-row:has(+ .layout-row--continued) { padding-bottom: 0; }
.layout-row--lightgrey { background: #f5f5f3; }
.layout-row--green     { background: var(--palette-green); }
.layout-row--grey      { background: var(--palette-grey); }
.layout-row--signal    { background: var(--palette-signal); }
.layout-row--green, .layout-row--grey, .layout-row--signal { color: #111111; }

.layout-column > :first-child { margin-top: 0; }
.layout-column > :last-child,
.layout-column > :last-child > :last-child { margin-bottom: 0; }

@media(min-width:992px) {
    .layout-row .row { margin-left: -30px; margin-right: -30px; }
    .layout-row .layout-column { padding-left: 30px; padding-right: 30px; }
    .block-text--columns { column-count: 2; column-gap: 60px; }
}

.layout-row--green .block-quote__text,
.layout-row--grey .block-quote__text,
.layout-row--signal .block-quote__text { font-size: 40px; line-height: 1.2; color: #111111; font-style: normal; }
.layout-row--green .block-quote__cite,
.layout-row--grey .block-quote__cite,
.layout-row--signal .block-quote__cite { font-weight: 700; font-size: 16px; }

@media(max-width:767px) {
    .layout-row { padding: 36px 0 48px 0; }
    .layout-row--continued { padding-top: 20px; }
    .layout-column + .layout-column { margin-top: 20px; }
    .layout-row--green .block-quote__text,
    .layout-row--grey .block-quote__text,
    .layout-row--signal .block-quote__text { font-size: 28px; }
}

/* ----- Small screens: the logo never grows wider than the space left
         of the menu button --------------------------------------------- */
@media(max-width:767px) {
    /* and stays at most 65 % of the screen wide, so it does not dominate */
    .navbar-logo img { max-width: min(calc(100vw - 100px), 65vw); height: auto !important; }
}

/* ----- Subheadings written inside a text block (### in Markdown) ----- */
.block-text h2, .block-text h3, .block-text h4 {
    margin: 20px 0 10px 0;
    font-size: 19px;
    line-height: 1.3;
    color: #111111;
    break-after: avoid;
}
.block-text > :first-child { margin-top: 0; }
/* An empty line (<br>) right after a heading adds no paragraph margin */
.block-text :is(h2, h3, h4) + p:has(> br:only-child) { margin-bottom: 0; }
.block-text--columns p { orphans: 3; widows: 3; }
.block-text figure { margin: 28px 0 32px 0; break-inside: avoid; }
.block-text img { display: block; max-width: 100%; height: auto; }

/* Manual line breaks in quotes apply to wide screens only */
@media(max-width:767px) {
    .block-quote__text br { display: none; }
}

/* Narrow phones (below 390 px): slimmer hatching so the claim keeps its lines */
@media(max-width:389px) {
    .hero-hatching { width: 48px; }
    #section-header.hero-large .headertitles { padding-right: 60px; }
}

/* ----- Footer: quiet closing line in body text size ------------------- */
.site-footer {
    /* Light grey closes the page; more space above the text than below */
    background: #f5f5f3;
    border-top: 0;
    padding: 56px 0 40px 0;
    font-size: 17px; /* same as the body text */
    line-height: 1.5;
}
.site-footer__statement { line-height: 1.5; }
/* Footer colours come from the site settings (monosection_typography_css):
   address in the body text colour, copyright and legal links in their own
   colour or, if none is set, the same */
.site-footer, .site-footer__statement { color: #111111; }
.site-footer__legal, .site-footer__copy, .site-footer__link,
.site-footer__divider { color: inherit; }

/* Address left; copyright and legal links as one group at the right edge */
.site-footer__inner { justify-content: flex-start; column-gap: 24px; row-gap: 8px; }
.site-footer__copy { margin: 0 0 0 auto; }
.site-footer__legal { margin-left: 0; }

/* Phones: address on top, below it copyright left and legal links right;
   if both do not fit on one line, the legal links move to their own line */
@media(max-width:767px) {
    .site-footer__inner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        row-gap: 16px;
        column-gap: 16px;
    }
    /* Copyright and legal links never break inside */
    .site-footer { padding: 40px 0 32px 0; }
    .site-footer__copy, .site-footer__links { white-space: nowrap; }
    .site-footer__brand { flex: 0 0 100%; padding: 0; }
    /* Only if the claim needs two lines (class set by script in footer.php):
       balanced lines ("45 Years of / Furniture Culture"), centred on the
       logo, a little more space after it. On one line nothing changes: the
       baselines of logo and claim stay identical */
    .site-footer__brand.is-wrapped { align-items: center; gap: 24px; }
    .site-footer__brand.is-wrapped .site-footer__statement { text-wrap: balance; line-height: 1.3; }
    .site-footer__copy { margin: 0; }
    .site-footer__legal { margin-left: auto; padding: 0; }
    /* Legal links on their own line (class set by script): left-aligned
       below the copyright */
    .site-footer__inner.legal-wrapped .site-footer__legal { margin-left: 0; }
}
/* Phones: 20 px after the logo as on the desktop (24 px if the claim wraps) */
@media(max-width:767px) {
    .site-footer__brand { gap: 20px; }
}

/* Very narrow phones (below 375 px): slightly smaller claim, same line breaks */
@media(max-width:374px) {
    #section-header.hero-large h1 { font-size: 24px; }
}


/* ----- Site search: magnifier in the menu, overlay with live results --- */
.search-toggle {
    background: none; border: 0; padding: 0; margin: 0;
    color: #111111; cursor: pointer; line-height: 0;
}
.search-toggle svg { display: block; }
.navbar-nav > li > .search-toggle { padding: 15px 10px; }
.search-toggle--phone { float: right; padding: 10px; margin: 4px 4px 0 0; }
/* Same grey as the menu button next to it (Bootstrap .icon-bar) */
.navbar-default .search-toggle--phone { color: #888888; }
@media(min-width:768px) {
    .navbar-nav > li > .search-toggle { padding-top: 14px; padding-bottom: 14px; }
}
html.search-open, html.search-open body { overflow: hidden; }
.search-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: #ffffff; color: #111111;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 32px 0 64px 0;
}
.search-overlay[hidden] { display: none; }
.search-overlay .container { max-width: 760px; }
.search-overlay__bar {
    display: flex; align-items: center; gap: 16px;
    border-bottom: 2px solid #111111; padding-bottom: 8px;
}
.search-overlay__input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent; color: #111111;
    font-family: var(--font-heading, var(--font-body, sans-serif));
    font-size: 28px; line-height: 1.3; padding: 4px 0;
    -webkit-appearance: none; appearance: none; border-radius: 0;
}
.search-overlay__input::-webkit-search-cancel-button { display: none; }
.search-overlay__close { background: none; border: 0; padding: 6px; color: #111111; cursor: pointer; line-height: 0; }
.search-overlay__status { margin: 24px 0 0 0; }
.search-overlay__status:empty { display: none; }
.search-overlay__results { list-style: none; margin: 16px 0 0 0; padding: 0; }
.search-overlay__results li { border-bottom: 1px solid #e4e4e0; }
.search-overlay__results a {
    display: block; padding: 18px 0; color: #111111; text-decoration: none;
}
.search-overlay__results a:hover .search-overlay__title,
.search-overlay__results a:focus .search-overlay__title { text-decoration: underline; }
.search-overlay__title {
    display: block; font-family: var(--font-heading, var(--font-body, sans-serif));
    font-weight: var(--font-heading-weight, 700); font-size: 20px; line-height: 1.3;
}
.search-overlay__page { display: block; font-size: 14px; margin-top: 2px; opacity: .7; }
.search-overlay__excerpt { display: block; margin-top: 6px; line-height: 1.5; }
.search-overlay mark { background: #fff1a8; color: inherit; padding: 0 1px; }
@media(max-width:767px) {
    .search-overlay { padding-top: 16px; }
    .search-overlay__input { font-size: 22px; }
}

/* ----- Contact page: details from the site settings below the form ---- */
/* Centred. One column, or two of equal width mirrored on a thin rule in
   the middle of the page: address right-aligned, notes left-aligned.
   Phones: one column, left-aligned */
/* Contact details: a light grey band across the page, as behind the
   partner logos on the home page, reaching down to the footer */
.contact-details {
  text-align: center;
  margin: 96px 0 0 0;
  padding: 64px 0 80px 0;
  background: #f9f9f9;
  box-shadow: 0 0 0 100vmax #f9f9f9;
  clip-path: inset(0 -100vmax);
}
/* Same as the page heading: one heading size, upper case, regular weight */
#section-contact-page .container:has(.contact-details) { padding-bottom: 0; }
.contact-details__title { text-transform: uppercase; font-weight: 400; margin: 0 0 20px 0; }
.contact-details hr.line { padding-bottom: 44px; }
.contact-details__box { display: inline-block; max-width: 100%; text-align: left; }
/* Both columns on one line grid: 25 px lines, one empty line between groups */
.contact-details p { margin: 0 0 25px 0; line-height: 25px; }
.contact-details p:last-child { margin-bottom: 0; }
.contact-details strong { font-weight: 700; }
.contact-details a { text-decoration: none; }
.contact-details__name { font-weight: 700; }
.contact-details__main, .contact-details__directions { min-width: 0; }
.contact-details__box--two {
    display: grid;
    grid-template-columns: auto minmax(0, 420px);
    column-gap: 96px;
}
/* A shorter right column ends on the same line as the left one */
.contact-details__box--two .contact-details__directions {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .contact-details__box--two .contact-details__main p { white-space: nowrap; }
}
@media (max-width: 767px) {
    .contact-details__box--two { grid-template-columns: 1fr; width: 100%; }
    .contact-details__box--two .contact-details__directions { display: block; margin-top: 25px; }
}



/* ----- Menu that does not fit on one line: shown as on phones ----------
   The script in snippets/footer.php sets .nav-overflow when, from 768 px,
   logo and menu items do not fit next to each other. Then the menu
   collapses behind the menu button as on phones, instead of wrapping. */
@media(min-width:768px) {
    .navbar.nav-overflow .navbar-header { float: none; }
    .navbar.nav-overflow .navbar-logo,
    .navbar.nav-overflow .navbar-brand { margin-right: auto; }
    .navbar.nav-overflow .navbar-toggle { display: block; float: none; order: 2; margin-right: 0; }
    .navbar.nav-overflow .search-toggle--phone { display: block !important; float: none; order: 1; margin-top: 0; }
    .navbar.nav-overflow .navbar-collapse.collapse { display: none !important; }
    .navbar.nav-overflow .navbar-collapse.collapse.in { display: block !important; overflow-y: auto; }
    .navbar.nav-overflow .navbar-nav,
    .navbar.nav-overflow .navbar-right { float: none !important; margin: 7.5px 0; }
    .navbar.nav-overflow .navbar-nav > li { float: none; display: block; }
    .navbar.nav-overflow .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; padding-left: 0; }
    .navbar.nav-overflow .navbar-nav > li.language-switcher > .language-links { padding-left: 0; }
    /* The magnifier sits next to the menu button instead */
    .navbar.nav-overflow .navbar-nav > li.hidden-xs { display: none !important; }
}

/* ----- Item pages: previous / next ------------------------------------ */
/* Two faint arrows fixed at the screen sides, at half height; they stay in
   place while scrolling. On narrow screens they sit in the side margin. */
.item-edge {
  display: flex;
  position: fixed;
  top: 50%;
  z-index: 900;
  width: 64px;
  height: 120px;
  margin-top: -60px;
  align-items: center;
  justify-content: center;
  color: #111111;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
.item-edge:hover, .item-edge:focus-visible { opacity: 1; }
.item-edge--prev { left: 8px; }
.item-edge--next { right: 8px; }
@media (max-width: 1199px) {
  .item-edge { width: 28px; height: 80px; margin-top: -40px; opacity: 0.55; }
  .item-edge svg { width: 12px; height: 24px; }
  .item-edge svg path { stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
  /* faded while the page scrolls (class set by snippets/item-stepper.php) */
  .item-edge { transition: opacity 0.25s ease; }
  html.is-scrolling .item-edge { opacity: 0.15; }
  .item-edge--prev { left: 0; }
  .item-edge--next { right: 0; }
}