/*
    Theme Name: HABA / Wehrfritz
    Author: Birke und Partner GmbH (Pedro Stoehr)
    Author URI: https://birke.de
    Template: bones
    Version: 251219.1
     __                           
    /\ \                          
    \ \ \____  __  __  _____      
     \ \  __ \/\ \/\ \/\  __ \    
      \ \ \_\ \ \ \_\ \ \ \_\ \ __ 
       \ \____/\ \____/\ \  __//\_\
        \/___/  \/___/  \ \ \/ \/_/
                         \ \_\    
                          \/_/      
*/

/* ------------------------------------------------------------------------
// ANCHOR Imports
------------------------------------------------------------------------ */

@import url('../vendor/bootstrap-5.3.8-dist/css/bootstrap-reboot.min.css');
@import url('../vendor/bootstrap-5.3.8-dist/css/bootstrap-grid.min.css');
@import url('fonts/Mulish/Mulish.css');

/* ------------------------------------------------------------------------
// ANCHOR Vars
------------------------------------------------------------------------ */

:root {
  /* Fonts */
  --theme-font: 'Mulish', Helvetica, Arial, sans-serif;
  --theme-root-size: 1.1rem;
  --h1: clamp(2.1rem, 5vw, 4.5rem);
  --h2: clamp(1.7rem, 4vw, 3rem);
  --h3: clamp(1.6rem, 3vw, 2.4rem);
  --h4: clamp(1.3rem, 2.5vw, 1.9rem);
  --h5: clamp(1.1rem, 2vw, 1.5rem);
  --h6: clamp(1rem, 1.5vw, 1.2rem);
  /* System */
  --theme-white: #ffffff;
  --theme-white-rgb: 255 255 255;
  --theme-black: #000000;
  --theme-black-rgb: 0 0 0;
  /* Primary colors */
  --theme-petrol: #00555A;
  --theme-petrol-rgb: 0 85 90;
  --theme-teal: #6CB29F;
  --theme-teal-rgb: 108 178 159;
  --theme-lightblue: #89ABDB;
  --theme-lightblue-rgb: 137 171 219;
  /* Secondary colors */
  --theme-blue: #394ECF;
  --theme-blue-rgb: 57 78 207;
  --theme-yellow: #FFB000;
  --theme-yellow-rgb: 255 176 0;
  --theme-red: #D9353B;
  --theme-red-rgb: 217 53 59;
  --theme-gray100: #383838;
  --theme-gray100-rgb: 56 56 56;
  /* Tertiary colors */
  --theme-purple: #AF4EA3;
  --theme-purple-rgb: 175 78 163;
  /* Utility */
  --theme-transition: all .3s ease-in-out;
  --theme-transition-bg: background .3s ease-in-out;
  --space-xs: clamp(.5rem, 2.5vw, .5rem);
  --space-s: clamp(.5rem, 2.5vw, 1rem);
  --space-m: clamp(1rem, 2.5vw, 2rem);
  --space-l: clamp(2rem, 3vw, 4rem);
  --space-xl: clamp(3rem, 4vw, 8rem);
  --space-xxl: clamp(3rem, 4vw, 12rem);
  --theme-border-radius: .25rem;
}

/* ------------------------------------------------------------------------
// ANCHOR A11Y
------------------------------------------------------------------------ */

