@charset "UTF-8"; @font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1); src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"), url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"), url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"), url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34); src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"), url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"), url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"), url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype"); font-weight: bold; font-style: normal; font-display: swap; } /** * mixins * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/plain-ui-css * */ /** * Clear Floats * * * */ /** * clear styles from list * * */ /** * media-queries as mixins * based on breakpoints from variables * * * */ /** * Set property and his value for each Breakpoint * * ( * $plain-ui__md: 10px * ) * * * @param {css} $property * @param {map} $breakpoints * @param {Boolean} $important [false] * */ /** * Set property and his value with an factor for each Breakpoint * * ( * $plain-ui__md: 10px * ) * * @param {css} $property * @param {number} $factor * @param {map} $breakpoints * @param {Boolean} $important [false] * */ /** * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size * * ( * $plain-ui__md: 1rem * ) * * @param {map} $breakpoints * @param {unit} $font-size * @param {unit} $default * @param {Boolean} $important [false] * */ /** * variables * * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/plain-ui-css * */ /** * breakpoints * */ /** * fonts * */ /** * colors * * */ /** * padding & margin * */ /** * heading * */ /** * z-index * */ /** * core * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/crispy-css * */ /** * normalize * * Thanks to https://necolas.github.io/normalize.css/, use a lot from them * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/crispy-css * */ /** * Heading * * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/crispy-css * */ /** * typograhy * * @author Björn Hase, Tentakelfabrik * @license http://opensource.org/licenses/MIT The MIT License * @link https://github.com/tentakelfabrik/crispy-css * */ html { font-size: 100%; line-height: 1.15; -webkit-text-size-adjust: 100%; } body, html { margin: 0; height: 100%; } html, legend { box-sizing: border-box; } main { display: block; } *, *::after, *::before { box-sizing: inherit; } table { border-collapse: collapse; border-spacing: 0; } figcaption { margin: 10px 0; } /** * form elements * * */ button, input, optgroup, select, textarea { margin: 0; } 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; } legend { box-sizing: border-box; display: table; max-width: 100%; padding: 0; white-space: normal; } [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; } /** * hr * */ hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; margin: 0.3em 0; } progress { vertical-align: baseline; } details { display: block; } summary { display: list-item; } /** * * * * */ /** * * * * */ /** * * * */ /** * * * * */ /** * * * * */ /** *
* image *
* */ /** * * * */ /** * * * */ /** *
* *
* food truck yr franzen pabst *
*
* */ /** * * * */ /** *
*
*
*
*
* */ /** * * * * */ a { color: #fff; } a:focus { outline: none; } /** * body * * * * line-height and breakpoints * font-size and breakpoints * */ body { font-family: "IBM Plex Mono", sans-serif; background-color: #f9f9f9; direction: ltr; font-size: 1rem; line-height: 1.4; } /** * borders * * */ .border { border: 1px solid #3e3e3e !important; } .border-round { border-radius: 2px !important; } .borderless { border: 0 !important; } .radiusless { border-radius: 0 !important; } /** * * */ .round { border-radius: 50% !important; } /** * typography * * */ .left { text-align: left !important; } .right { text-align: right !important; } .center { text-align: center !important; } .justify { text-align: justify !important; } .uppercase { text-transform: uppercase !important; } .lowercase { text-transform: lowercase !important; } .crossed { text-decoration: line-through !important; } .underline { text-decoration: underline !important; } .capitalize { text-transform: capitalize !important; } .italic { font-style: italic !important; } .light { font-weight: lighter !important; } .normal { font-weight: normal !important; } .medium { font-weight: medium !important; } .bold { font-weight: bolder !important; } .text-size-default { font-size: 1rem !important; } .text-size-small { font-size: 0.75rem !important; } .text-size-medium { font-size: 1.5rem !important; } .text-size-large { font-size: 2rem !important; } .text-size-big { font-size: 3rem !important; } /** * colors * * */ .text-color-primary { color: #3e3e3e !important; } .text-color-white { color: #fff !important; } .fill-primary { fill: #3e3e3e !important; } .fill-white { fill: #fff !important; } .border-color-primary { border-color: #3e3e3e !important; } .border-color-white { border-color: #fff !important; } .background-color-primary { background-color: #3e3e3e !important; } .background-color-white { background-color: #fff !important; } /** * floating * * */ .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } .centered { margin-left: auto; margin-right: auto; } .clearfix::before, .clearfix::after { display: table; content: " "; } .clearfix::after { clear: both; } /** * position * * */ .absolute { position: absolute !important; } .fixed { position: fixed !important; } .relative { position: relative !important; } /** * * */ .vertical-align-bottom { vertical-align: bottom; } .vertical-align-top { vertical-align: top; } .vertical-align-baseline { vertical-align: baseline; } /** * * */ .badge { display: inline-block; background-color: #3e3e3e; color: white; font-size: 0.85rem; padding: 0.4em 0.8em; border: 1px solid #3e3e3e; border-radius: 2px; } .badge--round { display: inline-flex; justify-content: center; border-radius: 50%; width: 2.5em; } .button { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; display: inline-block; text-decoration: none; font-family: "IBM Plex Mono", sans-serif; border: 1px solid #3e3e3e; background-color: white; color: #3e3e3e; border-radius: 2px; transition: background-color 0.1s; margin-bottom: 0.5em; padding: 0.5em 1.3em; font-size: 1rem; width: 100%; } @media only screen and (min-width: 768px) { .button { width: auto; } } .button--small { font-size: 0.8em; } .button--no-style { margin: 0; padding: 0; border: none; background: transparent; } .button:hover, .button--selected { cursor: pointer; text-decoration: none; color: white; background-color: #585858; } .button:focus, .button:active { outline: 1px solid #646464; } .button:disabled { opacity: 0.5; } .button:disabled:hover { cursor: not-allowed; border: 1px solid #3e3e3e; background-color: white; color: #3e3e3e; } .button--danger { border-color: #d95959; } .button--danger:hover { background-color: #d95959; } .button--danger:focus, .button--danger:active { outline: 2px solid #e79797; } .field-group { margin-bottom: 1.2em; } .field-group--valid input.field-text, .field-group--valid textarea.field-text { border-color: #64ac64; } .field-group--valid .icon { fill: #64ac64; } .field-group--error input.field-text, .field-group--error textarea.field-text { border-color: #d95959; } .field-group--error .icon { fill: #d95959; } .field-label { font-size: 1rem; font-family: "IBM Plex Mono", sans-serif; } .field-label .icon { vertical-align: sub; font-size: 1.1rem; } .field-label:hover { cursor: pointer; } input.field-text, textarea.field-text, select.field-choice { font-family: "IBM Plex Mono", sans-serif; font-size: 0.95rem; width: 100%; border: 1px solid #a4a4a4; background-color: white; border-radius: 2px; margin: 0.7em 0 0; } input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { outline: 0; border-color: #3e3e3e; } input.field-text, textarea.field-text { padding: 0.8em 1.1em; } /** * * */ select.field-choice { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.8em; position: relative; } select.field-choice::after { position: absolute; right: 0; top: 0; display: block; content: " "; width: 10px; height: 10px; background: red; } /** * radio & checkbox * *
* *
* */ input[type=checkbox].field-choice, input[type=radio].field-choice { position: relative; display: none; } input[type=checkbox].field-choice ~ .field-choice__checked, input[type=radio].field-choice ~ .field-choice__checked { display: none; } input[type=checkbox].field-choice:checked ~ .field-choice__checked, input[type=radio].field-choice:checked ~ .field-choice__checked { display: inline-block; } input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, input[type=radio].field-choice:checked ~ .field-choice__unchecked { display: none; } svg.field-choice__unchecked { fill: #a4a4a4; } svg.field-choice__checked { fill: #64ac64; } .field-help, .field-error { display: inline-block; width: 100%; padding: 0.6em 0.5em; font-size: 0.8rem; } .field-error { color: #d95959; } .icon { width: 1em; height: 1em; max-height: 100%; max-width: 100%; vertical-align: middle; overflow: hidden; font-size: 1.2rem; fill: #3e3e3e; } .icon--success { fill: #64ac64; } .icon--danger { fill: #d95959; } .panel { border: 1px solid #3e3e3e; border-radius: 2px; background: #fff; } .panel__header { display: flex; background-color: #3e3e3e; color: white; padding: 0.8em 1.2em; line-height: 1.6em; } .panel__header button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; padding: 0; } .panel__header button:hover { cursor: pointer; } .panel__header .icon { vertical-align: bottom; width: 1.5em; height: 1.5em; margin-right: 0.5em; fill: white; } .panel__buttons { display: flex; justify-content: end; width: 100%; } .panel__buttons button:last-child .icon { margin-right: 0; } .panel__body { padding: 0.6em 1.2em; } .figure { margin: 0; display: inline-block; line-height: 0; border: 1px solid #3e3e3e; border-radius: 2px; overflow: hidden; } .figure__caption { padding: 0.75em 1.1em; font-size: 0.7rem; background: #3e3e3e; line-height: 1.4; margin: 0; color: white; } .figure img.media { border: 0; } img.media { border-radius: 2px; border: 1px solid #3e3e3e; width: 100%; height: auto; } .table { width: 100%; border: 1px solid #cacaca; background: white; } .table--striped tr:nth-child(even) { background-color: #fdfdfd; } .table--scroll { overflow-x: auto; } .table td { color: #3e3e3e; } .table td, .table th { text-align: left; border-bottom: 1px solid #cacaca; padding: 0.5em 1.25em; } .table th { border-bottom: 1px solid #8b8b8b; background-color: #e4e4e4; } .table tr:hover { background-color: #e4e4e4; } .hero { position: relative; } .hero img { width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; } .hero--contain { -o-object-fit: contain; object-fit: contain; } .slider { display: flex; } .slider__inner { display: flex; overflow: hidden; } .slider__item { flex: none; width: 33%; } .bar { display: flex; height: 2.8em; background-color: #3e3e3e; color: white; } .bar .icon { font-size: 1.5rem; } .bar__start { justify-content: start; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .bar__main { width: 100%; } .bar__end { text-align: right; margin-left: 0.75em; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .bar__start, .bar__main, .bar__end { align-self: center; margin-left: 0.75em; } .bar__start:last-child, .bar__main:last-child, .bar__end:last-child { margin-right: 0.75em; } .tab { display: flex; } .tab__item { height: 100%; display: inline-flex; align-items: center; padding: 0 1em; background-color: white; transition: background-color 0.1s; background-color: white; color: #3e3e3e; border: 1px solid #3e3e3e; border-right: 0; } .tab__item:hover, .tab__item--selected { cursor: pointer; background-color: #585858; color: white; border-color: #585858; }