@charset "UTF-8";
/* ====== SHB Farb-Variablen & Utility (hinzugefügt) ====== */
:root{
  --color-darkblue:#112344;
  --color-lightblue:#3363AC;
  --color-red:#E30613;
  --color-white:#FFFFFF;
  --color-black:#000000;
  --color-grey:#F5F5F5;
  --header-h:80px;
}
/* sanftes Scrollen + Offset für fixen Header */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:var(--header-h)}

/*  ---------------------------------------------------------------------- */
/*  
    Name: www.hellskitchen.beer
    Date: July 2019
    Version: 2.1
    Author: Daniel Baumgartner
*/
/*  ---------------------------------------------------------------------- */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/**
* SassFlexbox
* Manage Flexbox in Sass easily.
*
* @author     Samuel Marchal (zessx)
* @version    0.1
*/
/* Display */
.header-container .row, section .vertical-align, section#introImage .mainClaim, section#introImage .mainImg {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

/* Flex direction */
section#introImage .mainImg {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row; }

section#introImage .mainClaim {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

/* Flex wrap */
/* Flex flow */
/* Order */
/* Flex grow */
/* Flex shrink */
/* Flex basis */
/* Flex */
/* Justify content */
section#introImage .mainClaim {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center; }

/* Align items */
.header-container .row, section .vertical-align {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

/* Align self */
/* Align content */
section#introImage .mainClaim {
  -ms-flex-line-pack: end;
  -webkit-align-content: flex-end;
  -moz-align-content: flex-end;
  align-content: flex-end; }

@font-face {
  font-family: 'gtpb';
  src: url("../fonts/gtpb.eot?#iefix") format("embedded-opentype"), url("../fonts/gtpb.woff") format("woff"), url("../fonts/gtpb.ttf") format("truetype"), url("../fonts/gtpb.svg#gtpb") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'gtpr';
  src: url("../fonts/gtpr.eot?#iefix") format("embedded-opentype"), url("../fonts/gtpr.woff") format("woff"), url("../fonts/gtpr.ttf") format("truetype"), url("../fonts/gtpr.svg#gtpr") format("svg");
  font-weight: normal;
  font-style: normal; }

/*  ---------------------------------------------------------------------- */
/*  settings */
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  
  Icontel Custom Mixins & Helpers
  Date: January 2017
  Version: 1.1
  Author: Daniel Baumgartner
  Autor URI: icontel.com
*/
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  grid */
/*  ---------------------------------------------------------------------- */
.wrapper {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative; }

.row {
  margin: 1em -2.5%; }

[class*='column-'] {
  display: block;
  float: left;
  min-height: 1px;
  margin: 0 2.5%;
  padding: 0;
  width: 100%; }
  [class*='column-'].center {
    text-align: center; }
  [class*='column-'].right {
    text-align: right; }

.column-1 {
  width: 3.33333%; }

.column-2 {
  width: 11.66667%; }

.column-3 {
  width: 20%; }

.column-4 {
  width: 28.33333%; }

.column-5 {
  width: 36.66667%; }

.column-6 {
  width: 45%; }

.column-7 {
  width: 53.33333%; }

.column-8 {
  width: 61.66667%; }

.column-9 {
  width: 70%; }

.column-10 {
  width: 78.33333%; }

.column-11 {
  width: 86.66667%; }

.column-12 {
  width: 95%; }

.offset-1 {
  margin-left: 10.83333%; }

.offset-2 {
  margin-left: 19.16667%; }

.offset-3 {
  margin-left: 27.5%; }

.offset-4 {
  margin-left: 35.83333%; }

.offset-5 {
  margin-left: 44.16667%; }

.offset-6 {
  margin-left: 52.5%; }

.offset-7, section#teams .beer-container:nth-child(even) .wrapper .row [class*='column-'] {
  margin-left: 60.83333%; }

.offset-8 {
  margin-left: 69.16667%; }

.offset-9 {
  margin-left: 77.5%; }

.offset-10 {
  margin-left: 85.83333%; }

.offset-11 {
  margin-left: 94.16667%; }

.offset-12 {
  margin-left: 102.5%; }

.row, .table.beer-details .tr, .table.old-beers .tr {
  *zoom: 1; }
  .row:before, .table.beer-details .tr:before, .table.old-beers .tr:before, .row:after, .table.beer-details .tr:after, .table.old-beers .tr:after {
    content: " ";
    display: table; }
  .row:after, .table.beer-details .tr:after, .table.old-beers .tr:after {
    clear: both; }

/*  ---------------------------------------------------------------------- */
/*  typography */
/*  ---------------------------------------------------------------------- */
ul.list, .header-container nav ul, .footer-container ul {
  margin: 0;
  padding: 0;
  list-style: none; }

*:focus {
  outline: none; }

/*  ---------------------------------------------------------------------- */
/*  layout */
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  triangle */
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  transitions */
/*  ---------------------------------------------------------------------- */
a, a:visited, a img, a img:visited, .header-container .logo-container .svg, .header-container .logo-container .svg path, .table.old-beers .tr {
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear; }