.hidden{display:none!important}
.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;word-wrap:normal}
.visually-hidden.focusable:focus,.visually-hidden.focusable:active{position:static!important;overflow:visible;clip:auto;width:auto;height:auto}
.invisible{visibility:hidden}
a:focus,input:focus,button:focus,select:focus,textarea:focus,[tabindex]:not([tabindex="-1"]):focus{outline:2px solid currentColor;outline-offset:2px}
[class^="icon-"],[class*=" icon-"],[class^="element-"],[class*=" element-"]{display:inline-block;width:1em;aspect-ratio:1 / 1;stroke-width:0;stroke:currentColor;fill:currentColor;line-height:1;margin:0;padding:0}
#skiptocontent a{position:absolute;top:-40px;left:0;z-index:100000;padding:6px;color:var(--theme-white);background:var(--theme-petrol);border-right:1px solid var(--theme-white);border-bottom:1px solid var(--theme-white);border-bottom-right-radius:8px;transition:top .5s ease-out}
#skiptocontent a:focus{top:0;outline-color:transparent;transition:top .05s ease-in}
@media (prefers-reduced-motion: reduce) {#skiptocontent a{transition-duration:.001ms!important}}

/* ------------------------------------------------------------------------
// ANCHOR Tools
------------------------------------------------------------------------ */

html{opacity:0;transition:opacity 1s ease}
html.page-loaded{opacity:1}
[data-init-hidden]{display:none!important;}
.btn{display:inline-block;padding:.5rem 1.25rem;border-radius:var(--theme-border-radius);color:var(--theme-petrol);border:1px solid var(--theme-petrol);letter-spacing:.1875rem;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;font-weight:700;text-transform:uppercase;user-select:none;cursor:pointer}
.btn:hover,.btn:active{background-color:var(--theme-petrol);color:var(--theme-white)}
.img-full{height:auto;width:100%;max-width:100%;border-radius:var(--theme-border-radius);}
.img-crop{aspect-ratio:1 / 1.1;overflow:hidden;width:100%;position:relative}
.img-crop img{width:100%;height:100%;object-fit:cover}
.pos-left img{object-position:left center}
.pos-center img{object-position:center center}
.pos-right img{object-position:right center}
figcaption,.block-caption,.slide-caption{color:rgba(var(--theme-gray100-rgb) / 50%);width:100%;max-width:800px;padding:0 2rem;padding-top:var(--space-m);font-size:.9rem;text-align:center;margin:0 auto}
.rounded{border-radius:var(--theme-border-radius)}

/* ------------------------------------------------------------------------
// ANCHOR Bootstrap
------------------------------------------------------------------------ */

.container{padding:0 2rem}

/* ------------------------------------------------------------------------
// ANCHOR Colors
------------------------------------------------------------------------ */

.bg-petrol{background-color:var(--theme-petrol)}
.bg-teal{background-color:var(--theme-teal)}
.bg-lightblue{background-color:var(--theme-lightblue)}
.bg-blue{background-color:var(--theme-blue)}
.text-warning{color:var(--theme-red)}

/* ------------------------------------------------------------------------
// ANCHOR Typo
------------------------------------------------------------------------ */

h1,.intro{color:var(--theme-petrol);font-weight:700;text-align:center;hyphens:auto;line-height:1.2}
h2{color:var(--theme-petrol);font-weight:700}
h1{font-size:var(--h1);padding-bottom:var(--space-l);}
h2{font-size:var(--h2);text-align:center;padding-bottom:var(--space-m);}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
h6{font-size:var(--h6)}
.text-center{text-align:center}
.text-small{font-size:.9rem}
.no-padding{padding:0!important}

/* ------------------------------------------------------------------------
// SECTION Globals
------------------------------------------------------------------------ */

/* ANCHOR html, body */

html,body{background-color:var(--theme-lightblue);margin:0;padding:0;width:100%;height:100%}
body{color:var(--theme-gray100);font-family:var(--theme-font);font-size:var(--theme-root-size);font-weight:400;line-height:1.4;position:relative}
a{color:var(--theme-color-petrol)}

/* ANCHOR Header */

header{position:absolute;left:0;text-align:center;top:0;width:100%;overflow:hidden;z-index:9001;}
header.is-fixed{position:fixed;width:100%;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.4));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999}
header.is-fixed::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.25),rgba(255,255,255,0.6))}
header .brand-logo{color:var(--theme-petrol);display:inline-block;padding:12px 0;}
header .brand-logo:focus{outline:0!important}
header .brand-logo svg{height:45px;stroke-width:0;stroke:currentColor;fill:var(--theme-petrol);aspect-ratio:14 / 13}
header.header-neg .brand-logo svg{fill:var(--theme-petrol)!important}
header.is-fixed .brand-logo svg{height:25px;aspect-ratio:25 / 4}
header .header-back{position:absolute;left:1.5rem;top:24px}
header .header-back:focus{outline:0!important}
header .header-back svg{aspect-ratio:1/1;height:32px;stroke:none;fill:var(--theme-white);stroke-width:0}
header.header-neg .header-back svg{fill:var(--theme-petrol)!important}
header.header-trans .brand-logo svg{fill:none!important}
header.header-trans.is-fixed .brand-logo svg{fill:var(--theme-petrol)!important}
body.story header .brand-logo svg{fill:var(--theme-white)}
body.story header.is-fixed .brand-logo svg{fill:var(--theme-petrol)!important}
body.story header.is-fixed .header-back {top:10px}
body.story header.is-fixed .header-back svg {fill:var(--theme-petrol)}
header{filter:opacity(1);transition:filter .4s ease}
header.header-fade-out{filter:opacity(0)}
header.header-fade-in{filter:opacity(1)}
[hidden]{display:none!important}
header.is-hidden{opacity:0;pointer-events:none;transition:opacity .3s ease}

