/* Generated by less 3.11.1 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace,monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace,monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Submariner Extra Bold by Type Fleet
 * URL: https://www.myfonts.com/collections/submariner-font-type-fleet
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 *
 * Webfont: Submariner Light by Type Fleet
 * URL: https://www.myfonts.com/collections/submariner-font-type-fleet
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 *
 * Webfont: Submariner Extra Bold Italic by Type Fleet
 * URL: https://www.myfonts.com/collections/submariner-font-type-fleet
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 * 
 * © 2023 MyFonts Inc. */
@font-face {
  font-family: "submariner";
  src: url('../assets/fonts/SubmarinerLight/font.woff2') format('woff2'), url('../assets/fonts/SubmarinerLight/font.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "submariner";
  src: url('../assets/fonts/SubmarinerExtraBold/font.woff2') format('woff2'), url('../assets/fonts/SubmarinerExtraBold/font.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "submariner";
  src: url('../assets/fonts/SubmarinerExtraBoldItalic/font.woff2') format('woff2'), url('../assets/fonts/SubmarinerExtraBoldItalic/font.woff') format('woff');
  font-weight: 800;
  font-style: italic;
}
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 3.2vw;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  /* font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1600 - 320))); */
  font-size: 20px;
}
body {
  width: 100%;
  height: 100%;
  font-size: 100%;
  box-sizing: border-box;
  background: var(--color-bg-general);
}
#control-tablet,
#control-desktop,
#control-desktop-xl {
  display: none;
}
#control-mobile {
  display: inline;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