/*  ---------------------------------------------------------------------- */
/*  input */
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  functions */
/*  ---------------------------------------------------------------------- */
.focuspoint {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  perspective: 1000px; }
  .focuspoint img {
    margin: 0;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
    max-width: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

/*  ---------------------------------------------------------------------- */
/*  gradient */
/*  ---------------------------------------------------------------------- */
/*  ---------------------------------------------------------------------- */
/*  global */
/*  ---------------------------------------------------------------------- */
html, button, input, select, textarea {
  color: #000000; }

body {
  background: #F5F5F5;
  color: #000000;
  font-family: "gtpr", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 28px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body, html {
  margin: 0;
  padding: 0; }

/*  ---------------------------------------------------------------------- */
/*  typography */
/*  ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: "gtpb", sans-serif;
  font-weight: 400;
  margin: 0 0 0.75em 0;
  padding: 0; }

h1 {
  font-size: 3em;
  line-height: 1.1em; }

h2 {
  font-size: 2em;
  line-height: 1.2em; }

h3 {
  font-size: 1.75em;
  line-height: 1.3em; }

h4 {
  font-size: 20px;
  line-height: 28px; }

h1.white, h2.white, h3.white, h4.white, p.white, span.white, ul.white, li.white, a.white, i.white {
  color: #FFFFFF; }

h1.black, h2.black, h3.black, h4.black, p.black, span.black, ul.black, li.black, a.black, i.black {
  color: #000000; }

h1.grey, h2.grey, h3.grey, h4.grey, p.grey, span.grey, ul.grey, li.grey, a.grey, i.grey {
  color: #F5F5F5; }

h1.uppercase, h2.uppercase, h3.uppercase, h4.uppercase, p.uppercase, span.uppercase, ul.uppercase, .header-container nav ul, li.uppercase, a.uppercase, i.uppercase {
  text-transform: uppercase; }

h1.smallmargin, h2.smallmargin, h3.smallmargin, h4.smallmargin, p.smallmargin, span.smallmargin, ul.smallmargin, li.smallmargin, a.smallmargin, i.smallmargin {
  margin-bottom: 0.25em; }

h1.nomargin, h2.nomargin, h3.nomargin, h4.nomargin, p.nomargin, span.nomargin, ul.nomargin, li.nomargin, a.nomargin, i.nomargin {
  margin-bottom: 0; }

h1.halfmargin, h2.halfmargin, h3.halfmargin, h4.halfmargin, p.halfmargin, span.halfmargin, ul.halfmargin, li.halfmargin, a.halfmargin, i.halfmargin {
  margin-bottom: 0.5em; }

h1.section-title, h2.section-title, h3.section-title, h4.section-title, p.section-title, span.section-title, ul.section-title, li.section-title, a.section-title, i.section-title {
  font-size: 3em;
  line-height: 1.1em; }

.small {
  font-size: 0.8em;
  line-height: 1.4em; }

.big {
  font-size: 1.1em; }

b,
strong {
  font-family: "gtpb", sans-serif;
  font-weight: 400; }

p, pre {
  margin: 0 0 1.5em 0; }
  p:last-of-type, pre:last-of-type {
    margin-bottom: 0; }

em, i {
  font-family: "gtpb", sans-serif;
  font-style: normal; }

a, a:visited, a img, a img:visited {
  color: #000000;
  cursor: pointer;
  text-decoration: none;
  font-style: normal; }
  a:hover, a:active, a:visited:hover, a:visited:active, a img:hover, a img:active, a img:visited:hover, a img:visited:active {
    color: rgba(0, 0, 0, 0.5); }

ul.list {
  margin: 0 0 1.5em 0; }
  ul.list li {
    margin: 0 0 0 2em; }
    ul.list li:before {
      content: "–";
      margin: 0 0.5em 0 -2em; }
  ul.list.bold {
    font-family: "gtpb", sans-serif;
    font-weight: 400; }
  ul.list.nomargin {
    margin-bottom: 0; }
  ul.list.halfmargin {
    margin-bottom: 0.5em; }

img {
  max-width: 100%; }

input.placeholder, textarea.placeholder {
  color: #000000; }

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #000000; }

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #000000; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #000000; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #000000; }

::-moz-selection {
  color: #FFFFFF;
  background: #000000; }

::selection {
  color: #FFFFFF;
  background: #000000; }

/*  ---------------------------------------------------------------------- */
/*  layout */
/*  ---------------------------------------------------------------------- */
.pageTop {
  display: block;
  position: absolute;
  top: 0; }

.header-container a, .header-container span, .footer-container a, .footer-container span {
  position: relative; }

.header-container a, .footer-container a {
  color: #FFFFFF;
  display: inline-block; }
  .header-container a:hover:before, .footer-container a:hover:before {
    right: 0;
    left: 0; }
  .header-container a:before, .footer-container a:before {
    content: "";
    display: block;
    height: 2px;
    z-index: 5;
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    transition: all 150ms linear; }

.header-container {
  background: rgba(255, 255, 255, 0);
  padding: 0;
  z-index: 100;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  -webkit-transition: background 300ms linear;
  -moz-transition: background 300ms linear;
  -ms-transition: background 300ms linear;
  -o-transition: background 300ms linear;
  transition: background 300ms linear; }
  .header-container .logo-container {
    display: block;
    line-height: 0;
    width: 175px; }
    .header-container .logo-container a:before {
      display: none; }
    .header-container .logo-container .svg {
      display: inline-block;
      margin: 0;
      max-width: 175px;
      min-width: 175px;
      overflow: inherit;
      width: 175px;
      stroke: none; }
      .header-container .logo-container .svg path {
        fill: #000000 !important; }
    .header-container .logo-container:hover .svg path {
      fill: #000000 !important; }
  .header-container nav ul {
    font-family: "gtpb", sans-serif; }
    .header-container nav ul li a {
      color: #000000;
      padding: 0.1em 0; }
      .header-container nav ul li a:before {
        background: #000000; }
  .header-container:hover {
    background: rgba(255, 255, 255, 0.9); }

.footer-container {
  background: #000000;
  color: #FFFFFF;
  padding: 5em 0; }
  .footer-container ul {
    margin: 0.5em 0 0 0; }
    .footer-container ul li {
      display: inline-block;
      margin-left: 1em; }
      .footer-container ul li:first-of-type {
        margin-left: 0; }
  .footer-container a {
    color: #FFFFFF; }
    .footer-container a:before {
      background: #FFFFFF; }
    .footer-container a.socials:before {
      display: none; }
  .footer-container address {
    font-style: normal; }
  .footer-container img.socialmedia {
    border: none;
    display: inline-block;
    margin: 0;
    width: 30px; }

/*  ---------------------------------------------------------------------- */
/*  design */
/*  ---------------------------------------------------------------------- */
section {
  padding: 5em 0; }
  section.white-background {
    background: #FFFFFF; }
  section.black-background {
    background: #000000;
    color: #FFFFFF !important; }
    section.black-background ::-moz-selection {
      color: #000000;
      background: #FFFFFF; }
    section.black-background ::selection {
      color: #000000;
      background: #FFFFFF; }
  section#introImage {
    background: #FFFFFF;
    display: block;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    width: 100%; }
    section#introImage .mainClaim {
      text-align: center;
      z-index: 1;
      pointer-events: none;
      position: absolute;
      top: 5vh;
      right: 0;
      bottom: 0;
      left: 0; }
      section#introImage .mainClaim h1, section#introImage .mainClaim h2 {
        display: block;
        margin-bottom: 0.1em;
        width: 100%; }
      section#introImage .mainClaim h1 {
        font-size: 9vw; }
      section#introImage .mainClaim h2 {
        font-size: 4vw;
        margin: 0; }
    section#introImage .mainImg {
      height: 100vh;
      width: 100%; }
      section#introImage .mainImg .lagerita, section#introImage .mainImg .hellvetia, section#introImage .mainImg .hells-bells, section#introImage .mainImg .witchcraft, section#introImage .mainImg .session-club, section#introImage .mainImg .highway-to-hellskitchen, section#introImage .mainImg .rowdy, section#introImage .mainImg .helljuice, section#introImage .mainImg .ace-of-spades {
        height: 100vh;
        width: calc(100% / 9);
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transition: all 600ms linear;
        -moz-transition: all 600ms linear;
        -ms-transition: all 600ms linear;
        -o-transition: all 600ms linear;
        transition: all 600ms linear; }
        section#introImage .mainImg .lagerita:hover, section#introImage .mainImg .hellvetia:hover, section#introImage .mainImg .hells-bells:hover, section#introImage .mainImg .witchcraft:hover, section#introImage .mainImg .session-club:hover, section#introImage .mainImg .highway-to-hellskitchen:hover, section#introImage .mainImg .rowdy:hover, section#introImage .mainImg .helljuice:hover, section#introImage .mainImg .ace-of-spades:hover {
          opacity: 1;
          filter: alpha(opacity=100); }
      section#introImage .mainImg .lagerita {
        background-image: -o-linear-gradient(180deg, #ca5098, #fcea10);
        background-image: -moz-linear-gradient(180deg, #ca5098, #fcea10);
        background-image: -webkit-linear-gradient(180deg, #ca5098, #fcea10);
        background-image: linear-gradient(180deg, #ca5098, #fcea10); }
      section#introImage .mainImg .hellvetia {
        background-image: -o-linear-gradient(180deg, #ffed00, #dd9f04);
        background-image: -moz-linear-gradient(180deg, #ffed00, #dd9f04);
        background-image: -webkit-linear-gradient(180deg, #ffed00, #dd9f04);
        background-image: linear-gradient(180deg, #ffed00, #dd9f04); }
      section#introImage .mainImg .hells-bells {
        background-image: -o-linear-gradient(180deg, #09a255, #91c579);
        background-image: -moz-linear-gradient(180deg, #09a255, #91c579);
        background-image: -webkit-linear-gradient(180deg, #09a255, #91c579);
        background-image: linear-gradient(180deg, #09a255, #91c579); }
      section#introImage .mainImg .witchcraft {
        background-image: -o-linear-gradient(180deg, #f7a940, #ea5045);
        background-image: -moz-linear-gradient(180deg, #f7a940, #ea5045);
        background-image: -webkit-linear-gradient(180deg, #f7a940, #ea5045);
        background-image: linear-gradient(180deg, #f7a940, #ea5045); }
      section#introImage .mainImg .session-club {
        background-image: -o-linear-gradient(180deg, #d3d816, #1ca75e);
        background-image: -moz-linear-gradient(180deg, #d3d816, #1ca75e);
        background-image: -webkit-linear-gradient(180deg, #d3d816, #1ca75e);
        background-image: linear-gradient(180deg, #d3d816, #1ca75e); }
      section#introImage .mainImg .highway-to-hellskitchen {
        background-image: -o-linear-gradient(180deg, #ea9cc4, #005ca9);
        background-image: -moz-linear-gradient(180deg, #ea9cc4, #005ca9);
        background-image: -webkit-linear-gradient(180deg, #ea9cc4, #005ca9);
        background-image: linear-gradient(180deg, #ea9cc4, #005ca9); }
      section#introImage .mainImg .rowdy {
        background-image: -o-linear-gradient(180deg, #82d0f5, #005caa);
        background-image: -moz-linear-gradient(180deg, #82d0f5, #005caa);
        background-image: -webkit-linear-gradient(180deg, #82d0f5, #005caa);
        background-image: linear-gradient(180deg, #82d0f5, #005caa); }
      section#introImage .mainImg .helljuice {
        background-image: -o-linear-gradient(180deg, #91c579, #005caa);
        background-image: -moz-linear-gradient(180deg, #91c579, #005caa);
        background-image: -webkit-linear-gradient(180deg, #91c579, #005caa);
        background-image: linear-gradient(180deg, #91c579, #005caa); }
      section#introImage .mainImg .ace-of-spades {
        background-image: -o-linear-gradient(180deg, #d2986d, #75615d);
        background-image: -moz-linear-gradient(180deg, #d2986d, #75615d);
        background-image: -webkit-linear-gradient(180deg, #d2986d, #75615d);
        background-image: linear-gradient(180deg, #d2986d, #75615d); }
    section#introImage .mainImg-handheld {
      display: none; }
  section#intro {
    padding: 0; }
    section#intro .news-container {
      background-color: #112344;
      position: relative; }
      section#intro .news-container .news-image {
        border: 1.5em solid #000000;
        box-sizing: border-box;
        display: block;
        width: 50%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0; }
      section#intro .news-container .wrapper {
        padding-top: 7.5em;
        padding-bottom: 7.5em; }
        section#intro .news-container .wrapper .row {
          margin-top: 0;
          margin-bottom: 0; }
  section#teams .beer-container {
    min-height: 80vh;
    position: relative; }
    section#teams .beer-container .wrapper {
      padding-top: 5em;
      padding-bottom: 5em; }
      section#teams .beer-container .wrapper .row {
        margin-top: 0;
        margin-bottom: 0; }
    section#teams .beer-container .rating-star {
      border: 2px solid #000000;
      box-sizing: border-box;
      display: inline-block;
      height: 0.9em;
      width: 0.9em;
      -webkit-border-radius: 1em;
      -moz-border-radius: 1em;
      -ms-border-radius: 1em;
      -o-border-radius: 1em;
      border-radius: 1em; }
      section#teams .beer-container .rating-star.checked {
        background: #000000; }
    section#teams .beer-container.lagerita {
      background-image: -o-linear-gradient(180deg, #ca5098, #fcea10);
      background-image: -moz-linear-gradient(180deg, #ca5098, #fcea10);
      background-image: -webkit-linear-gradient(180deg, #ca5098, #fcea10);
      background-image: linear-gradient(180deg, #ca5098, #fcea10); }
    section#teams .beer-container.hellvetia {
      background-image: -o-linear-gradient(180deg, #ffed00, #dd9f04);
      background-image: -moz-linear-gradient(180deg, #ffed00, #dd9f04);
      background-image: -webkit-linear-gradient(180deg, #ffed00, #dd9f04);
      background-image: linear-gradient(180deg, #ffed00, #dd9f04); }
    section#teams .beer-container.hells-bells {
      background-image: -o-linear-gradient(180deg, #09a255, #91c579);
      background-image: -moz-linear-gradient(180deg, #09a255, #91c579);
      background-image: -webkit-linear-gradient(180deg, #09a255, #91c579);
      background-image: linear-gradient(180deg, #09a255, #91c579); }
    section#teams .beer-container.witchcraft {
      background-image: -o-linear-gradient(180deg, #f7a940, #ea5045);
      background-image: -moz-linear-gradient(180deg, #f7a940, #ea5045);
      background-image: -webkit-linear-gradient(180deg, #f7a940, #ea5045);
      background-image: linear-gradient(180deg, #f7a940, #ea5045); }
    section#teams .beer-container.session-club {
      background-image: -o-linear-gradient(180deg, #d3d816, #1ca75e);
      background-image: -moz-linear-gradient(180deg, #d3d816, #1ca75e);
      background-image: -webkit-linear-gradient(180deg, #d3d816, #1ca75e);
      background-image: linear-gradient(180deg, #d3d816, #1ca75e); }
    section#teams .beer-container.highway-to-hellskitchen {
      background-image: -o-linear-gradient(180deg, #ea9cc4, #005ca9);
      background-image: -moz-linear-gradient(180deg, #ea9cc4, #005ca9);
      background-image: -webkit-linear-gradient(180deg, #ea9cc4, #005ca9);
      background-image: linear-gradient(180deg, #ea9cc4, #005ca9); }
    section#teams .beer-container.rowdy {
      background-image: -o-linear-gradient(180deg, #82d0f5, #005caa);
      background-image: -moz-linear-gradient(180deg, #82d0f5, #005caa);
      background-image: -webkit-linear-gradient(180deg, #82d0f5, #005caa);
      background-image: linear-gradient(180deg, #82d0f5, #005caa); }
    section#teams .beer-container.helljuice {
      background-image: -o-linear-gradient(180deg, #91c579, #005caa);
      background-image: -moz-linear-gradient(180deg, #91c579, #005caa);
      background-image: -webkit-linear-gradient(180deg, #91c579, #005caa);
      background-image: linear-gradient(180deg, #91c579, #005caa); }
    section#teams .beer-container.ace-of-spades {
      background-image: -o-linear-gradient(180deg, #d2986d, #75615d);
      background-image: -moz-linear-gradient(180deg, #d2986d, #75615d);
      background-image: -webkit-linear-gradient(180deg, #d2986d, #75615d);
      background-image: linear-gradient(180deg, #d2986d, #75615d); }
    section#teams .beer-container.camp-crazy {
      background: #F5CF00; }
    section#teams .beer-container.bee-hoppy {
      background: #DD071B; }
    section#teams .beer-container .beer-detail h2 {
      font-size: 3em;
      line-height: 1.1em;
      margin-bottom: 0.4em; }
    section#teams .beer-container .beer-detail h3 {
      font-family: "gtpr", sans-serif;
      font-size: 0.9em;
      line-height: 28px;
      margin-bottom: 0; }
    section#teams .beer-container .beer-detail h4 {
      font-family: "gtpr", sans-serif;
      font-size: 2em;
      line-height: 1.2em;
      margin-bottom: 0.75em; }
    section#teams .beer-container .beer-detail .beer-prizes {
      margin: 1.5em 0 0 0; }
      section#teams .beer-container .beer-detail .beer-prizes img {
        display: inline-block;
        margin-right: 1em;
        max-width: 150px;
        width: 30%; }
    section#teams .beer-container .beer-image {
      display: block;
      width: 50%;
      position: absolute;
      top: 0;
      bottom: 0; }
    section#teams .beer-container:nth-child(even) .beer-image {
      left: 0; }
    section#teams .beer-container:nth-child(odd) .beer-image {
      right: 0; }
  section#teams .oldBeer-container {
    margin-top: 5em; }
  section#teams .specialBeer-container {
    margin-bottom: 2em; }
    section#teams .specialBeer-container .beer-label {
      margin-bottom: 0.5em; }
      section#teams .specialBeer-container .beer-label img {
        box-shadow: 0 0.1em 0.75em 0 rgba(0, 0, 0, 0.2);
        overflow: hidden;
        -webkit-border-radius: 0.25em;
        -moz-border-radius: 0.25em;
        -ms-border-radius: 0.25em;
        -o-border-radius: 0.25em;
        border-radius: 0.25em; }
        section#teams .specialBeer-container .beer-label img.no-label {
          box-shadow: none; }
    section#teams .specialBeer-container h4 {
      font-family: "gtpb", sans-serif;
      font-size: 1.25em;
      line-height: 1.3em;
      margin: 0;
      text-transform: uppercase; }
    section#teams .specialBeer-container .beer-quote {
      margin: 0.5em 0; }
    section#teams .specialBeer-container .beer-vol {
      font-size: 0.85em; }
  section#aboutUs .portrait {
    display: block;
    margin: 0 auto 2em auto;
    width: 100%; }
    section#aboutUs .portrait :after {
      content: "";
      display: block;
      padding-bottom: 100%; }
  section#hellmister .logo-container .svg {
    display: block;
    margin: 0;
    max-width: 100%;
    min-width: 100%;
    overflow: inherit;
    width: 100%;
    stroke: none; }
    section#hellmister .logo-container .svg path {
      fill: #000000 !important; }
  section#ourDealers .row:last-of-type, section#ourPatrons .row:last-of-type {
    margin-top: 2em; }
  section#ourDealers a, section#ourPatrons a {
    border-bottom: 2px solid #000000; }
    section#ourDealers a.img-link, section#ourPatrons a.img-link {
      border: none; }
  section#ourPatrons .row:last-of-type {
    margin-top: 3em; }
  section#ourLocation {
    padding-bottom: 0; }
    section#ourLocation .map {
      background: #7F7F7F;
      display: block;
      height: 35em;
      width: 100%; }
  section#jedenAnlass .anlass-bild {
    display: block;
    margin: 0 auto 2em auto;
    width: 100%; }
    section#jedenAnlass .anlass-bild :after {
      content: "";
      display: block;
      padding-bottom: 100%; }

/*  ---------------------------------------------------------------------- */
/*  modules */
/*  ---------------------------------------------------------------------- */
.focuspoint {
  position: relative;
  overflow: hidden; }
  .focuspoint img {
    display: block;
    margin: 0;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
    max-width: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0; }

.table.beer-details, .table.old-beers {
  margin-top: 1.5em; }
  .table.beer-details .tr, .table.old-beers .tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5em; }
    .table.beer-details .tr:first-of-type, .table.old-beers .tr:first-of-type {
      border-top: 1px solid rgba(255, 255, 255, 0.3); }
    .table.beer-details .tr .td, .table.old-beers .tr .td {
      display: block;
      float: left; }
      .table.beer-details .tr .td.title, .table.old-beers .tr .td.title {
        width: 35%; }
      .table.beer-details .tr .td.content, .table.old-beers .tr .td.content {
        width: 65%; }

.table.old-beers {
  margin-top: 0; }
  .table.old-beers .tr {
    background: #F5F5F5;
    border-color: rgba(127, 127, 127, 0.3); }
    .table.old-beers .tr:first-of-type {
      border-color: rgba(127, 127, 127, 0.3); }
    .table.old-beers .tr:hover {
      background: #FFFFFF; }
    .table.old-beers .tr .td.name {
      font-family: "gtpb", sans-serif;
      text-transform: uppercase;
      width: 30%; }
    .table.old-beers .tr .td.type {
      text-align: right;
      width: 70%; }

a.btn {
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  color: #000000;
  display: inline-block;
  margin-top: 2em;
  padding: 0.5em 1.5em 0.65em 1.5em; }
  a.btn:hover {
    background: #000000;
    color: #FFFFFF; }

/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
/*  responsive styling */
/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /*  ---------------------------------------------------------------------- */
  /*  global */
  /*  ---------------------------------------------------------------------- */
  body {
    font-size: 18px;
    line-height: 24px; }
  .wrapper {
    width: 95%; }
  /*  ---------------------------------------------------------------------- */
  /*  typography */
  /*  ---------------------------------------------------------------------- */
  h1, h2, h3, h4 {
    margin-bottom: 0.5em; }
  h1, h2.section-title, section#teams .beer-container .beer-detail h2 {
    font-size: 2.5em; }
  h2, section#teams .beer-container .beer-detail h4 {
    font-size: 1.75em; }
  h3 {
    font-size: 1.5em; }
  h4 {
    font-size: 18px;
    line-height: 24px; }
  /*  ---------------------------------------------------------------------- */
  /*  layout */
  /*  ---------------------------------------------------------------------- */
  .header-container .logo-container {
    width: 130px; }
    .header-container .logo-container .svg {
      max-width: 130px;
      min-width: 130px;
      width: 130px; }
  .footer-container {
    padding: 3em 0; }
  /*  ---------------------------------------------------------------------- */
  /*  design */
  /*  ---------------------------------------------------------------------- */
  section {
    padding: 3em 0; }
    section#introImage .mainClaim {
      padding: 0 5%; }
    section#whatsapp .news-container .news-image {
      border-bottom: 0;
      height: 500px;
      position: relative;
      width: 100%; }
    section#whatsapp .news-container .wrapper {
      padding-top: 3em;
      padding-bottom: 3em; }
      section#whatsapp .news-container .wrapper .row .column-5 {
        margin-left: 10.83333%;
        text-align: center;
        width: 78.33333%; }
    section#teams .beer-container .wrapper {
      padding-top: 3em;
      padding-bottom: 3em; }
    section#teams .beer-container .column-5 {
      width: 45%; }
    section#teams .beer-container .beer-detail .beer-prizes {
      margin-top: 1em; }
      section#teams .beer-container .beer-detail .beer-prizes img {
        margin-right: 1em;
        width: 25%; }
    section#teams .beer-container:nth-child(even) .wrapper .row [class*='column-'] {
      margin-left: 52.5%; }
    section#teams .oldBeer-container {
      margin-top: 3em; }
      section#teams .oldBeer-container .column-8.offset-2 {
        margin-left: 2.5%;
        width: 95%; }
      section#teams .oldBeer-container .column-3 {
        width: 45%; }
    section#aboutUs .row, section#hellmister .row, section#ourDealers .row, section#jedenAnlass .row {
      display: block; }
      section#aboutUs .row [class*='column-'], section#hellmister .row [class*='column-'], section#ourDealers .row [class*='column-'], section#jedenAnlass .row [class*='column-'] {
        float: none;
        margin-left: 2.5%;
        width: 95%; }
    section#aboutUs .portrait {
      margin: 0 auto 1.5em auto;
      width: 60%; }
    section#hellmister .right {
      text-align: left; }
    section#hellmister .logo-container .svg {
      margin: 1.5em auto 0 auto;
      max-width: 60%;
      min-width: 60%;
      width: 60%; }
    section#ourDealers .wrapper .row:first-of-type [class*='column-']:first-of-type {
      margin-bottom: 3em; }
    section#jedenAnlass .anlass-bild {
      margin: 1.5em auto;
      width: 60%; }
  /*  ---------------------------------------------------------------------- */
  /*  modules */
  /*  ---------------------------------------------------------------------- */
  .table.beer-details {
    margin-top: 1em; }
  a.btn {
    margin-top: 1.5em; } }

/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /*  ---------------------------------------------------------------------- */
  /*  global */
  /*  ---------------------------------------------------------------------- */
  body {
    font-size: 17px;
    line-height: 22px; }
  /*  ---------------------------------------------------------------------- */
  /*  typography */
  /*  ---------------------------------------------------------------------- */
  h1, h2.section-title, section#teams .beer-container .beer-detail h2 {
    font-size: 2.25em; }
  h2, section#teams .beer-container .beer-detail h4 {
    font-size: 1.5em; }
  h3 {
    font-size: 1.35em; }
  h4 {
    font-size: 17px;
    line-height: 22px; }
  /*  ---------------------------------------------------------------------- */
  /*  layout */
  /*  ---------------------------------------------------------------------- */
  .header-container .logo-container {
    width: 110px; }
    .header-container .logo-container .svg {
      max-width: 110px;
      min-width: 110px;
      width: 110px; }
  .footer-container {
    padding: 2em 0; }
  /*  ---------------------------------------------------------------------- */
  /*  design */
  /*  ---------------------------------------------------------------------- */
  section {
    padding: 2em 0; }
    section#whatsapp .news-container .news-image {
      border-width: 1em;
      height: 400px; }
    section#whatsapp .news-container .wrapper {
      padding-top: 1em;
      padding-bottom: 2em; }
      section#whatsapp .news-container .wrapper .row .column-5 {
        margin-left: 2.5%;
        width: 95%; }
    section#teams .beer-container {
      min-height: auto; }
      section#teams .beer-container.hellvetia, section#teams .beer-container.hells-bells, section#teams .beer-container.witchcraft, section#teams .beer-container.session-club, section#teams .beer-container.rowdy, section#teams .beer-container.helljuice, section#teams .beer-container.ace-of-spades {
        background: none !important; }
      section#teams .beer-container.hellvetia .beer-detail {
        background-image: -o-linear-gradient(135deg, #ffed00, #dd9f04);
        background-image: -moz-linear-gradient(135deg, #ffed00, #dd9f04);
        background-image: -webkit-linear-gradient(135deg, #ffed00, #dd9f04);
        background-image: linear-gradient(135deg, #ffed00, #dd9f04); }
      section#teams .beer-container.hells-bells .beer-detail {
        background-image: -o-linear-gradient(135deg, #09a255, #91c579);
        background-image: -moz-linear-gradient(135deg, #09a255, #91c579);
        background-image: -webkit-linear-gradient(135deg, #09a255, #91c579);
        background-image: linear-gradient(135deg, #09a255, #91c579); }
      section#teams .beer-container.witchcraft .beer-detail {
        background-image: -o-linear-gradient(135deg, #f7a940, #ea5045);
        background-image: -moz-linear-gradient(135deg, #f7a940, #ea5045);
        background-image: -webkit-linear-gradient(135deg, #f7a940, #ea5045);
        background-image: linear-gradient(135deg, #f7a940, #ea5045); }
      section#teams .beer-container.session-club .beer-detail {
        background-image: -o-linear-gradient(135deg, #d3d816, #1ca75e);
        background-image: -moz-linear-gradient(135deg, #d3d816, #1ca75e);
        background-image: -webkit-linear-gradient(135deg, #d3d816, #1ca75e);
        background-image: linear-gradient(135deg, #d3d816, #1ca75e); }
      section#teams .beer-container.rowdy .beer-detail {
        background-image: -o-linear-gradient(135deg, #82d0f5, #005caa);
        background-image: -moz-linear-gradient(135deg, #82d0f5, #005caa);
        background-image: -webkit-linear-gradient(135deg, #82d0f5, #005caa);
        background-image: linear-gradient(135deg, #82d0f5, #005caa); }
      section#teams .beer-container.helljuice .beer-detail {
        background-image: -o-linear-gradient(135deg, #91c579, #005caa);
        background-image: -moz-linear-gradient(135deg, #91c579, #005caa);
        background-image: -webkit-linear-gradient(135deg, #91c579, #005caa);
        background-image: linear-gradient(135deg, #91c579, #005caa); }
      section#teams .beer-container.ace-of-spades .beer-detail {
        background-image: -o-linear-gradient(135deg, #d2986d, #75615d);
        background-image: -moz-linear-gradient(135deg, #d2986d, #75615d);
        background-image: -webkit-linear-gradient(135deg, #d2986d, #75615d);
        background-image: linear-gradient(135deg, #d2986d, #75615d); }
      section#teams .beer-container .beer-image {
        bottom: unset;
        display: block;
        margin: 0 auto;
        position: relative;
        top: unset;
        width: 100%; }
        section#teams .beer-container .beer-image :after {
          content: "";
          display: block;
          padding-bottom: 100%; }
      section#teams .beer-container .beer-detail .wrapper {
        padding-top: 1em;
        padding-bottom: 2em; }
        section#teams .beer-container .beer-detail .wrapper .column-5 {
          margin-left: 2.5% !important;
          width: 95%; }
      section#teams .beer-container .beer-detail .beer-prizes img {
        margin-right: calc($gutter/2);
        max-width: 120px;
        width: 20%; }
    section#teams .oldBeer-container {
      margin-top: 2em; }
    section#aboutUs .portrait {
      width: 80%; }
    section#ourDealers .row:last-of-type, section#ourPatrons .row:last-of-type {
      margin-top: 1.5em; }
    section#ourDealers .wrapper .row:first-of-type [class*='column-']:first-of-type {
      margin-bottom: 2em; }
    section#jedenAnlass .anlass-bild {
      width: 80%; }
    section#ourPatrons .row {
      display: block; }
      section#ourPatrons .row [class*='column-'] {
        float: none;
        text-align: center;
        width: 95%; }
      section#ourPatrons .row .column-3 {
        margin-bottom: 1.5em; }
        section#ourPatrons .row .column-3:last-of-type {
          margin-bottom: 0; } }

/*  -------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /*  ---------------------------------------------------------------------- */
  /*  global */
  /*  ---------------------------------------------------------------------- */
  body {
    font-size: 16px;
    line-height: 20px; }
  .wrapper {
    width: 92%; }
  /*  ---------------------------------------------------------------------- */
  /*  typography */
  /*  ---------------------------------------------------------------------- */
  h1, h2, h3, h4 {
    margin-bottom: 0.25em; }
  h1, h2.section-title, section#teams .beer-container .beer-detail h2 {
    font-size: 12vw; }
  h2, section#teams .beer-container .beer-detail h4 {
    font-size: 7vw; }
  h3 {
    font-size: 6vw; }
  h4 {
    font-size: 17px;
    line-height: 22px; }
  /*  ---------------------------------------------------------------------- */
  /*  layout */
  /*  ---------------------------------------------------------------------- */
  .header-container .logo-container {
    width: 110px; }
    .header-container .logo-container .svg {
      max-width: 110px;
      min-width: 110px;
      width: 110px; }
  .footer-container {
    padding: 1em 0; }
  /*  ---------------------------------------------------------------------- */
  /*  design */
  /*  ---------------------------------------------------------------------- */
  section {
    padding: 1em 0; }
    section#introImage {
      height: 90vh; }
      section#introImage .mainClaim {
        padding-top: 10vh; }
        section#introImage .mainClaim h1 {
          font-size: 14vw; }
        section#introImage .mainClaim h2 {
          font-size: 9vw; }
      section#introImage .mainImg {
        height: 90vh; }
        section#introImage .mainImg .hellvetia, section#introImage .mainImg .hells-bells, section#introImage .mainImg .witchcraft, section#introImage .mainImg .session-club, section#introImage .mainImg .rowdy, section#introImage .mainImg .helljuice, section#introImage .mainImg .ace-of-spades {
          height: 90vh; }
    section#intro .news-container .news-image {
      border: none;
      display: block;
      height: 100%; }
      section#intro .news-container .news-image :after {
        content: "";
        display: block;
        padding-bottom: 100%; }
    section#intro .news-container .wrapper {
      padding-top: 1.5em;
      padding-bottom: 2.5em; }
      section#intro .news-container .wrapper .row .column-5 {
        text-align: left; }
    section#teams .beer-container .beer-detail .beer-prizes img {
      width: 25%; }
    section#teams .oldBeer-container h2.section-title {
      font-size: 9vw; }
    section#verein .portrait {
      margin-bottom: 1em;
      width: 100%; }
    section#hellmister .logo-container .svg {
      margin-top: 1em;
      max-width: 80%;
      min-width: 80%;
      width: 80%; }
    section#spiele .wrapper .row:first-of-type [class*='column-']:first-of-type {
      margin-bottom: 1em; }
  /*  ---------------------------------------------------------------------- */
  /*  modules */
  /*  ---------------------------------------------------------------------- */
  .table.beer-details .tr .td.title, .table.old-beers .tr .td.title {
    width: 30%; }
  .table.beer-details .tr .td.content, .table.old-beers .tr .td.content {
    width: 70%; }
  .table.old-beers .tr .td.name, .table.old-beers .tr .td.type {
    float: none;
    text-align: left;
    width: 100%; }
  a.btn {
    display: block;
    margin-top: 1em;
    text-align: center; } }

/* =========================
   SHB OVERRIDES (hinzugefügt)
   ========================= */
 /* Links global in Vereinsfarben */
a, a:visited, a img, a img:visited { color: var(--color-white); }
a:hover, a:active, a:visited:hover, a:visited:active, a img:hover, a img:active, a img:visited:hover, a img:visited:active { color: var(--color-red); }

/* Auswahlfarben */
::-moz-selection { color: var(--color-white); background: var(--color-red); }
::selection { color: var(--color-white); background: var(--color-red); }

/* Header in Dark Blue, Nav-Links weiss, Underline light blue */
.header-container:hover { background: rgba(17, 35, 68, 0.95); }
.header-container nav ul li a { color: #FFFFFF; }
.header-container nav ul li a:before { background: var(--color-lightblue); }

/* (Falls SVG-Logo verwendet wird) Logo-Pfade weiss */
.header-container .logo-container .svg path { fill: #FFFFFF !important; }
.header-container .logo-container:hover .svg path { fill: #FFFFFF !important; }

/* Footer in Dark Blue, Links light blue */
.footer-container { background: var(--color-darkblue); color: var(--color-white); }
.footer-container a { color: #dce7ff; }
.footer-container a:hover { color: var(--color-red); }
.footer-container a:before { background: #dce7ff; }

/* Schwarze Sektionen als Vereins-Dunkelblau */
section.black-background {
  background: var(--color-darkblue) !important;
  color: var(--color-white) !important;
}
section.black-background ::-moz-selection { color: var(--color-darkblue); background: var(--color-white); }
section.black-background ::selection { color: var(--color-darkblue); background: var(--color-white); }

/* Hero-Hintergrund + Stripes in Vereinsfarben */
section#introImage { background: var(--color-darkblue); }
section#introImage .mainClaim h1, 
section#introImage .mainClaim h2 { color: var(--color-white); }

/* Stripes oben */
section#introImage .mainImg .lagerita { background-image: linear-gradient(180deg, var(--color-lightblue), var(--color-darkblue)); }
section#introImage .mainImg .hellvetia { background-image: linear-gradient(180deg, #1a3b73, var(--color-lightblue)); }
section#introImage .mainImg .hells-bells { background-image: linear-gradient(180deg, var(--color-darkblue), #0b1a34); }
section#introImage .mainImg .witchcraft { background-image: linear-gradient(180deg, var(--color-red), #b90510); }
section#introImage .mainImg .session-club { background-image: linear-gradient(180deg, var(--color-lightblue), var(--color-red)); }
section#introImage .mainImg .highway-to-hellskitchen { background-image: linear-gradient(180deg, #0b1a34, var(--color-lightblue)); }
section#introImage .mainImg .rowdy { background-image: linear-gradient(180deg, var(--color-darkblue), var(--color-red)); }
section#introImage .mainImg .helljuice { background-image: linear-gradient(180deg, var(--color-lightblue), #6f98d0); }
section#introImage .mainImg .ace-of-spades { background-image: linear-gradient(180deg, #0d1d3a, #173063); }

/* Teamkarten (ehem. ourBeers) Farb-Portierung */
section#teams .beer-container.lagerita { background-image: linear-gradient(180deg, var(--color-lightblue), var(--color-darkblue)); }
section#teams .beer-container.hellvetia { background-image: linear-gradient(180deg, #1a3b73, var(--color-lightblue)); }
section#teams .beer-container.hells-bells { background-image: linear-gradient(180deg, var(--color-darkblue), #0b1a34); }
section#teams .beer-container.witchcraft { background-image: linear-gradient(180deg, var(--color-red), #b90510); }
section#teams .beer-container.session-club { background-image: linear-gradient(180deg, var(--color-lightblue), var(--color-red)); }
section#teams .beer-container.highway-to-hellskitchen { background-image: linear-gradient(180deg, #0b1a34, var(--color-lightblue)); }
section#teams .beer-container.rowdy { background-image: linear-gradient(180deg, var(--color-darkblue), var(--color-red)); }
section#teams .beer-container.helljuice { background-image: linear-gradient(180deg, var(--color-lightblue), #6f98d0); }
section#teams .beer-container.ace-of-spades { background-image: linear-gradient(180deg, #0d1d3a, #173063); }

/* Mobile Gradient-Fallbacks auf Detail-Boxen in Vereinsfarben */
@media (max-width: 768px) {
  section#teams .beer-container.hellvetia .beer-detail { background-image: linear-gradient(135deg, #1a3b73, var(--color-lightblue)); }
  section#teams .beer-container.hells-bells .beer-detail { background-image: linear-gradient(135deg, var(--color-darkblue), #0b1a34); }
  section#teams .beer-container.witchcraft .beer-detail { background-image: linear-gradient(135deg, var(--color-red), #b90510); }
  section#teams .beer-container.session-club .beer-detail { background-image: linear-gradient(135deg, var(--color-lightblue), var(--color-red)); }
  section#teams .beer-container.rowdy .beer-detail { background-image: linear-gradient(135deg, var(--color-darkblue), var(--color-red)); }
  section#teams .beer-container.helljuice .beer-detail { background-image: linear-gradient(135deg, var(--color-lightblue), #6f98d0); }
  section#teams .beer-container.ace-of-spades .beer-detail { background-image: linear-gradient(135deg, #0d1d3a, #173063); }
}

/* Buttons in Vereinsfarben */
a.btn {
  background: var(--color-lightblue);
  border-color: var(--color-lightblue);
  color: var(--color-white);
}
a.btn:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}

/* Table-Ratings in Vereinsfarben */
section#teams .beer-container .rating-star { border-color: var(--color-darkblue); }
section#teams .beer-container .rating-star.checked { background: var(--color-lightblue); }

/* “WhatsApp”-Box (jetzt Intro) Randfarbe anpassen */
section#intro .news-container .news-image { border-color: var(--color-darkblue); }

/* Focuspoint Bilder sauber beschneiden */
.focuspoint img { object-fit: cover; }

.beer-container lagerita {
  color: #fff !important;
}
.beer-detail {
    color: #fff !important;

}
/* Light-Blue Hintergrund für Sektionen (Schwamendingen Handball) */
section.blue-light-bg {
  background: #3363AC;              /* Light Blue */
  color: #FFFFFF !important;         /* gute Lesbarkeit */
}

/* Auswahl/Markierung innerhalb der Light-Blue Sektion */
section.blue-light-bg ::selection {
  color: #112344;                    /* Dark Blue Text */
  background: #FFFFFF;
}

/* Links in Light-Blue Sektion: weiss + Unterstreichung für Klarheit */
section.blue-light-bg a {
  color: #FFFFFF;
  text-decoration: underline;
}
section.blue-light-bg a:hover {
  color: #E6EEFF;                    /* leicht aufgehelltes Weiss/Blau */
}

/* Optional: Buttons innerhalb von blue-light-bg bleiben gut sichtbar */
section.blue-light-bg a.btn {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #112344;                    /* Dark Blue */
}
section.blue-light-bg a.btn:hover {
  background: #E30613;               /* Red */
  border-color: #E30613;
  color: #FFFFFF;
}
/* Kontakt-Sektion */
section#kontakt {
  background: #FFFFFF;        /* bleibt weiss */
  color: #112344;             /* Dark Blue als Standardtext */
}

/* Links in der Kontakt-Sektion */
section#kontakt a {
  color: #3363AC;             /* Light Blue */
  text-decoration: none;
  font-weight: 600;
}

section#kontakt a:hover {
  color: #E30613;             /* Red beim Hover */
  text-decoration: underline;
}
/* Spiele & Resultate Sektion */
section#spiele {
  background: #FFFFFF;        /* bleibt weiss */
  color: #112344;             /* Dark Blue Text */
}

/* Titel speziell hervorheben */
section#spiele .section-title {
  color: #112344;             /* Dark Blue */
}

/* Links in der Spiele-Sektion */
section#spiele a {
  color: #3363AC;             /* Light Blue */
  text-decoration: none;
  font-weight: 600;
}

section#spiele a:hover {
  color: #E30613;             /* Red beim Hover */
  text-decoration: underline;
}