/* ANCHOR Main */

main{background-color:var(--theme-white)}

/* ANCHOR Footer */

.site-footer{padding:3rem 0 2rem}
.site-footer ul {list-style-type:none;padding:0;margin:0}
.site-footer ul a{text-decoration:none;color:var(--theme-white)}
.site-footer .footer-logo span{background:url(img/logo.svg) no-repeat center center;background-size:125px 20px;display:block;text-indent:-9999px;transition:all .2s;height:20px;width:125px;margin-bottom:1rem}
.footer-notice{font-size:.9rem;padding-bottom:var(--space-m);}

/* !SECTION */

/* ------------------------------------------------------------------------
// SECTION Blocks
------------------------------------------------------------------------ */

/* ANCHOR Spacer */

.spacer{padding:var(--space-xl) 0}
.spacer-top{padding-top:var(--space-xl)}
.spacer-bottom{padding-bottom:var(--space-xl)}
.spacer-top-extra{padding-top:var(--space-xxl)}
.spacer-bottom-small{padding-bottom:var(--space-s)}

/* ANCHOR Hero */

.hero{background:var(--theme-lightblue);background:radial-gradient(ellipse 100% 90%,var(--theme-lightblue),#5f83ad);position:relative;overflow:hidden;width:100%;aspect-ratio:19.2 / 10.8;z-index:1;display:flex;align-items:center;justify-content:center}
.video-wrapper{position:relative;width:100%;height:100%;max-height:100vh;aspect-ratio:19.2 / 10.8;overflow:hidden}
.video-wrapper video{width:100%;height:100%;object-fit:cover;}
.video-wrapper .video-controls{position:absolute;bottom:1rem;right:1rem;display:flex;gap:.5rem}
.video-wrapper .video-controls button{background:rgba(0,85,90,0.5);border:none;color:white;font-size:1rem;padding:.4rem .75rem;cursor:pointer;border-radius:.5rem;transition:background .3s ease}
.video-wrapper svg{fill:var(--theme-white);height:24px;aspect-ratio:1/1}
.video-wrapper .video-controls button:hover{background:var(--theme-petrol)}
.video-wrapper .big-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:0;background:rgba(0,85,90,0.5);color:white;padding:.75rem 1.5rem;border-radius:13px;cursor:pointer;z-index:2;transition:background .3s ease}
.video-wrapper .big-play-button:hover{background:rgba(0,85,90,1)}
.video-wrapper .big-play-button svg{display:block;width:40px;height:40px}
.video-wrapper .video-controls svg{pointer-events:none}
.hero-img{position:absolute;inset:0;z-index:2;background-size:100% auto;background-position:center center;background-repeat:no-repeat;width:100%;height:100%;aspect-ratio:19.2 / 10.8;overflow:hidden}

/* ANCHOR theW */

.theW{overflow:visible;position:relative;display:flex;justify-content:center;align-items:flex-start;transition:height .3s ease;z-index:1;opacity:1;visibility:visible;position:relative}
.theW svg{fill:none;stroke:#00555A;stroke-width:2px;stroke-opacity:1;fill-opacity:0;transition:transform .3s ease,fill .5s ease,stroke .5s ease,fill-opacity .5s ease,stroke-opacity .3s ease;transform-origin:top center;width:70%;height:auto;display:block;overflow:visible}
.theW-svg{fill:none;stroke:#00555A;stroke-width:2px;transition:fill .3s ease,stroke .3s ease}
.theW{transition:opacity .6s ease,visibility .6s ease}
.wSpace{height:var(--space-xxl);display:block;}
.theW-static{width:300px!important;height:auto;fill:var(--theme-petrol);overflow:visible;transform-origin:center}

/* ANCHOR Intro */

.intro{font-size:var(--h2)}
.intro p{margin-bottom:var(--space-m)}
.intro p:last-child{margin-bottom:0}

/* ANCHOR Labels */

.label{color:var(--theme-gray100);font-size:var(--theme-root-size);margin-bottom:var(--space-m);text-transform:uppercase}

/* ANCHOR Storys / Overview */

.storys h2{padding-bottom:0;}
.storys .story-item{margin:var(--space-l) 0 var(--space-xl) 0}
.storys .story-item h3{font-size:var(--h6);font-weight:600;padding:.5rem 0}
.storys .story-item p{font-size:.9rem;margin-bottom:var(--space-s)}
.storys .story-item img{border-radius: var(--theme-border-radius);}
.storys .story-item p:last-child{padding-top:var(--space-xs);}

/* ANCHOR Quotes */

blockquote p{color:var(--theme-white);text-align:center;font-size:var(--h2);line-height:1.2;font-weight:600;margin-bottom:var(--space-m)}
blockquote p:first-child::before{content:"„"}
blockquote p:first-child::after{content:"“"}
blockquote p:first-child{padding-top:var(--space-m)}
blockquote p:last-child{font-style:normal;font-size:var(--h6);font-weight:300;line-height:1.1;margin:0}
.bg-none blockquote p{color:var(--theme-teal)}

/* ANCHOR Interview */

.interview{font-style:italic}
.interview p:first-child,.interview strong{font-style: normal}

/* ANCHOR Persona */

.persona{display:flex;flex-direction:column;align-items:stretch}
.persona .left,.persona .right{flex:none;width:100%}
.persona .left img{width:100%;height:auto;object-fit:cover}
.persona .right{background:#e5e5e5;display:flex;align-items:center;justify-content:center;padding:var(--space-xl)}
.persona .right .content{max-width:640px}
.persona .right .content h2{color:var(--theme-blue);padding:var(--space-m) 0;text-align: left;}

/* ANCHOR Image block */

.image-block{display:flex;flex-direction:column;align-items:stretch}
.image-block .left,.image-block .right{flex:none;width:100%}
.image-block img{width:100%;height:auto;object-fit:cover}
.image-block .left img{border-bottom:4px solid var(--theme-white)}

/* ANCHOR Sharing is caring */

.txt-share{color:var(--theme-teal);text-align:center}
.txt-share ul{color:var(--theme-teal);list-style-type:none;margin:0 auto;padding:0}
.txt-share li{display:inline-block;margin:0 .15rem}
.txt-share [class^="icon-"],.txt-share [class*=" icon-"]{width:1.75em;transition:all .3s ease-in-out}
.txt-share a,.txt-share a:hover,.txt-share a:focus{box-shadow:none}
.txt-share a:hover [class^="icon-"],.txt-share a:hover [class*=" icon-"]{color:var(--theme-petrol)}
.text-animate span{opacity:0;display:inline-block;transform:translateY(0.3em);transition:opacity .4s ease,transform .4s ease}
.text-animate span.visible{opacity:1;transform:translateY(0)}

/* ANCHOR Infobox */

.infobox{border: 3px solid rgb(var(--theme-lightblue-rgb) / 40%);border-radius:var(--theme-border-radius);padding:var(--space-l)}
.infobox h2{color:var(--theme-gray100);font-size:var(--h4);padding-bottom:var(--space-s);text-align:left}
.infobox p:last-child{margin-bottom:0}

/* ANCHOR Before/After Slider */

.slideinfo{padding-bottom:var(--space-m)}
.slideinfo h2{padding-bottom:var(--space-s)}
.ba{--pos:50%;--handle-size:44px;--divider-width:2px;position:relative;width:100%;aspect-ratio:var(--ratio,auto);overflow:hidden;user-select:none;touch-action:none;background:transparent;border:1px solid rgba(var(--theme-gray100-rgb) / 30%)}
.ba[data-ratio="2/3"]{--ratio:2 / 3}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.ba__before{z-index:1}
.ba__after{z-index:2;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 var(--pos),transparent var(--pos));-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(90deg,#000 0%,#000 var(--pos),transparent var(--pos));mask-size:100% 100%;mask-repeat:no-repeat;will-change:mask-image}
.ba__divider{position:absolute;top:0;bottom:0;left:var(--pos);width:var(--divider-width);transform:translateX(calc(var(--divider-width) * -0.5));background:rgba(255,255,255,.95);z-index:3;pointer-events:none}
.ba__handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:var(--handle-size);height:var(--handle-size);border:none;border-radius:999px;background:rgba(var(--theme-gray100-rgb) / 30%);cursor:ew-resize;z-index:4;transition:var(--theme-transition-bg)}
.ba__handle:hover{background:rgba(255,255,255,.8)}
.ba__handle:focus{outline:none!important}
@supports not (mask-image: linear-gradient(#000, transparent)) {
  .ba__after{clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
}
@supports not (clip-path: inset(0 0 0 0)) {
  .ba__after{clip-path:none;width:var(--pos);overflow:hidden}
}

/* ANCHOR IO Video */

.io-video{aspect-ratio:16 / 9;width:100%;overflow:hidden}
.io-video video{width:100%;height:100%;object-fit:cover;display:block}

/* ANCHOR Slider */

.slide-wrapper{position:relative;width:100%}
.slide-wrapper[tabindex]:focus,.slide-wrapper[tabindex]:focus-visible{outline:none;outline-offset:0}
.slide-mask{width:100%;overflow:hidden;border-radius:var(--theme-border-radius)}
.slides{display:flex;width:100%;transition:transform .5s ease;will-change:transform;user-select:none}
.slide{flex:0 0 100%}
.slide img{display:block;width:100%;height:auto;border-radius:0}
.slide-controls{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;transform:translateY(-1.5rem);justify-content:space-between;padding:0 .5rem}
.slide-controls button{pointer-events:auto;background:rgba(0,85,90,0.5);border:none;color:white;font-size:1rem;padding:.4rem .75rem;cursor:pointer;border-radius:var(--theme-border-radius);transition:background .3s ease;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.slide-controls svg{fill:var(--theme-white);height:24px;aspect-ratio:1 / 1}
.slide-controls button:hover{background:var(--theme-petrol)}
.slide-controls button:disabled{visibility:hidden}
.slide-caption{opacity:1;transition:opacity .3s ease;height:2rem}
.slide-caption.is-fading{opacity:0}

/* ANCHOR Lazy Frame */

.fp-frame-wrapper{aspect-ratio:1 / 1.1;width:90vw;max-width:1320px;margin:0 auto;overflow:hidden;position:relative;border-radius:6px;box-shadow:0 6px 12px rgba(var(--theme-gray100-rgb) / 40%),0 12px 64px rgba(var(--theme-gray100-rgb) / 40%)}
.fp-frame-placeholder{all:unset;display:grid;place-items:center;width:100%;height:100%;cursor:pointer}
.fp-frame-placeholder img{width:100%;height:100%;object-fit:cover;z-index:1}
.fp-frame-play{color:var(--theme-petrol);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;text-align:center}
.fp-frame-play strong{display:block;font-size:var(--h3)}
.fp-frame{width:100%;height:100%;border:0;display:block}

/* !SECTION */

/* ------------------------------------------------------------------------
// SECTION Responsive, Baby!
------------------------------------------------------------------------ */

@media only screen and (max-width: 575px) {}

/* ANCHOR Small */

@media only screen and (min-width: 576px) {}

/* ANCHOR Medium */

@media only screen and (min-width: 768px) {}

/* ANCHOR Large */

@media only screen and (min-width: 992px) {
  header .brand-logo{padding-top:48px}
  header.is-fixed .brand-logo{padding-top:12px}
  header .brand-logo svg{height:90px}
  header.is-fixed .brand-logo svg{height:40px}
  header .header-back{left:3rem;top:64px}
  header .header-back:focus{outline:0!important}
  header .header-back svg{height:64px}
  body.story header.is-fixed .header-back{top:0}
  .hero{max-height:100vh}
  .storys .story-item{margin:var(--space-m) 0 0}
  .persona{flex-direction:row;flex-wrap:nowrap}
  .persona .left,.persona .right{flex:1 1 50%;width:50%}
  .persona .left img{height:100%}
  .image-block{flex-direction:row;flex-wrap:wrap}
  .image-block .left,.image-block .right{flex:0 0 50%;width:50%}
  .image-block img{height:100%}
  .image-block .left img{border-bottom:none;border-right:4px solid var(--theme-white)}
  .image-block figcaption{flex:0 0 100%;width:100%}
  .slideinfo{padding:0 0 0 var(--space-m)}
  .slide-controls{transform:translateY(-1.5rem);padding:0 1rem}
  .fp-frame-wrapper{aspect-ratio:3 / 2;}
}

/* ANCHOR Extra large */

@media only screen and (min-width: 1200px) {}

/* ANCHOR Beyond */

@media only screen and (min-width: 1400px) {}

/* !SECTION */

/*! END OF LINE */