/* maya bentele – kirby theme (reproduces the legacy bentele.ch design; no frameworks) */
@font-face{font-family:'Source Sans Pro';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/ssp-latin-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans Pro';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/ssp-latin-ext-300.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans Pro';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/ssp-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans Pro';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/ssp-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans Pfeile';font-weight:300;src:url('../fonts/Source-Sans-Pfeile-Light.woff2') format('woff2'),url('../fonts/Source-Sans-Pfeile-Light.woff') format('woff')}
@font-face{font-family:'Source Sans Pfeile';font-weight:400;src:url('../fonts/Source-Sans-Pfeile-Regular.woff2') format('woff2'),url('../fonts/Source-Sans-Pfeile-Regular.woff') format('woff')}

/* ---- grid (bootstrap-3 compatible subset; breakpoints: sm >= 480px, md >= 1024px) ---- */
*,*:before,*:after{box-sizing:border-box}
.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
.row{margin-left:-15px;margin-right:-15px}
.container-fluid:after,.row:after{content:" ";display:table;clear:both}
.container-fluid:before,.row:before{content:" ";display:table}
[class*="col-xs-"],[class*="col-sm-"],[class*="col-md-"]{position:relative;min-height:1px;padding-left:15px;padding-right:15px}
[class*="col-xs-"]{float:left}
.col-xs-1{width:8.33333333%}
.col-xs-2{width:16.66666667%}
.col-xs-3{width:25%}
.col-xs-4{width:33.33333333%}
.col-xs-5{width:41.66666667%}
.col-xs-6{width:50%}
.col-xs-7{width:58.33333333%}
.col-xs-8{width:66.66666667%}
.col-xs-9{width:75%}
.col-xs-10{width:83.33333333%}
.col-xs-11{width:91.66666667%}
.col-xs-12{width:100%}
.col-xs-offset-0{margin-left:0%}
.col-xs-offset-1{margin-left:8.33333333%}
.col-xs-offset-2{margin-left:16.66666667%}
.col-xs-offset-3{margin-left:25%}
.col-xs-offset-4{margin-left:33.33333333%}
.col-xs-offset-5{margin-left:41.66666667%}
.col-xs-offset-6{margin-left:50%}
.col-xs-offset-7{margin-left:58.33333333%}
.col-xs-offset-8{margin-left:66.66666667%}
.col-xs-offset-9{margin-left:75%}
.col-xs-offset-10{margin-left:83.33333333%}
.col-xs-offset-11{margin-left:91.66666667%}
@media (min-width:480px){
[class*="col-sm-"]{float:left}
.col-sm-1{width:8.33333333%}
.col-sm-2{width:16.66666667%}
.col-sm-3{width:25%}
.col-sm-4{width:33.33333333%}
.col-sm-5{width:41.66666667%}
.col-sm-6{width:50%}
.col-sm-7{width:58.33333333%}
.col-sm-8{width:66.66666667%}
.col-sm-9{width:75%}
.col-sm-10{width:83.33333333%}
.col-sm-11{width:91.66666667%}
.col-sm-12{width:100%}
.col-sm-offset-0{margin-left:0%}
.col-sm-offset-1{margin-left:8.33333333%}
.col-sm-offset-2{margin-left:16.66666667%}
.col-sm-offset-3{margin-left:25%}
.col-sm-offset-4{margin-left:33.33333333%}
.col-sm-offset-5{margin-left:41.66666667%}
.col-sm-offset-6{margin-left:50%}
.col-sm-offset-7{margin-left:58.33333333%}
.col-sm-offset-8{margin-left:66.66666667%}
.col-sm-offset-9{margin-left:75%}
.col-sm-offset-10{margin-left:83.33333333%}
.col-sm-offset-11{margin-left:91.66666667%}
}
@media (min-width:1024px){
[class*="col-md-"]{float:left}
.col-md-1{width:8.33333333%}
.col-md-2{width:16.66666667%}
.col-md-3{width:25%}
.col-md-4{width:33.33333333%}
.col-md-5{width:41.66666667%}
.col-md-6{width:50%}
.col-md-7{width:58.33333333%}
.col-md-8{width:66.66666667%}
.col-md-9{width:75%}
.col-md-10{width:83.33333333%}
.col-md-11{width:91.66666667%}
.col-md-12{width:100%}
.col-md-offset-0{margin-left:0%}
.col-md-offset-1{margin-left:8.33333333%}
.col-md-offset-2{margin-left:16.66666667%}
.col-md-offset-3{margin-left:25%}
.col-md-offset-4{margin-left:33.33333333%}
.col-md-offset-5{margin-left:41.66666667%}
.col-md-offset-6{margin-left:50%}
.col-md-offset-7{margin-left:58.33333333%}
.col-md-offset-8{margin-left:66.66666667%}
.col-md-offset-9{margin-left:75%}
.col-md-offset-10{margin-left:83.33333333%}
.col-md-offset-11{margin-left:91.66666667%}
}