*,
input {
  margin: 0px;
  padding: 0px;
  font-family: "submariner", Arial, Helvetica;
  font-weight: 300;
  font-size: 100.01%;
  line-height: 100.01%;
  text-decoration: none;
  border: 0px none;
  list-style: none;
  -webkit-text-size-adjust: none;
}
div {
  vertical-align: top;
}
*,
h1,
h2,
h3,
table caption {
  font-size: 20px;
  font-size: 5vw;
  font-size: 1rem;
  line-height: 1.5em;
  font-weight: 300;
  padding: 0;
  margin: 0;
  text-align: left;
}
h1,
h1 *,
h2,
h2 *,
table caption,
table caption * {
  font-weight: 800;
  font-size: 25px;
  font-size: 1.15rem;
}
h1,
h1 *,
.table-caption {
  text-transform: uppercase;
}
h1,
.table-caption {
  margin-bottom: 1.5em;
}
h3,
h3 * {
  font-weight: 300;
}
p,
#content ul,
table {
  margin: 0 0 1.5em 0;
  padding: 0 0 0 0;
}
h2:last-child {
  margin-bottom: 1.5em;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
a,
a * {
  text-decoration: none;
}
a:hover,
a:hover * {
  text-decoration: underline;
}
strong,
strong *,
bold,
bold *,
.bold,
.bold * {
  font-weight: 800;
}
strong.b,
strong.b *,
bold.b,
bold.b *,
.bold.b,
.bold.b * {
  font-weight: 800;
}
nav ol,
nav ul {
  padding: 0;
  margin: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  padding-top: 0;
}
#website {
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "header" "content" "footer";
  grid-template-rows: auto 1fr auto;
  background-color: var(--color-bg-website);
}
#header {
  grid-area: header;
  width: 100%;
  height: 0;
  padding-bottom: 22.5%;
  background-color: var(--color-bg-header);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
}
.sec {
  padding-top: 22.5%;
  margin-top: -22.5%;
}
.scrolled #header {
  box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.3);
}
#logo {
  position: relative;
  display: inline-block;
  width: 100%;
  min-height: 25vw;
}
#footer {
  grid-area: footer;
  bottom: 0;
  background-color: var(--color-bg-header);
  padding: 1em;
}
.dom-kb #logo::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 25%;
  height: 100%;
  content: " ";
  background-image: url(logo-kombuese-53-grad-oberndorf-oste.svg);
  background-repeat: no-repeat;
  background-size: auto;
}
#menu1 {
  display: none;
}
#rd-menu-opener-input {
  display: none;
}
#rd-menu-opener {
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  width: 10%;
  margin: 5% 0 0 2.5%;
  padding: 0 0 1.5% 0;
  padding: 0;
  cursor: pointer;
  white-space: normal;
  z-index: 1001;
  line-height: 0;
  /* transition: all 1s ease; */
  pointer-events: auto;
}
#rd-menu-opener line {
  stroke: var(--color-fg-general);
}
#rd-menu-opener-input + label > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  padding-bottom: 10%;
  opacity: 1;
}
#rd-menu-opener-input:not(:checked) + label > svg.closer {
  opacity: 0;
}
#rd-menu-opener-input:checked + label > svg.closer {
  opacity: 1;
}
#rd-menu-opener-input:checked + label > svg.opener {
  opacity: 0;
}
#rd-menu-opener-input:checked + label + #menuMobile {
  margin-right: 0;
  display: block;
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}
#menuMobile {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  background: var(--color-bg-general);
  margin-right: 100%;
  transition: 1s;
  padding: 16% 3% 4% 3%;
  z-index: 1200;
}
#menuMobile ul {
  display: inline;
  margin: 0;
  padding: 0;
}
.menuRd-menuitem {
  display: inline-block;
  width: 100%;
}
.menuRd-menuitem::after {
  content: " ";
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-fg-general);
}
.menuRd-menuitem-menuitem::after {
  border-bottom: none;
}
.menuRd-menuitem-menuitem .menuitem-a::before,
.menu-maincats-menuitem .menuitem-a::before,
.breadcrumb-item a::before {
  content: "\00A0\002F\002F\00A0\00A0";
  font-weight: normal;
}
.menu-maincats-menuitem:first-child .menuitem-a::before,
.breadcrumb-item:first-child a::before {
  content: "";
}
.menuitem-a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: var(--color-fg-general);
  font-weight: 800;
  padding: 0.1em 0 0.5em 0;
}
#footer .menu-mainarts-menuitem {
  display: inline;
  border-right: 1px solid #fff;
}
#footer .menu-mainarts-menuitem:last-child {
  border-right: none;
}
#footer .mi-a-root {
  display: inline;
  width: auto;
  padding: 0 1em 0 1em;
}
#claim {
  width: 100%;
  padding: 3% 0 0 16%;
}
#claim,
#claim * {
  color: #fff;
  font-style: var(--claim-font-style);
  text-transform: none;
  font-size: 5.5vw;
  line-height: 1.3em;
  letter-spacing: 0.05em;
}
#claim img,
#claim svg {
  height: 1em;
  width: auto;
  margin: 0 0 -0.1em 0.2em;
}
.sec-opener {
  display: none;
}
.sec-opener:not(:checked) + label + .sec-content {
  display: block;
  width: 100%;
  max-height: 0px;
  transition: max-height 1000ms ease-in-out;
  transition: opacity 1000ms ease-in-out;
  overflow-y: hidden;
}
.sec-opener:checked + label + .sec-content {
  padding-bottom: 22.5%;
  max-height: 99999px;
}
.sec-opener + label {
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  background: #fff;
  padding: 0.6em 2% 0.6em 2%;
  background-size: 100% auto;
}
.sec-opener + label::before {
  display: block;
  width: 8%;
  height: 100%;
  content: " ";
  position: absolute;
  left: 2%;
  top: 20%;
  background-image: var(--url-sec-opener);
  background-repeat: no-repeat;
  background-size: 100%;
}
.sec-opener:checked + label::before {
  background-image: var(--url-sec-closer);
}
label h1 {
  width: 100%;
  margin-bottom: 0;
  color: var(--color-sec-opener);
  padding: 0 0 0 14.5%;
  text-transform: none;
  font-size: 5vw;
}
#content {
  grid-area: content;
  padding-top: 22.5%;
}
.sec .sec-content {
  transition: max-height 500ms ease-in-out;
}
.sec .sec-content,
.sec .sec-content * {
  color: #333;
  font-size: 1rem;
}
.sec .sec-content h1,
.sec .sec-content h1 *,
.sec .sec-content h2,
.sec .sec-content h2 * {
  font-size: 1.15rem;
}
.sec.od-style-01 .sec-content {
  background: var(--color-od-6);
}
.sec.od-style-01 .sec-content,
.sec.od-style-01 .sec-content * {
  color: var(--color-od-1);
}
.sec.od-style-01 .sec-content a,
.sec.od-style-01 .sec-content a * {
  color: var(--color-od-5);
  font-weight: 800;
}
.sec.od-style-02 .sec-content {
  background: var(--color-od-8);
}
.sec.od-style-02 .sec-content a,
.sec.od-style-02 .sec-content a * {
  color: var(--color-od-5);
  font-weight: 800;
}
.sec.od-style-03 .sec-content {
  background: var(--color-od-7);
}
.sec.od-style-03 .sec-content a,
.sec.od-style-03 .sec-content a * {
  color: var(--color-od-5);
  font-weight: 800;
}
.sec.color-kb-3 .sec-content {
  background: var(--color-kb-3);
}
.sec .sec-content h1 {
  margin-bottom: 0;
}
.sec .sec-content h1,
.sec .sec-content h1 * {
  font-weight: 800;
  text-transform: none;
  font-style: italic;
}
.sec .sec-content h2,
.sec .sec-content h2 * {
  font-weight: 800;
  /* eigentlich light, Schrift fehlt aber */
  text-transform: none;
  font-style: italic;
  color: var(--color-bg-general);
}
.sec.color-kb-1 .sec-content h2,
.sec.color-kb-1 .sec-content h2 * {
  color: var(--color-kb-1);
}
.sec.color-kb-2 .sec-content h2,
.sec.color-kb-2 .sec-content h2 * {
  color: var(--color-kb-2);
}
.sec.color-kb-3 .sec-content h2,
.sec.color-kb-3 .sec-content h2 * {
  color: var(--color-kb-3);
}
.sec.color-kb-4 .sec-content h2,
.sec.color-kb-4 .sec-content h2 * {
  color: var(--color-kb-4);
}
.sec.color-kb-5 .sec-content h2,
.sec.color-kb-5 .sec-content h2 * {
  color: var(--color-kb-5);
}
.sec.color-kb-5 .txtblock {
  background-color: var(--color-bg-website);
}
.sec.color-kb-6 .sec-content h2,
.sec.color-kb-6 .sec-content h2 * {
  color: var(--color-kb-6);
}
.sec.color-kb-7 .sec-content h2,
.sec.color-kb-7 .sec-content h2 * {
  color: var(--color-kb-7);
}
.sec.color-kb-8 .sec-content h2,
.sec.color-kb-8 .sec-content h2 * {
  color: var(--color-kb-8);
}
.sec.color-kb-9 .sec-content h2,
.sec.color-kb-9 .sec-content h2 * {
  color: var(--color-kb-9);
}
.sec.color-kb-3 .sec-content h1,
.sec.color-kb-3 .sec-content h1 * {
  color: var(--color-kb-3);
}
.secUp {
  display: inline-block;
  width: 100%;
  height: 1em;
}
.txtblock {
  display: inline-block;
  width: 100%;
  padding: 1.3em 5% 0 5%;
}
.txtblock:not(.block-a2z) + .txtblock {
  margin-top: -1.3em;
}
.block-a2z {
  border-bottom: 0.5em solid var(--color-od-4);
  padding: 1.3em 5% 0 5%;
}
.logogrid {
  width: 100%;
  column-width: 10em;
  column-gap: 0;
}
.logogrid .pic-teaser {
  border-bottom: 0.5em solid var(--color-bg-header);
}
.teasergrid {
  column-count: 2;
  column-gap: 0;
}
.dom-od .teasergrid {
  background-color: #dbe0c0;
}
.teamgrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5em;
}
.sec.color-kb-5 .teamgrid {
  background: var(--color-kb-5);
}
.sec.color-kb-5 .teamgrid + .teamgrid {
  border-top: 0.5em solid var(--color-kb-5);
}
.teamgrid-item {
  display: block;
  width: 100%;
}
.eventblock {
  background: #fff;
}
.eventblock + .eventblock {
  margin-top: 0.5em;
}
@media screen and (min-width: 40em) {
  .block-pictxt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom: 0.5em solid var(--color-bg-header);
  }
  .teamgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 0.5em;
  }
  .teamgrid-item {
    display: block;
    width: 100%;
  }
  .logogridX {
    column-count: 2;
    column-gap: 0;
  }
}
@media screen and (min-width: 64em) {
  html {
    font-size: 20px;
  }
  #control-mobile,
  #control-desktop,
  #control-desktop-xl {
    display: none;
  }
  #control-tablet {
    display: inline;
  }
  .dom-od .sec {
    padding-top: 0;
    margin-top: 0;
  }
  .dom-od .sec-opener + label {
    vertical-align: top;
    padding: 1.5em 0 1.5em 0;
    z-index: 1100;
  }
  .sec-opener + label::before {
    display: none;
  }
  .dom-od .sec-content {
    display: block!important;
    max-height: unset!important;
  }
  label h1 {
    padding: 0 5% 0 5%;
    font-size: 1.25rem;
  }
  .dom-od .sec:first-child {
    grid-area: firstcol;
  }
  .dom-od .sec:nth-child(2) {
    grid-area: secondcol;
  }
  .dom-od .sec:nth-child(3) {
    grid-area: thirdcol;
  }
  .dom-od .teasergrid {
    grid-area: teasergrid;
  }
  .dom-od #website {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "header header . " "content content content" "footer footer footer";
    grid-template-rows: auto 1fr auto;
  }
  #header {
    height: auto;
    padding-bottom: 0;
  }
  .scrolled #header {
    box-shadow: none;
  }
  .dom-od #header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "opener claim";
    z-index: auto;
  }
  .dom-kb #header {
    display: none;
  }
  .dom-od #rd-menu-opener {
    grid-area: opener;
    width: 15%;
    z-index: 1201;
  }
  #claim {
    grid-area: claim;
    padding-left: 5%;
  }
  #claim,
  #claim * {
    font-size: 2vw;
  }
  #menuMobile {
    margin-right: 200%;
  }
  .dom-od #content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "firstcol thirdcol teasergrid" "firstcol secondcol teasergrid ";
    grid-template-rows: auto 1fr;
    padding-top: 0;
  }
  .dom-kb #content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    padding-top: 0;
  }
  .dom-kb #content #logo {
    grid-row: 1 / span 99;
    background-color: var(--color-kb-2);
  }
  .dom-kb #content #logo img {
    display: none;
  }
  .dom-kb #logo::after {
    width: 100%;
  }
  .dom-kb .sec-opener + label::before {
    display: block;
    left: 0;
    top: 0;
    padding: 0;
    width: 4%;
    background-image: none;
  }
  .dom-kb.act-color-kb-1 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-1 #tablet-content::before {
    background-color: var(--color-kb-1);
  }
  .dom-kb.act-color-kb-2 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-2 #tablet-content::before {
    background-color: var(--color-kb-2);
  }
  .dom-kb.act-color-kb-3 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-3 #tablet-content::before {
    background-color: var(--color-kb-3);
  }
  .dom-kb.act-color-kb-4 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-4 #tablet-content::before {
    background-color: var(--color-kb-4);
  }
  .dom-kb.act-color-kb-5 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-5 #tablet-content::before {
    background-color: var(--color-kb-5);
  }
  .dom-kb.act-color-kb-6 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-6 #tablet-content::before {
    background-color: var(--color-kb-6);
  }
  .dom-kb.act-color-kb-7 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-7 #tablet-content::before {
    background-color: var(--color-kb-7);
  }
  .dom-kb.act-color-kb-8 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-8 #tablet-content::before {
    background-color: var(--color-kb-8);
  }
  .dom-kb.act-color-kb-9 .sec-opener + label::before,
  .js.dom-kb.act-color-kb-9 #tablet-content::before {
    background-color: var(--color-kb-9);
  }
  .dom-kb .sec-opener + label.noBgColor::before {
    background-color: transparent!important;
  }
  .js.dom-kb .sec-content {
    display: none!important;
    max-height: unset!important;
  }
  .js.dom-kb #tablet-content {
    position: relative;
    padding: 0 0 0 4%;
    margin: 0 0 0 0;
  }
  .js.dom-kb #tablet-content::before {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 4%;
    height: 100%;
  }
  .teasergrid,
  .logogridXS {
    column-count: 1;
    column-gap: 0;
  }
  .logogrid {
    column-width: 15em;
  }
}
@media screen and (min-width: 1600px) {
  .dom-kb #content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr;
    padding-top: 0;
  }
  .logogrid {
    column-width: 20em;
  }
}