/*
    Theme Name: Drachenboot-Rennen 
    Author: Birke und Partner GmbH (Pedro Stoehr / Antidot.io)
    Author URI: https://birke.de
    Version: 260305.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/Source_Sans_3/SourceSans3.css');
@import url('../vendor/lightgallery-2.8.2/css/lightgallery-bundle.min.css');

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

:root {
    /* Fonts */
    --theme-font: 'Source Sans 3', Helvetica, Arial, sans-serif;
    --theme-root-size: 1.2rem;
    --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-blue: #17458d;
    --theme-blue-rgb: 23 69 141;
    --theme-lightblue: #1bb5ea;
    --theme-lightblue-rgb: 27 181 234;
    --theme-orange: #f7a81b;
    --theme-orange-rgb: 247 168 27;
    --theme-gray: #d0cfcd;
    --theme-gray-rgb: 208 207 205;
    /* 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;
    --theme-icon-youtube: url(img/icon_youtube.svg);
}

/* ------------------------------------------------------------------------
// 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 Bootstrap
------------------------------------------------------------------------ */

.container{padding:0 1.5rem;max-width:1440px!important;position: relative}
.img-fluid{height:auto;max-width:100%;width:100%}

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

h1{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}
.intro{font-weight:600;}

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

/* ANCHOR html, body */

html,body{margin:0;padding:0;width:100%;height:100%}
body{background:var(--theme-white) url(img/backdrop.svg) repeat-x center bottom;background-attachment:fixed;background-size:960px 120px;color:var(--theme-blue);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{text-align:center}
header .brand-logo{color:var(--theme-petrol);display:inline-block;padding:var(--space-l) 0 var(--space-m)}
header .brand-logo:focus{outline:0!important}
header .brand-logo svg{height:64px;stroke-width:0;aspect-ratio:60 / 23}
.mastHead svg{width:100%;height:auto;display:block}

/* 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)}
.spacer-bottom-md{padding-bottom:var(--space-m)}
.spacer-bottom-lg{padding-bottom:var(--space-l)}
.spacer-top-lg{padding-top:var(--space-xl)}
.spacer-top-m{padding-top:var(--space-m)}
.spacer-end{padding-bottom:300px;}

/* ANCHOR Text */

.info{font-size:.9rem}
.date{font-size:var(--h2);font-weight:800;padding:var(--space-s) 0 var(--space-m);text-align:center}

/* ANCHOR Elements */

.hero-intro{height:160px;position:relative}
.hero-intro .element-right{margin:0;position:absolute;right:50%;top:0;transform:translateX(50%);width:auto}
.hero-intro .element-left{left:50%;margin:0;position:absolute;top:0;transform:translateX(-50%);width:auto}
.drum svg,.boat svg{display:block;height:auto;max-width:100%;width:140px}
.cta-link{background-color:var(--theme-blue);border-radius:10px;color:var(--theme-white);display:block;font-weight:600;padding:2rem;position:relative;text-align:center;text-decoration:none;transition:.5s ease all}

/* ANCHOR Frames + Video */

.frame-container{aspect-ratio:16 / 9;border-radius:10px;margin-top:var(--space-l);overflow:hidden;position:relative;width:100%}
.frame-container iframe,.frame-container video,.frame-container embed,.frame-container object{border:0;height:100%;width:100%}
.link-yt{position:relative;border-radius: 10px; overflow: hidden;}
.link-yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--theme-icon-youtube) no-repeat 0 0;background-size:64px 45px;height:45px;width:64px}

/* ANCHOR Sponsors */

.client-image{align-items:center;display:flex;height:90px;justify-content:center;margin-bottom:1rem;padding:10px}
.client-image img{display:inline-block;height:100%;max-width:140px;max-height:90px;width:auto}

/* ANCHOR Gallery */

.lightroom{--min-width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min-width),1fr));gap:20px}
.lightroom .portrait img,.lightroom .landscape img{-o-object-fit:cover;object-fit:cover;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}
.lightroom .portrait{grid-column:span 1;aspect-ratio:4/5.25}
.lightroom .landscape{grid-column:span 1;aspect-ratio:8/4.85}
.lightroom .portrait-empty{display:none}
.lightroom-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;border-radius:10px}
.lightroom img{transform:scale(1);transition:.5s transform ease-out}
.lightroom-item{overflow:hidden}
.lightroom-item:hover img{transform:scale(1.05)}
@media screen and (min-width:30em) {
  .lightroom{grid-template-columns:repeat(4,1fr)}
  .lightroom .landscape{grid-column:span 2}
}
@media screen and (min-width:61.25em) {
  .lightroom{grid-template-columns:repeat(5,1fr)}
  .lightroom .portrait-empty{display:block}
}
@media screen and (min-width:71.875em) {
  .lightroom{gap:40px}
}

/* !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) {
  .drum{margin-top:var(--space-l)}
  .hero-intro{height:auto}
  .hero-intro .element-right{position:absolute;top:0;right:1.5rem;transform:none;width:auto;margin:0}
  .hero-intro .element-left{position:absolute;top:0;left:1.5rem;transform:none;width:auto;margin:0}
  .drum svg{width:240px}
  .boat svg{width:240px}
}

/* ANCHOR Extra large */

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

/* ANCHOR Beyond */

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

/* !SECTION */

/*! END OF LINE */