/* ---- base ---- */
html{height:100%;-webkit-text-size-adjust:100%}
body{font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.27em;font-weight:300;text-transform:lowercase;font-size:20px;
  height:100%;margin:0;padding:0;color:#000;background-color:#FAFAFA;overflow-y:scroll;-webkit-hyphens:auto;hyphens:auto}
body *{line-height:1.27em;vertical-align:baseline;font-weight:inherit;font-family:inherit;font-style:inherit;font-size:100%;border:0 none;outline:0;padding:0;margin:0}
body a,body a:hover,body a:active,body a:visited,body a:focus{outline:0;text-decoration:none}
body strong,body b{font-weight:400}
a{color:#005C9C}
img{border:0;vertical-align:middle;max-width:100%;height:auto}
svg{max-width:100% !important}
ul,ol{padding-left:1em}
ul{list-style:none}
ul>li:before{display:inline-block;content:"—";width:1em;margin-left:-1em}
ol{list-style:decimal outside}
li p{display:inline}
.spacer{width:100%;height:1px}
.gutter0{padding:0}
div.content .para.indent-r{padding-right:30px}
div.content .hide{display:none !important}
.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.container-fluid{position:relative;width:100%;max-width:1170px}
div.content *{font-family:inherit}

/* ---- links with arrows ---- */
a.int:after,a .int:after{font-family:'Source Sans Pfeile';content:'→';display:inline-block;vertical-align:top;padding:0 3px 0 10px;transition:padding .3s}
a.int:hover:after,a:hover .int:after{padding:0 0 0 13px}
a.down:before,a .down:before{font-family:'Source Sans Pfeile';content:'⤓';display:inline-block;vertical-align:top;padding-right:10px;position:relative;top:-4px}
a.ext,.text a[target="_blank"]{position:relative;display:inline-block;padding-left:1em}
a.ext:before,.text a[target="_blank"]:before{font-family:'Source Sans Pfeile';content:'→';display:inline-block;vertical-align:top;position:absolute;left:0;top:0;transition:left .3s}
a.ext:hover:before,.text a[target="_blank"]:hover:before{left:3px}
.p-image a[target="_blank"],.p-image-wrapper a{padding-left:0}
.p-image a[target="_blank"]:before{content:none}

/* ---- headings ---- */
h1{text-transform:lowercase;color:#005c9c;font-size:25px;margin:0 0 32px 0}
.c_home .intro h1{color:#000}
h2,h3{font-size:20px;margin-bottom:25px}
h3{color:#000}
h2{color:#005c9c}
.project .text h2:not(:first-child){margin-top:2.54em}  /* margins collapse with the paragraph above: = two blank lines like the legacy site */
.project .text p:has(+ ul),.project .text p:has(+ ol){margin-bottom:0}

/* ---- layout ---- */
.site-wrapper{padding:300px 15px 60px 15px;margin-bottom:250px;background-color:#FAFAFA}
header{position:fixed;left:0;top:60px;width:100%;padding:0 15px;z-index:200}
header .logo{text-align:center}
.logo .title{color:#005c9c;text-transform:lowercase;letter-spacing:.3px}
#icon-container{z-index:10}
.navbutton{position:absolute;top:0;left:0;width:60px;height:60px;cursor:pointer;background:none;border:0;padding:0}
.js .navbutton{opacity:0;visibility:hidden}
html:not(.js) .navbutton{display:none}
html:not(.js) .nav-wrapper{display:block}
.navbutton svg{display:block;width:100%;height:100%}
.navbutton rect{transform-box:fill-box;transform-origin:center;transition:transform .3s ease-in,opacity .2s}
.mnu_active .navbutton #l1{transform:translateY(28.5px) rotate(45deg)}
.mnu_active .navbutton #l3{transform:translateY(-28.5px) rotate(-45deg)}
.mnu_active .navbutton #l2{opacity:0}
.js .navbutton.is-visible{opacity:1;visibility:visible;transition:opacity .3s}
footer{font-size:16px;background-color:#F0F0F0;padding:20px 15px 0 15px;position:fixed;bottom:0;left:0;width:100%;margin:0;z-index:-1}
footer a,footer a:hover,.navmnu a{color:#000}
.container-fluid.gutter0{padding:0}
#progress{display:none}

/* navigation */
.nav-wrapper{display:none}
.mnu_active .nav-wrapper{display:block;animation:navin .5s ease-out both}
.mnu_active .hide_mnu{display:none}
@keyframes navin{from{opacity:0;padding-top:40vh}to{opacity:1;padding-top:0}}
.navmnu ul{list-style:none;float:left;padding-left:0}
.navmnu ul li{display:block}
.navmnu ul>li:before{display:none}
.navmnu .active a,.navmnu a:hover{color:#005C9C}
#default_menu_lernen.active a,#default_menu_lernen a:hover{color:#D8232A}
#default_menu_entwickeln.active a,#default_menu_entwickeln a:hover{color:#CC9900}
#default_menu_veraendern.active a,#default_menu_veraendern a:hover{color:#008E5D}

/* content */
.text,.intro{margin-bottom:25px}
.details{font-size:16px;margin-bottom:20px}
.project{padding-bottom:76px}
.project .text p{margin:0 0 1.27em 0}
.project .text p:last-child{margin-bottom:0}
.project .text ul,.project .text ol{margin:0 0 1.27em 0}
.project .text li p{margin:0}
.project .col-md-4 .text p{margin:0}
.project .col-md-4 .text p + p{margin-top:0}
.project .block-image{margin:0 0 25px 0}
.p-image{padding-top:0}
.p-image-wrapper{position:relative}
.p-image img{display:block;width:100%;height:auto}
.p-image span{padding-top:.5em;display:block;font-size:70%}
.text-block{margin-bottom:25px}

/* teaser cards */
.beitrag{border:3px solid #005C9C;padding:0;display:block;position:relative;overflow:hidden;aspect-ratio:1/1}
.beitrag .padding{display:block;padding:30px 15px;color:#000}
.thema{padding:0;display:block;position:relative}
.thema .padding{display:block;padding:60px 0;color:#000}
.beitrag.c_lernen{border-color:#D8232A}
.beitrag.c_entwickeln{border-color:#FFDA1A}
.beitrag.c_veraendern{border-color:#008E5D}
.beitrag.c_beitraege{border-color:#005C9C}
.c_beitraege .color,.c_beitraege h1,.c_beitraege h2,.c_beitraege a.ref,.c_beitraege .text a{color:#005C9C !important}
.c_lernen .color,.c_lernen h1,.c_lernen h2,.c_lernen a.ref,.c_lernen .text a{color:#D8232A !important}
.c_entwickeln .color,.c_entwickeln h1,.c_entwickeln h2,.c_entwickeln a.ref,.c_entwickeln .text a{color:#CC9900 !important}
.c_veraendern .color,.c_veraendern h1,.c_veraendern h2,.c_veraendern a.ref,.c_veraendern .text a{color:#008E5D !important}
.c_home .intro a{color:#005C9C}
.fhide{display:none}
.filter a.bold{font-weight:400}
.noentry{display:none}
.card-row.is-hidden{display:none}

/* rotation of cards (from mobile landscape) */
@media (min-width:480px){
  .rotate-tr,.rotate-bl{transform:rotate(-90deg);transition:transform .5s ease-out}
  .rotate-tr{transform-origin:100% 0}
  .rotate-bl{transform-origin:0 100%}
  .rotate.is-flat .rotate-tr,.rotate.is-flat .rotate-bl,.no-js .rotate-tr,.no-js .rotate-bl{transform:none}
}
@media (prefers-reduced-motion:reduce){.rotate-tr,.rotate-bl{transform:none !important;transition:none}}

/* free pages */
.text-page .text{max-width:100%}
.text-page .text p{margin:0 0 1.27em}
.text-page .text h1{margin-top:2em}
.text-page .text h1:first-child{margin-top:0}
.text-page .text h2{margin-top:1.5em}
.text-page .text h3{margin-top:1.2em;margin-bottom:.6em;font-size:inherit}
.text-page .text ul{margin:0 0 1.27em}


/* profil / generic paragraph classes (as in legacy CSS) */
.pull-left{float:left !important}.pull-right{float:right !important}
.pull-center{float:none;margin-left:auto;margin-right:auto}
.para.indent-b{padding-bottom:25px}
.p_left_0,.p_left_0_details{padding-left:0;padding-right:30px}
.para.indent-b.p_left_0_details{font-size:16px;padding-bottom:20px}
.indent-t-0{margin-top:0}.indent-t-2{margin-top:16.66666667%}
.profil p{margin:0 0 1.27em}
.profil p:last-child{margin-bottom:0}
.profil ul{margin:0}
.profil .image img{display:block;width:100%;height:auto}
.profil .details a[target="_blank"]{display:inline-block}
@media (max-width:767px){.indent-sm-t-0{margin-top:0}}
@media (max-width:479px){.indent-xs-t-0{margin-top:0}}
@media (min-width:768px){.para.indent-b{padding-bottom:28px}}
@media (min-width:1024px){.para.indent-b{padding-bottom:42px}.para.indent-b.p_left_0_details{font-size:22px;padding-bottom:28px}}
@media (max-width:1023px){.para.indent-b.p_left_0_details{padding-bottom:20px}}

/* form */
.form-group{margin-bottom:25px}
.form-group:after{content:" ";display:table;clear:both}
label{display:inline-block;max-width:100%;margin-bottom:5px}
.required label{font-weight:400}
.form-control{display:block;width:100%;height:auto;padding:6px 12px;font-size:inherit;line-height:inherit;color:#000;border:3px solid #005C9C;border-radius:0;box-shadow:none;background-color:#fafafa;text-transform:none;-webkit-appearance:none;appearance:none}
.form-control:focus{border-color:#005C9C;outline:0;box-shadow:none}
textarea{resize:none}
.select{position:relative}
.select:after{font-family:'Source Sans Pfeile';color:#005C9C;content:'↓';display:block;position:absolute;right:15px;top:8px;pointer-events:none}
select.form-control{text-indent:.01px;text-overflow:""}
.has-error .control-label,.has-error .help-block{color:#D8232A}
.has-error .form-control{border-color:#D8232A}
.help-block{display:block;margin-top:5px;font-size:70%;color:#D8232A}
.form-message{border:3px solid #008E5D;padding:20px;margin-bottom:42px}
.form-message.error{border-color:#D8232A}
.f2mail input[type=checkbox]{width:auto;height:auto;margin:0 10px 0 0;vertical-align:middle;-webkit-appearance:checkbox;appearance:checkbox;accent-color:#005C9C}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-submit{background:none;border:0;cursor:pointer;color:#005C9C;font-size:inherit;padding:0;text-transform:lowercase}

/* ---- logo animation ---- */
.passiveToActive{transform:translateX(-60px);animation:animate_passiveToActive .5s forwards ease-in-out}
.delay1{animation-delay:1s}.delay2{animation-delay:1.5s}.delay3{animation-delay:2s}.delay4{animation-delay:2.5s}
@keyframes animate_passiveToActive{0%{transform:translateX(-60px)}100%{transform:translateX(0)}}
.activeToPassive{transform:translateX(0);animation:animate_activeToPassive .5s forwards ease-in-out}
@keyframes animate_activeToPassive{0%{transform:translateX(0)}100%{transform:translateX(-60px)}}

/* ---- loading states (JS only) ---- */
.js main{opacity:0;transition:opacity .5s}
.js main.is-ready{opacity:1}
.js .site-wrapper,.js footer{visibility:hidden}
.js.is-shown .site-wrapper,.js.is-shown footer{visibility:visible}
.js .logo .title-wrapper{transition:opacity .3s}
.js .title-wrapper.is-faded{opacity:0;pointer-events:none}
.js .c_home header .container-fluid{transition:padding-top 1s cubic-bezier(.215,.61,.355,1)}

/* ---- breakpoints (text sizes like legacy site) ---- */
@media (min-width:480px){h1{font-size:33px;margin-bottom:42px}}
@media (min-width:768px){
  h1{font-size:44px;margin-bottom:56px}
  h2,h3{font-size:22px;margin-bottom:28px}
  body{font-size:22px}
  .text,.intro{margin-bottom:28px}
  .beitrag{border-width:4px}
  .logo .title{font-size:60px}
  .project{padding-bottom:90px}
  .form-group{margin-bottom:28px}
  label{margin-bottom:10px}
  .text-block{margin-bottom:28px}
}
@media (min-width:1024px){
  h1{font-size:60px;margin-bottom:76px}
  h2,h3{font-size:33px;margin-bottom:42px}
  body{font-size:33px}
  .text,.intro{margin-bottom:42px}
  footer{font-size:22px;padding-top:28px}
  .details,.profil .details{font-size:22px;margin-bottom:28px}
  .project{padding-bottom:90px}
  .form-group{margin-bottom:42px}
  label{margin-bottom:15px}
  .text-block{margin-bottom:42px}
  .text-page .text h3{font-size:inherit}
}
@media (max-width:767px){
  header{top:30px}
  .navbutton{width:30px;height:30px}
  .logo .title{font-size:30px}
  .site-wrapper{padding:150px 15px 30px 15px}
  #iconSVG{height:30px}
  .profil .details{font-size:16px}
}
@media (min-width:480px) and (max-width:767px){.logo .title{font-size:30px}}
@media (max-width:479px){h2,h3{font-size:20px}}
@media print{header,footer,.navbutton{position:static}.site-wrapper{padding-top:20px;margin-bottom:0}}