@font-face {
    font-family: 'Brauer SWE';
    src: url('../fonts/brauer-regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brauer SWE';
    src: url('../fonts/brauer-bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
    font-display: swap;
}

/* stylelint-disable */

html {
    --font-stack: 'Brauer SWE', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-line: 1.2;

    --wrapper: 60rem;
    --wrapper-wide: 105rem;
    --gap: 1.25rem;
    --gap-half: .625rem;
    --gap-x2: 2.5rem;

    --green-60: #006e50;
    --green:    #008566;
    --green-40: #4ca994;
    --green-30: #8cc8ba;
    --green-20: #cce7e0;
    --green-10: #e5f3ef;
    --green-a11y: #007e60;

    --silvertree: #61c09d;
    --electric: #89e2c4;

    --red: #d0103a;
    --lobster: #e66748;
    --lobster-a11y: #c94f23;
    --blutorange: #e68137;
    --blackblue: #012c3d;

    --blue: #1999cb;
    --blue-a11y: #0a7ca7;

    --diane: #294654;
    --diane-light: #3b5c6a;

    --yellow-60: #e09d00;
    --yellow:   #ffb820;
    --yellow-40:   #ffc871;
    --yellow-20:   #ffe5ad;

    --dark: #111;
    --grey: #707070;
    --grey-80: #b3b3b3;
    --grey-60: #d8d8d8;
    --grey-40: #f0f0f0;
    --grey-20: #f7f7f7;


    --brand-color: var( --green-a11y );

    --text-default: #444;
    --text-muted: var( --grey );
    --link-color: var( --green ); /* deprecated */

    --default-link: var( --green-a11y );
    --default-hover: var( --lobster-a11y );

    --outline-size: max( 2px, .08em );
    --outline-style: solid;
    --outline-ink: var( --blutorange );
    /* --outline-offset: defaults to outline-size */

    --scroll-bg: rgba( 255, 255, 255, .2 );
    --scroll-fg: var( --grey-80 );
    --border-color: var( --grey-60 );

    --global-radius: min( 5px, .25em );
    --global-shadow: 0 0 2.7px rgb( 0 0 0 / .028 ),
        0 0 8.9px rgb( 0 0 0 / .042 ),
        0 0 40px rgb( 0 0 0 / .07 );

    --header-bg: #fff;
    --header-text: var( --green );
    --header-height: 4rem;
}

/* stylelint-endable */

/* stylelint-disable selector-list-comma-newline-after */

/*
    @see https://www.joshwcomeau.com/css/custom-css-reset/
    @see https://github.com/elad2412/the-new-css-reset
*/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    @see https://www.joshwcomeau.com/css/custom-css-reset/#digit-tweaking-line-height for the line-height
*/

:where( :not( html, iframe, canvas, img, svg, video, audio ):not( svg *, symbol * ) ) {
    all: unset;
    display: revert;
    line-height: var( --font-line );
}

/*
  Use a more-intuitive box-sizing model.
*/

*, *::before, *::after {
    box-sizing: border-box;
}

/* fix the feature of attribute hidden
display:revert; revert to element instead of attribute */

:where( [hidden] ){
    display: none;
}

/*
    Remove the margin on controls in Safari.
    Remove built-in form typography styles
*/

:where( input, button, textarea, select, optgroup ) {
    margin: 0;
    font: inherit;
}

/*
    Remove list styles (bullets/numbers)
*/

:where( ol, ul, menu ) {
    list-style: none;
    counter-reset: revert;
}

/*
    Improve media defaults
*/

:where( img, picture, video, canvas, svg ):where( :not( svg.icon ) ) {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
    Always show scrollbar to prevent 'jumping' when pages transition (old school)
    Prevent adjustments of font size after orientation changes in iOS.
*/

html {
    scrollbar-gutter: stable;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/*
    Provide always full screen
*/

html, body { height: 100%;}

/* remember to define focus styles! */

/* the following line is already done by our main reset… */

/* :focus:not( :focus-visible ) { outline: 0; } */

html:focus-within { scroll-behavior: smooth; }

/* Anything that has been anchored to should have extra scroll margin (at least in main) */

:where( main :target ) {
    scroll-margin-block: 5ex;
}

/* stylelint-enable selector-list-comma-newline-after */

/* stylelint-disable */

/*
    Remove all animations, transitions and smooth scroll for people that prefer not to see them
*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* stylelint-endable */

/*
  @tableofcontents
  ****************
  1. Typography
  2. Form Fixes
  3. Clearfix
  4. Misc Fixes
*/

/* @section 1. Typography
--------------------------------------------------- */

/*
    Sans-Serif Font Stack inspired by http://blog.mhurrell.co.uk/post/2946358183/updating-the-helvetica-font-stack
    Improved stack order https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f
    Please don't try any hacks for em/pixel calculation - it's crap! Just do great typography!
*/

body {
    /* new cross OS sans font stack */
    font: 1em/1.2 var( --font-stack );
    color: var( --text-default );
    background: var( --body-bg );
    -webkit-font-smoothing: antialiased;
    text-decoration-thickness: from-font;
    hanging-punctuation: first allow-end last;
}

/*
    clear quotes, if they are not needed

blockquote:before, blockquote:after, q:before, q:after { content: ' }
blockquote, q { quotes: ' ' }
*/

:where( pre, code, kbd, samp ) {
    font-family: monospace, monospace;
}

:where( pre ) {
    /* padding: 1em; */
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    word-wrap: break-word; /* IE */
}

:where( small ) { font-size: 85%; }

:where( strong, th, b ) { font-weight: 700; }

:where( em ) { font-style: italic; }

:where( sub, sup ) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

:where( sub ) { bottom: -.25em; }

:where( sup ) { top: -.5em; }

:where( abbr ) {
    font-variant: small-caps;
    text-transform: lowercase;
}

:where( abbr[title] ) {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
}

:where( abbr[title] ):hover { cursor: help; }

:where( h1, h2, h3, h4, h5, h6 ) {
    text-wrap: balance;
}

/*
    Basic link styles
*/

:where( a ) {
    --_default: var( --color-link, var( --default-link ) );
    --_hover: var( --color-hover, currentcolor );

    text-decoration: none;
    color: var( --_color, var( --_default ) );
    cursor: revert;
}

:where( a ):focus,
    :where( a ):hover {
        --_color: var( --_hover );
    }

:where( a[href^='tel'] ) {
    --color-link: currentcolor;
    cursor: inherit;
}

/*
Set tables to fixed layout to speed up rendering of longer tables in IE
http://www.quirksmode.org/css/tables.html und http://msdn.microsoft.com/en-us/library/ms531161%28v=vs.85%29.aspx

table{ table-layout: fixed; }
*/

/*
    Removes spacing between cells in tables
    Correct table border color in Chrome, Edge, and Safari.
    Remove text indentation from table contents in Chrome, Edge, and Safari.
    Set Numbers in tabular format
*/

:where( table ) {
    border-collapse: collapse;
    border-color: currentcolor;
    text-indent: 0;
    font-variant-numeric: lining-nums tabular-nums diagonal-fractions;
}

:where( td, td img ) { vertical-align: top; }

:where( caption, th, td ) {
    padding: .5em;
    text-align: left;
}

/* A11y basiscs */

/* @see https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/ */

:is( a, button, input, textarea, select, summary ):focus-visible {
    outline: var( --outline-size ) var( --outline-style ) var( --outline-ink );
    outline-offset: var( --outline-offset, var( --outline-size ) );
}

/* @section 2. Form Fixes
--------------------------------------------------- */

button,
input,
select,
optgroup,
textarea { margin: 0; font: inherit; }

select,
input,
textarea { color: inherit; }

/* Address inconsistent `text-transform` inheritance for `button` and `select`. */

button,
select { text-transform: none; }

/* adjust checkboxes, radiobuttons, text inputs to label */

input[type='radio'],
input[type='checkbox'] { box-sizing: border-box; vertical-align: baseline; padding: 0; }

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

input { line-height: normal; }

/* remove scrollbar of textarea in IE @see http://www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

textarea { overflow: auto; resize: vertical; }

/**
 * 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'], /* 1 */
input[type='reset'],
input[type='submit'] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

button[disabled],
html input[disabled] {
    cursor: default;
}

/*  Firefox and Chrome - remove inner border */

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

/**
 * 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; }

/* we like our number inputs undecorated */

input[type=number] {
    -moz-appearance: textfield;
}

::-webkit-inner-spin-button { -webkit-appearance: none;}

::-webkit-outer-spin-button { -webkit-appearance: none;}

/**
 * 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; }

label { cursor: pointer; }

.icon {
    fill: currentColor;
    height: 1em;
    width: 1em;
    overflow: hidden;
    vertical-align: -.125em;
}

.vh,
.visually-hidden {
    position: fixed;
    z-index: 20;
}

.vh:not(:focus):not(:active), .visually-hidden:not(:focus):not(:active) {
        position: absolute;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

.skiplink {
    display: block;
    top: 1rem;
    left: 1rem;
    padding: 1em;
    background-color: #111;
    color: #eee;
    z-index: 666;
}

.u-hidden { display: none; }

.u-quiet {
    color: var( --text-muted );
}

.u-quiet a,
    .u-quiet a:visited {
        color: var( --text-muted );
    }

.u-quiet a:focus,
        .u-quiet a:hover,
        .u-quiet a:active,
        .u-quiet a:visited:focus,
        .u-quiet a:visited:hover,
        .u-quiet a:visited:active {
            color: var( --text-default );
        }

.u-hyphen {
    overflow-wrap: break-word;
    wordp-wrap: break-word;
    -webkit-hyphens: auto;
            hyphens: auto;
}

.row-reverse {
    flex-direction: row-reverse;
}

::-webkit-input-placeholder { color: #777; }

::-moz-placeholder { color: #777; }

:-ms-input-placeholder { color: #777; }


.form,
.fieldset {
	--txt-space: .7em;
	--txt-height: 1.2em;
	--outline-ink: var(--brand-color);

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap) var(--gap-half);
}

.fieldset {
	margin-bottom: var(--gap);
	width: 100%;
}


.form textarea,
    .form label {
        display: block;
    }

.form__field {
        width: 100%;
    }

.form__field--half{
            width: 49%;
        }

.form__field--plz {
            width: 32%;
        }

.form__field--city {
            width: 66%;
        }

.form__buttons {
        margin-top: var( --gap );
    }

.form__buttons {
        width: 100%;
        text-align: center;
    }

.form__buttons .button {
        justify-content: center;
        width: 100%;
        max-width: 15em;
        font-size: 1.2em;
    }

.form__field.autoscroll {
        overflow-y: auto;
    }

.form__field--half {
	width: 100%;
}

@media (min-width: 50rem) {
	.form__field--half {
		width: 49%;
	}
}

.form__selection {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.legend {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: var(--gap);
}

.text-input {
    --error-brd: #a00;
    --error-bg: #fcc;
    width: 100%;
    padding: var( --txt-space );
    background: #fff;
    border: 1px solid var( --border-color );
    border-radius: 5px;
    transition: border .2s;
    box-shadow: none;

    -webkit-appearance: none;
}

.text-input ::placeholder {
        color: var( --grey-60 );
    }

.text-input:focus {
        --border-color: var( --grey );
        --outline-size: 0;
    }

.text-input:focus-visible {
        --outline-size: .2em;
    }

input.text-input:not(:placeholder-shown):invalid,
    select.text-input:not([value='']):invalid {
        border-color: var( --error-brd );
        box-shadow: inset 0 0 0 1px var( --error-brd );
        /* background-image: linear-gradient( to right, #fff 6em, #fcc 69% ); */
        background-color: var( --error-bg );
    }

.text-input__suffix {
        display: inline-block;
        padding: var( --txt-space );
        border: 1px solid var( --border-color );
        border-left: 0;
        border-radius: 0 5px 5px 0;
        background-color: var( --grey-20 );
    }

.has-suffix .text-input {
        flex-grow: 1;
        flex-basis: 50%;
        text-align: right;
        border-radius: 5px 0 0 5px;
    }

.text-input[type='number'] {
        font-variant-numeric: tabular-nums;
    }

fieldset.text-input {
    display: flex;
    gap: .7rem 1.3em;
    padding-top: calc( var( --txt-space ) * 2 );
}

fieldset.text-input.rows {
        flex-direction: column;
        flex-wrap: nowrap;
    }

.form__field.has-suffix {
    display: flex;
    flex-wrap: wrap;
}

.levitate {
    position: relative;
}

.levitate > label,
    .levitate > legend {
        position: absolute;
        top: 0;
        left: calc( var( --txt-space ) - .4em );
        transform: translateY( -50% );
        padding: 0 .5em;
        font-size: .9em;
        /* background-color: #fff; */
        background-image: linear-gradient( to top, transparent 38%, #fff 38% );
    }

.checkbox {
    position: absolute;
    clip: rect( 0 0 0 0 );
    clip-path: inset( 100% );
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    white-space: nowrap;
    border: 0;
}

.checkbox + label {
        --_bg: var( --checkbox-background, #fff );
        --_brd: var( --checkbox-border, #ccc );
        --_brd-a: var( --checkbox-border-interact, var( --brand-color ) );
        --_color: var( --checkbox-color, var( --brand-color ) );
        position: relative;
        padding: .2em 1em .2em 1.6em;
        line-height: 1;
    }

.checkbox + label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 1.1em;
        height: 1.1em;
        background: var( --_bg );
        border: 1px solid #ccc;
        border-radius: 2px;
    }

.checkbox + label::after {
        content: '';
        position: absolute;
        top: 50%;
        left: .55em;
        transform: rotate(45deg) translate(-50%, -50%);
        transform-origin: 50% 0;
        width: .35em;
        height: .65em;
        border-right: 2px solid var( --_color );
        border-bottom: 2px solid var( --_color );
        opacity: 0;
    }

.checkbox:hover + label::before,
    .checkbox:focus + label::before {
        border-color: var( --_brd-a );
    }

.checkbox:checked + label::before {
        border-color: var( --_brd-a );
    }

.checkbox:checked + label::after {
        opacity: 1;
    }

.checkbox:focus + label::before {
        outline: var( --outline-size ) var( --outline-style ) var( --outline-ink );
        outline-offset: var( --outline-offset, var( --outline-size ) );
    }

.radio + label::before {
    border-radius: 50%;
}

.dropdown {
    padding-right: 1.5em;
    appearance: none;
    background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" ><path fill="%23666" d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3z"/></svg>' );
    background-size: .8em;
    background-repeat: no-repeat;
    background-position: calc( 100% - .5em ) center;
}

.button {
    --comp-bg: var( --lobster-a11y );
    --comp-txt: #fff;
    --hover-bg: var( --blutorange );
    --hover-txt: var( --comp-txt );

    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 1ex;
    line-height: 1.2;
    text-align: center;
    color: var( --comp-txt );
    background: var( --comp-bg );
    border: 0;
    border-radius: 0;
    transition: background-color .2s;
}

a.button,
    a.button:visited {
        color: var( --comp-txt );
    }

a.button:hover,
    a.button:focus {
        color: var( --hover-txt );
    }

.button:hover,
    .button:focus {
        background-color: var( --hover-bg );
    }

.button.disabled,
    .button[disabled] {
        color: #fff;
        background: var( --grey-60 );
        cursor: not-allowed;
        pointer-events: none;
    }

.button--yellow {
    --comp-bg: var( --yellow );
    --comp-txt: var( --dark );
    --hover-bg: var( --yellow-40 );
}

.button--green {
    --comp-bg: var( --green-a11y );
    --comp-txt: #fff;
    --hover-bg: var( --green-40 );
}

.button--grey {
    --comp-bg: var( --grey-80 );
    --comp-txt: #fff;
    --hover-bg: var( --grey-60 );
}

.textflow > * + * {
        margin-top: 1.5rem;
    }

.textflow p,
    .textflow ul,
    .textflow ol,
    .textflow dl,
    .textflow table {
        line-height: 1.4;
    }

.textflow ul,
    .textflow ol { margin-left: 1em; }

.textflow li { break-inside: avoid; }

.textflow ol { list-style: decimal; }

.textflow ul { list-style: disc; }

.textflow li ol,
    .textflow li ul { margin-bottom: 0; }

.textflow li ul { list-style-type: circle; }

.textflow h1,
    .textflow h2,
    .textflow h3,
    .textflow h4 {
        font-weight: 700;
    }

.textflow h1,
    .textflow h2 {
        font-size: 1.8em;
    }

.textflow h3 {
        font-size: 1.4em;
    }

.textflow h4 {
        font-size: 1.2em;
    }

.textflow h1 + *,
    .textflow h2 + *,
    .textflow h3 + *,
    .textflow h4 + * {
        margin-top: 1ch;
    }

.textflow h1 + iframe,
    .textflow h2 + iframe,
    .textflow h3 + iframe,
    .textflow h4 + iframe {
        margin: 1em 0;
    }

.textflow table {
        width: 100%;
    }

.textflow table.hide-grid {
            --tf-table-borderWidth: 0;
        }

.textflow th {
        font-weight: 700;
        border-bottom: var( --tf-table-borderWidth, 2px) solid var( --border-color );
    }

.textflow th:empty {
        display: none;
    }

.textflow tr + tr td {
        border-top: var( --tf-table-borderWidth, 1px) solid var( --border-color );
    }

.textflow table a[href*='mailto:'] {
        word-break: break-all;
    }

.textflow svg,
    .textflow img {
        max-width: 100%;
        height: auto;
    }

.textflow svg.full,
    .textflow img.full {
        display: block;
        max-width: 100%;
        height: auto;
    }

.textflow :where( a ) {
        --color-link: var( --blue-a11y );
        --color-hover: var( --lobster-a11y );
        text-decoration: underline;
    }

.textflow :where( a[href^='tel'] ) {
        --color-link: currentcolor;
        --color-hover: currentcolor;
        text-decoration: none;
    }

.textflow .button {
        text-decoration: none;
    }

html {
    height: 100%;
    scroll-padding-top: var( --header-height );
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media( min-width: 55em ) {
    body {
        font-size: 1.2em;
    }
}

@media( min-width: 85em ) {
    body {
        --header-height: 5rem;
    }
    .header .logo__img {
        height: 3rem;
    }
}

@media( min-width: 85em ) and (max-width: 99.99em) {
    body {
        margin-left: 15em;
    }
    .header {
        padding-left: 15em;
    }
}

.noscroll {
    overflow: hidden;
}

.main {
    flex: 1 0 auto;
    width: 100%;
    padding-top: var( --header-height );
}

.main:after {
        content: '\00a0'; /* &nbsp; */
        display: block;
        height: 0;
        visibility: hidden;
    }

.header,
.footer { flex: none; }

.wrapper {
    margin-inline: auto;
    padding: 0 var( --gap );
    max-width: var( --wrapper );
}

@media (max-width: 50rem) {

.wrapper .breakout {
            margin-left: calc( var( --gap ) * -1 );
            margin-right: calc( var( --gap ) * -1 )
    }
        }

.wrapper--tight {
    margin: 0 auto;
    max-width: var( --wrapper );
}

@media (min-width: 50rem) {

.wrapper--tight {
        padding: 0 var( --gap )
}
    }

.dividing {
    margin-bottom: var( --gap );
    padding-bottom: var( --gap );
    border-bottom: 1px solid var( --border-color );
}

.dividing--top {
    margin-top: var( --gap );
    padding-top: var( --gap );
    border-top: 1px solid var( --border-color );
}

.errorcode {
    margin-top: var( --gap );
    font-size: .6em;
    color: var( --text-quiet );
}

.ie11 {
    height: 100%;
    padding: 2em;
    font-family: arial, sans-serif;
    color: #fff;
    background-color: #008566;
}

.ie11__head {
        font-weight: 700;
        margin-bottom: 1em;
    }

.ie11__alert {
        max-width: 40em;
    }

.ie11__alert a {
            color: inherit;
            text-decoration: underline;
        }

.header {
    --comp-bg: var( --header-bg );
    --comp-txt: var( --header-text );
    --comp-border: var( --grey-60 );
    --space: var( --gap-half );

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var( --header-height );
    color: var( --comp-txt );
    background-color: var( --comp-bg );
    box-shadow: inset 0 -1px 0 var( --comp-border );
}

.header > .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 var( --space );
        height: 100%;
    }

.header__main,
    .header__aside {
        order: 1;
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 50%;
    }

.header__aside {
        order: 3;
        justify-content: flex-end;
    }

.header__aside .action {
        position: relative;
        display: block;
        padding: 1ex var( --space );
        line-height: 1;
        color: inherit;
    }

.header .logo {
        order: 2;
    }

.header .bookmarkcount {
        position: absolute;
        top: 13%;
        left: 46%;
        transform: translateX( -50% );
        font-family: sans-serif;
        font-size: .7em;
        font-feature-settings: 'lnum';
    }

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
}

.logo__img {
    height: 2em;
    width: auto;
    fill: currentColor;
    max-width: revert;
}

.logo__icon {
    height: 1em;
    width: auto;
    margin-right: 1ex;
    fill: currentColor;
}

@media ( min-width: 85em ) {
        .header__aside,
        .header .search__trigger {
            font-size: 1.2em;
        }
}

@media ( min-width: 85em ) and (max-height: 53em) {
    .header {
        position: absolute;
    }
}

.navigation {
    --overlay-bg: var( --grey-20 );
    --overlay-text: var( --green-a11y );

    --_n-lh: var( --o-nav-lineheight, var( --font-line ) );
    --_n-easeFunc: cubic-bezier( .16, 1, .3, 1 );
    --_n-easeDuration: .3s;

    --menu-fs: 1.2em;
    --submenu-fs: 1em;
    --micro-fs: .8em;

    --color-link: var( --overlay-text );
}

.navigation__trigger {
        display: block;
        padding: 1ex var( --space, 1ex );
        line-height: 1;
        cursor: pointer;
    }

.navigation__trigger .icon--close {
            display: none;
        }

.js .navigation .is-fallback,
    .no-js .navigation .is-interactive {
        display: none;
    }

.navigation__close.is-fallback {
        --outline-offset: .2em;
        padding: var( --gap );
        border-top: .1em solid var( --border-color );
    }

.navigation__trigger[aria-expanded='true'] .icon--open {
            display: none;
        }

.navigation__trigger[aria-expanded='true'] .icon--close {
            display: block;
        }

[aria-expanded='true'] ~ .navigation__layer,
    .navigation__layer:target {
        --_n-visibility: visible;
        --_n-transform: translateX(0);
    }

[aria-expanded='true'] ~ .navigation__layer__abyss,
    .navigation__layer:target ~ .navigation__layer__abyss {
        opacity: 1;
        pointer-events: auto;
    }

.navigation__layer {
        position: fixed;
        top: var( --header-height );
        bottom: 0;
        left: 0;
        right: 15%;
        z-index: 100;
        max-width: 20em;
        overflow-y: auto;
        padding-top: var( --gap );
        color: var( --overlay-text );
        background-color: var( --overlay-bg );

        transform: var( --_n-transform, translateX( -100%) );
        visibility: var( --_n-visibility, hidden );
        will-change: transform;
        transition:
            transform var( --_n-easeDuration ) var( --_n-easeFunc ),
            visibility .1s linear;

        scrollbar-color: var( --scroll-fg ) var( --scroll-bg );
        scrollbar-width: thin;
    }

.navigation__layer::-webkit-scrollbar {
            width: .6em;
            height: .6em;
        }

.navigation__layer::-webkit-scrollbar-track {
            background: var( --scroll-bg );
        }

.navigation__layer::-webkit-scrollbar-thumb {
            background-color: var( --scroll-fg ) ;
            border: 1px solid var( --scroll-bg );
        }

.navigation__layer__abyss {
        position: fixed;
        top: var( --header-height );
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 99;
        background-color: rgba( 0, 0, 0, .4 );
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

.js .navigation__layer__abyss {
            cursor: pointer;
        }

.navigation .menu__wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

.navigation .menu__link {
            position: relative;
            display: block;
            min-width: 100%;
            padding: .5em 0;
            white-space: nowrap;
        }

.navigation .menu__link:focus,
            .navigation .menu__link:hover {
                text-decoration: underline;
            }

.navigation .menu__item {
            position: relative;
        }

.navigation .menu__item--nolink {
            display: flex;
            padding-top: .5em;
            padding-right: 1em;
            font-size: .9em;
            white-space: nowrap;
            color: var( --text-muted );
        }

.navigation .menu__item--nolink::before {
                content: '';
                flex-grow: 1;
                height: .7em;
                margin-right: 1em;
                border-bottom: 1px solid var( --border-color );
            }

.navigation .menu__icon {
            margin-right: 1ch;
        }

.navigation .menu__presser {
            transition: transform .2s;
        }

.navigation .submenu {
        display: none;
        font-size: var( --submenu-fs );
    }

.navigation .submenu.visible {
            display: block;
        }

.navigation .submenu .menu__item {
            padding-left: 1em;
        }

.navigation .submenu .submenu {
            margin-left: 1ch;
        }

.navigation .submenu__trigger {
            position: absolute;
            top: 1.3em;
            right: -.4em;
            /* transform: translateY( -50% ); */
            translate: 0 -50%;
            padding: .4em;
            line-height: 1;
        }

.navigation .submenu__trigger {
            display: block;
            width: 1.5em;
            height: calc( .5em * 2 + var( --_n-lh ) * 1em );
            margin-left: -.5em;
            padding: 0;
            background-color: transparent;
            background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23008566" d="M4.829-.061c.237.03.29.087.394.182l8.438 8.437a.644.644 0 0 1 0 .884l-8.438 8.437c-.52.47-1.438-.27-.884-.883L12.335 9 4.297.957c-.305-.415-.176-1.036.532-1.018"/></svg>' );
            background-size: .8em;
            background-repeat: no-repeat;
            background-position: center;
            border: 0;
            transition: transform var( --_easeDuration );
            transform-origin: 50%;
        }

.navigation .submenu__trigger[aria-expanded='true'] {
                transform: rotate(90deg);
            }

.navigation .submenu__trigger[aria-controls]:focus-visible {
                outline: var( --outline-size ) var( --outline-style ) var( --outline-ink );
                outline-offset: var( --outline-offset, var( --outline-size ) );
            }

.navigation .active > .menu__link {
        font-weight: 700;
    }

.navigation .active > .menu__link::before {
        content: '';
        position: absolute;
        left: -1ex;
        top: 50%;
        transform: translate( -50%, -50% ) rotate( 45deg);
        width: .3em;
        height: .3em;
        border: 1px solid;
        border-width: 1px 1px 0 0 ;
    }

.navigation .menu__item.primary + .menu__item.secondary {
        margin-top: 2em;
    }

.navigation .menu__item.secondary {
        --color-link: var( --grey );
        font-size: var( --micro-fs );
    }

.navigation .menu--main {
        margin-bottom: auto;
    }

.navigation .menu--main > .menu__item > .menu__link {
        font-size: var( --menu-fs );
    }

.navigation .menu--main > .menu__item {
        padding-left: var( --gap );
        padding-right: var( --gap );
    }

.navigation .menu--main > .menu__item.open,
    .navigation .menu--main > .menu__item.has-children.active {
        background-color: #fff;
    }

.navigation .menu--main > .menu__item > .submenu__trigger {
        right: calc( var( --gap ) - .4em );
    }

.navigation .menu--minor {
        --color-link: var( --text-muted );
        padding: var( --gap );
    }

@media( min-width: 85em ) {
        .navigation__trigger,
        .navigation__layer__abyss,
        .navigation__close {
            display: none;
        }
        .navigation__layer {
            --_n-visibility: visible;
            --_n-transform: translateX(0);
            right: auto;
            width: 15em;
            transition: none;
            box-shadow:
                0 2.7px 2.7px rgba( 0, 0, 0, .028 ),
                0 8.9px 8.9px rgba( 0, 0, 0, .042 ),
                0 40px 40px rgba( 0, 0, 0, .07 )
            ;
        }

        .navigation .submenu .menu__item {
            font-size: .95em;
            padding-left: var( --gap-half );
        }
        .navigation .submenu .submenu {
            margin-left: 0;
        }

        .navigation .menu--main {
            margin-bottom: var( --gap );
        }
        .navigation .menu--minor {
            display: none;
        }
}

@media( min-width: 85em ) and (max-width: 99.99em) {
        .navigation__layer {
            top: 0;
            padding-top: calc( var( --gap ) + var( --header-height ) );
            transform: none;
        }
}

@media ( min-width: 100em ) {
        .navigation__layer {
            position: absolute;
            top: 6em;
            bottom: auto;
            left: 50%;
            transform: translateX( -41em );
            max-height: 39em;
        }
}

.no-js .submenu {
    display: block;
}

.no-js .submenu__trigger {
        display: none;
    }

.search__trigger {
        display: block;
        padding: 1ex var( --space, 1rem );
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
    }

@media( min-width: 85em ) {
            .search__trigger::after {
                content: 'Suche';
                margin-left: .3em;
                text-transform: none;
            }
        }

.search__layer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        color: var( --text-default );
        transition: opacity .2s;
    }

.search__layer::backdrop {
            background-color: rgb( 0 0 0 / .4 );
        }

.search__layer:popover-open {
            opacity: 1;

            @starting-style {
                opacity: 0;
            }
        }

.search__close {
        padding: 1ex 0;
    }

.search__header {
        height: var( --header-height );
        background-color: var( --header-bg );
        box-shadow: inset 0 -1px 0 var( --comp-border );
    }

.search__header .wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
        }

.search__form {
        flex-grow: 1;
        margin-right: var( --gap );
    }

.search .text-input {
        text-align: left;
    }

.search__results {
        position: absolute;
        top: var( --header-height );
        left: 0;
        right: 0;
        z-index: 100;
        max-height: 70vh;
        max-height: 70svh;
        overflow-y: auto;
        padding: var( --gap ) 0;
        background-color: #fff;
    }

.search__result {
        margin-bottom: var( --gap );
    }

.search__result__link {
            position: relative;
            display: block;
            padding-right: 1.5em;
        }

.search__result .title {
            font-size: 1.2em;
        }

.search__result .icon {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY( -50% );
        }

.breadcrumb {
    --comp-txt: var( --grey );

    padding: 1em 0;
    font-size: .75em;
    color: var( --comp-txt );
}

.breadcrumb .link {
    color: currentColor;
}

.breadcrumb .item {
    display: inline;
}

.breadcrumb .item:before {
    position: relative;
    top: -.1em;
    display: inline-block;
    width: .4em;
    height: .4em;
    margin-right: .2em;
    margin-left: .1em;

    border: 1px solid;
    border-width: 1px 1px 0 0;
    transform: rotate( 45deg );
}

.breadcrumb .item + .item:before {
    content: '';
}

.breadcrumb .is-home .title {

}

.main-title {
    --comp-txt: var( --green );
    padding-top: var( --gap-half );
}

.no-hero .main-title {
        padding-top: var( --gap );
        padding-bottom: var( --gap );
    }

.main-title__title {
        font-size: 2em;
        line-height: 1.1;
        -webkit-hyphens: auto;
                hyphens: auto;
        color: var( --comp-txt );
    }

.porch {
    background-color: var( --comp-bg, transparent );
}

.no-hero .porch {
        --comp-bg: var( --green-a11y );
        --comp-txt: #fff;

        --sibling-abg: var( --grey-40 );
        --sibling-atxt: var( --text-default );
        --sibling-bg: transparent;
        --sibling-txt: #fff;
        --sibling-halo: var( --grey-40 );
    }

.footer {
    --comp-bg: var( --green-a11y );
    --comp-txt: #fff;
    --comp-border: #fff;
    --color-link: var( --comp-txt );
    --color-hover: currentcolor;

    --outline-ink: var( --comp-txt );

    padding-top: var( --gap );
    color: var( --comp-txt );
    background-color: var( --comp-bg );
}

.footer__row + .footer__row {
        margin-top: var( --gap );
    }

.footer__start {
        display: flex;
        align-items: center;
        margin-bottom: var( --gap-x2 );
    }

.footer__claim {
        margin-left: 1ex;
        font-size: 1.2em;
    }

.footer__newsletter {
        display: flex;
        flex-direction: column;
        gap: var( --gap );
        margin-bottom: var( --gap-x2 );
    }

.footer__address {
        font-size: .9em;
    }

@media (max-width: 44.99em) {
        .footer__address {
            padding-bottom: var( --gap );
            border-bottom: 1px solid;
        }
    }

@media (min-width: 45em) {
        .footer__newsletter {
            flex-direction: row;
        }
        .footer__address {
            width: 30%;
            min-width: min-content;
            padding-right: var( --gap-x2 );
            border-right: 1px solid;
        }
        .footer .begger {
            padding-left: var( --gap );
        }
    }

@media (max-width: 65em) {
        .footer .wrapper {
            padding-right: calc( var( --gap ) + 4em );
        }
    }

.footer__callout__link {
            display: inline-block;
            padding: .3em 0;
        }

.footer__callout__link .icon {
                width: 2em;
                margin-right: 1ch;
                margin-top: .125em;
            }

.footer__callout .call {
            display: block;
            margin-bottom: .4em;
        }

.footer__nav {
        display: flex;
        flex-wrap: wrap;
        gap: var( --gap-x2 );
    }

.footer__nav .section {
            width: 40%;
            min-width: 10rem;
            max-width: 12rem;
            font-size: .9em;
        }

.footer__nav .section:nth-last-child(2) {
                margin-right: auto;
            }

.footer__nav .section .title {
                font-weight: 700;
                margin-bottom: .5rem;
            }

.footer__nav .section .link {
                display: block;
                padding-block: .4rem;
            }

.footer__nav .section .link:hover {
                text-decoration: underline;
            }

.footer__nav .section .cancel {
                padding-top: 1rem;
            }

@media (min-width: 50rem) {
                .footer__nav .section:last-child {
                    text-align: right;
                }
            }

.footer__nav .menu {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: -1ex;
            font-size: .9em;
        }

.footer__nav .menu__item {
            margin-right: 1ex;
            margin-bottom: 1ex;
            padding-right: 1ex;
            border-right: 1px solid;
        }

.footer__nav .menu__item:last-child {
            margin-right: 0;
            padding-right: 0;
            border-right: none;
        }

.footer__nav .menu__link {
            display: block;
            line-height: 1.1;
        }

.footer__nav .menu__link:focus,
            .footer__nav .menu__link:hover {
                text-decoration: underline;
            }

.footer__nav .hub__item {
            line-height: 1.4;
        }

.footer__apps .app-icon {
            display: inline-block;
            width: 4em;
            height: 4em;
            margin-top: 1ch;
            margin-right: 1ch;
        }

.footer__social {
        display: flex;
        margin-left: calc( var( --gap-half ) * -1 );
        font-size: 1.5em;
    }

.footer__social__link {
            padding: var( --gap-half );
        }

.footer__flag {
        position: fixed;
        z-index: 1;
        top: 10em;
        right: 0;
        transform-origin: 100% bottom;
        transform: rotate( -90deg );
        display: none;
        padding: .3em;
        color: #111;
        background: #fff;
        box-shadow: 0 0 15px 0 rgba( 0, 0, 0, .15 );
    }

@media(min-width: 70em) {

.footer__flag {
            display: flex
    }
        }

.footer__flag .logo__img {
            height: 1.5em;
        }

.footer .meta {
        margin-top: var( --gap );
        padding-block: .6em;
        background: color-mix( in oklab, var( --green-a11y ), #000 40% );
    }

.footer .meta .list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: var( --gap-x2 );
            font-size: .8em;
        }

.footer .meta .link {
            display: inline-block;
            padding-block: .4em;
        }

.footer .meta .link:hover {
            text-decoration: underline;
        }

.subfooter {
    background-color: #111;
    /* margin-top: var( --gap ); */
    padding: var( --gap ) 0  var( --gap-x2 );
}

@media (min-width: 35em) {
    .subfooter .wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .subfooter .footer__callout {
        width: 100%;
    }
}

.begger {
    --txt-space: .7em;
    --txt-height: 1.2em;

    display: flex;
    flex-direction: column;
    gap: var( --gap-half );
    width: 100%;

}

.begger .begger__title {
        grid-area: title;
        font-size: 1.4em;
    }

.begger .callout {
        display: flex;
        align-items: center;
    }

@media (min-width: 45em) {

.begger {
        gap: var( --gap )

}
    }

/* now some finnish for the fun */

.kaljakellunta {
    --distance: var( --gap-half );
    --bottomOff: 5.5em;

    position: fixed;
    z-index: 3;
    bottom: var( --distance );
    right: var( --distance );
    transition: opacity .2s;
}

.not-scrolled .kaljakellunta {
        pointer-events: none;
        opacity: 0;
    }

.kaljakellunta:focus-within {
        pointer-events: all;
        opacity: 1;
    }

.kaljakellunta:has( :popover-open ) .icon--closer {
            display: block;
        }

.kaljakellunta:has( :popover-open ) .icon--opener {
            display: none;
        }

@media (min-width: 80em) {

.kaljakellunta {
        --distance: var( --gap-x2 );
        --bottomOff: 6.5em
}
    }

.kalja {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5em;
    width: 1.5em;
    margin: auto;
    font-size: 1.2em;
    border-radius: 50%;
    color: var( --comp-txt );
    background: var( --comp-bg );
    box-shadow:
        0 1.3px 3.3px rgba( 0, 0, 0, .162 ),
        0 4.5px 11.2px rgba( 0, 0, 0, .238 ),
        0 20px 50px rgba( 0, 0, 0, .4 )
    ;
}

.korkea {
    display: block;
    padding: var( --gap-half );
}

.bubble {
    --color-link: currentcolor;
    /* position: absolute; */
    position: fixed;
    z-index: 1;
    right: var( --distance );
    /* bottom: 100%; */
    bottom: var( --bottomOff );
    transform: scale( 0 );
    transform-origin: 100% 100%;
    width: 12em;
    height: auto;
    padding: var( --gap );
    font-size: 1.2em;
    color: var( --brand-color );
    background-color: #fff;
    border-radius: 5px;
    box-shadow:
        0 1.3px 3.3px rgba( 0, 0, 0, .101 ),
        0 4.5px 11.2px rgba( 0, 0, 0, .149 ),
        0 20px 50px rgba( 0, 0, 0, .25 )
    ;
    opacity: 0;
    /* transform: translate( 150%, calc( var( --gap ) * -1 ) ); */
    transition: transform .3s, opacity .2s;
}

.bubble__trigger {
        --size: 2.5em;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var( --size );
        height: var( --size );
    }

.bubble__trigger .icon--opener {
        margin-bottom: -.1em;
    }

.bubble__trigger .icon--closer {
        display: none;
    }

.bubble:popover-open {
        opacity: 1;
        transform: translate( 0, calc( var( --gap ) * -1 ) );
        transition: transform .3s, opacity .3s cubic-bezier( .19, 1, .22, 1 );

        @starting-style {
            opacity: 0;
            transform: translate( 150%, calc( var( --gap ) * -1 ) );
        }
    }

.bubble .list li + li {
        padding-top: var( --gap-half );
        margin-top: var( --gap-half);
        border-top: 1px solid var( --green-20 );
    }

.bubble a {
        font-size: 1.2em;
    }

.bubble__close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1ch;
    }

.modular + .modular,
    :where( .porch + .modular) {
        margin-top: var( --gap-x2 );
    }

.modular:last-child {
        margin-bottom: var( --gap );
    }

.alert {
    --comp-bg: var( --grey );
    --comp-txt: #fff;
    margin: var( --gap ) 0;
    padding: var( --gap-half );
    background: var( --comp-bg );
    line-height: 1.2;
    color: var( --comp-txt );
    border-radius: .3rem;
}

.alert:empty { display: none; }

.alert a {
        text-decoration: underline;
        color: inherit;
    }

.alert--success {
        --comp-bg: var( --green-60 );
    }

.alert--warning {
        --comp-bg: var( --yellow );
        --comp-txt: var( --text-default );
    }

.alert--error {
        --comp-bg: var( --red );
    }

.emergency {
    --comp-bg: var( --yellow-20 );
    --comp-txt: var( --text-default );
    --color-link: var( --green-60 );

    padding: 1em 0;
    font-size: 1.2em;
    color: var( --comp-txt );
    background-color: var( --comp-bg );
}

.emergency--notice {
        --comp-bg: var( --yellow );
        --comp-txt: var( --text-default );
    }

.emergency--critical {
        --comp-bg: var( --red );
        --comp-txt: #fff;
    }

.emergency__title {
        display: block;
        margin-bottom: .2em;
    }

.emergency__title .icon {
            margin-right: .3em;
        }

.emergency a {
        --color-link: var( --comp-txt );
        text-decoration: underline;
    }

.map__canvas {
    width: 100%;
    height: 25em;
    margin-bottom: 1.5em;
}

.details {
    background: var( --grey-20 );
    border-bottom: 2px solid var( --border-color );
}

.details + .details {
        margin-top: 1.5rem;
    }

.details.is-fancy {
        --_triggerBg: var( --brand-color );
        --_triggerTc: #fff;
    }

.details__trigger {
        all: inherit;
        display: block;
        width: 100%;
        margin: 0;
        padding: var( --gap );

        border: 0;
        cursor: pointer;
    }

.details__trigger::marker {
        display: none;
    }

.details__trigger::-webkit-details-marker {
        display: none;
    }

.details .details__title { /* high specifity */
        font-size: 1.4em;
        font-weight: 700;
    }

.details__title {
        position: relative;
        color: var( --_triggerTc, currentcolor );
        background-color: var( --_triggerBg, transparent );
    }

.js-details .details__title::before,
    .js-details .details__title::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: 50%;
        background: currentcolor;
		pointer-events: none;
    }

.details__title::after {
        right: calc( var( --gap ) + .5rem );
        transform: translate(50%, -50%);
        height: 1rem;
        width: .25rem;
    }

.details__title::before {
        right: var( --gap );
        transform: translate(0, -50%);
        height: .25rem;
        width: 1rem;
    }

.details:not(.js-details) .details__title {
        padding: var( --gap );
    }

.details__content {
        margin: 0;
        padding: 0 var( --gap ) var( --gap );
    }

.details[data-expanded='false'] .details__content {
        display: none;
    }

.details[open] .indicator__vert,
    .details[data-expanded='true'] .indicator__vert {
        display: none;
    }

.details[data-expanded="false"] .details__content {
        display: none;
    }

.details[open] .details__title::after,
    .details[data-expanded="true"] .details__title::after {
        display: none;
    }

.tabs__head {
        display: none;
    }

.tabs__content {
        margin-bottom: var( --gap-x2 );
    }

.tabs__title {
        margin-bottom: var( --gap-half );
        font-size: 1.2em;
    }

.tabs.is-interactive .tabs__head {
        display: flex;
    }

.tabs.is-interactive .tabs__title{
        display: none;
    }

.tabs--default {
        --comp-brd: var( --grey-60 );
        --comp-bg: #fff;
    }

.tabs--default .tabs__toggle {
        display: block;
        text-align: center;
        padding: var( --gap-half );
    }

.tabs--default .tabs__toggle[aria-selected] {
        position: relative;
        top: 2px;
        border: 2px solid var( --comp-brd );
        border-bottom: 0;
        background: var( --comp-bg );
    }

.tabs--default.is-interactive .tabs__content {
        padding: var( --gap ) var( --gap-half );
        border: 2px solid var( --comp-brd );
        background: var( --comp-bg );
        border-radius: 0 0 5px 5px;
    }

.notice {
    --comp-bg: var( --grey-20 );
    --comp-brd: var( --green );
    --comp-txt: var( --text-default );
    padding: var( --gap-half );
    background: var( --comp-bg );
    line-height: 1.2;
    color: var( --comp-txt );
    border-left: .4em solid var( --comp-brd );
}

.notice:empty { display: none; }

.notice a {
        text-decoration: underline;
        color: inherit;
    }

.notice--success {
        --comp-bg: var( --green-10 );
    }

.notice--warning {
        --comp-bg: #fcf8f2;
        --comp-brd: var( --yellow );
    }

.notice--error {
        --comp-bg: #fdf7f7;
        --comp-brd: var( --red );
    }

.page__main {
    margin-top: var( --gap );
    margin-bottom: var( --gap-x2 );
}

.page__section {
    margin-bottom: var( --gap );
}

.hero {
    position: relative;
    overflow: hidden;
    /* padding-top: 80%; */
    height: 109vw;
    max-height: 45vh;
}

.hero--cta {
        max-height: 30em;
    }

.hero__img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.hero__title {
        position: absolute;
        top: 15%;
        font-size: 2em;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 0 3px rgba( 0, 0, 0, .7 );
    }

@media (min-width: 40em) {

.hero__title {
            font-size: 2.5em
    }
        }

@media (min-width: 55em) {

.hero__title {
            font-size: 3em
    }
        }

.hero__cta {
        position: absolute;
        bottom: var( --gap );
        right: 0;
        width: 50vw;
        max-width: 13em;
    }

.hero__cta .button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 1.2em;
        }

.hero__cta .button + .button {
            margin-top: var( --gap-half );
        }

@media (min-width: 55em) {

.hero {
        max-height: 31.25rem;
        background-color: #fff
}

        .hero__img {
            left: 50%;
            transform: translateX( -50% );
            max-width: 105rem;
        }
    }

@media (min-width: 100em) {

.hero {
        max-height: 37.5rem
}
    }

.siblings {
    --sibling-bg: var( --grey-40 );
    --sibling-txt: var( --text-default );
    --sibling-abg: var( --green-a11y );
    --sibling-atxt: #fff;
    --outline-offset: max( -3px, -.11em );

    padding-top: var( --gap-half );
    padding-bottom: var( --gap-half );
}

.siblings__list {
        --scroll-fg: var( --green-10 );
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* scroll-snap-type: x proximity; */
        margin: 0 calc( var( --gap ) * -1 );
        padding: 0 var( --gap );

        scrollbar-color: var( --scroll-fg ) var( --scroll-bg );
        scrollbar-width: thin;
    }

.siblings__list::-webkit-scrollbar {
            width: .6em;
            height: .6em;
        }

.siblings__list::-webkit-scrollbar-track {
            background: var( --scroll-bg );
        }

.siblings__list::-webkit-scrollbar-thumb {
            background-color: var( --scroll-fg ) ;
            border: 1px solid var( --scroll-bg );
        }

.siblings__stopper::after {
        content: '';
        display: block;
        width: var( --gap );
        height: 1em;
    }

.siblings__item + .siblings__item {
        margin-left: 1ch;
    }

.siblings__link {
        --color-link: var( --sibling-txt );
        display: block;
        padding: 1ch 2ch;
        line-height: 1;
        white-space: nowrap;
        background-color: var( --sibling-bg );
        border-radius: 5px;
        border: max( 2px, .08em ) solid var( --sibling-halo, transparent );
    }

.siblings__link:focus,
    .siblings__link:hover,
    .active .siblings__link {
        color: var( --sibling-atxt );
        background-color: var( --sibling-abg );
    }

.media {
    --space: 0;
    --space-r: 0;
    --space-l: 0;
    --angle: 2px;
    --color-hover: var( --default-hover );
    break-inside: avoid;
    position: relative;
}

.media__img {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: var( --gap );
        border-radius: var( --angle );
    }

.media__title {
        margin-bottom: 1ex;
        font-size: 1.2em;
        color: var( --default-link );
    }

.media__content {
        padding: var( --space ) var( --space-r ) var( --space ) var( --space-l );
    }

.media__more {
        margin-top: 1ex;
    }

.media__callout::after {
            content: '';
            position: absolute;
            inset: 0;
        }

.media:has(.media__callout:hover ) .media__title {
        color: var( --default-hover );
    }

.media--card {
        --space: var( --gap );
        --space-r: var( --space );
        --space-l: var( --space );
        background-color: var( --grey-20 );
    }

.media--card .media__img {
        margin: 0;
    }

.media--landscape {
        --space-l: var( --gap );
        display: flex;
        /* align-items: flex-start; */
    }

.media--landscape .media__content {
        flex: 1;
    }

.media--landscape .media__img {
        --width: 5em;
        width: var( --width );
        height: 100%;
        max-height: 8em;
        object-fit: cover;
        margin-bottom: 0;
    }

@media (min-width: 22.5em) {
        .media--landscape .media__img {
            --width: 7em;
        }
    }

.media__cols {
    margin-bottom: var( --gap );
}

.media__cols .media {
        display: inline-block;
        margin-bottom: var( --gap );
    }

.media__cols .media--card {
            --space: var( --gap-half );
            --space-r: var( --space );
            --space-l: var( --space );
        }

@media (min-width: 30em) {

.media__cols {
        columns: 2;
        column-gap: var( --gap )
}
    }

.media__cols__more {
        margin-top: var( --gap );
        column-span: all;
    }

.media__list {
    margin-bottom: var( --gap );
}

.media__list .media + .media {
        margin-top: var( --gap );
    }

.media__list--alternate .media:nth-child(2n) {
        --space-r: var( --gap );
        --space-l: var( --space );
        flex-direction: row-reverse;
    }

.media__grid {
    display: flex;
    flex-direction: column;
    gap: var( --gap );
}

@media (min-width: 22.5em) {

.media__grid {
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: var( --gap )
}

        .media__grid .media {
            flex: 1 1 45%;
        }

        .media__grid__more {
            margin-top: var( --gap );
            width: 100%;
        }
    }

.media__caption {
    margin-bottom: var( --gap );
    font-size: 1.5em;
    line-height: 1.1;
    color: var( --brand-color );
}

.ohura {
    display: flex;
    flex-direction: column;
    gap: var( --gap );
    padding: var( --gap );
    color: #fff;
    background-color: var( --green );

}

.ohura__logo {
        display: flex;
        align-items: center;
        gap: 1em;
        font-weight: 700;
    }

.ohura__claim {
        font-size: 1.1em;
    }

.ohura__main {
        display: flex;
        flex-direction: column;
        gap: var( --gap );
    }

.ohura__title {
        font-size: 1.2em;
        font-weight: 700;
    }

.ohura .button .icon {
        margin-left: 3em;
    }

@media (min-width: 45em) {

.ohura {
        flex-direction: row;
        padding: var( --gap-x2 )

}

        .ohura__decor,
        .ohura__main {
            flex: 1 1 45%;
        }

        .ohura__logo {
            font-size: 1.3em;
        }
    }

.tiles {
    --space-h: var( --gap );
    --space-v: var( --gap );
    --gaps: var( --gap-half );
    --comp-bg: transparent;
    --comp-txt: var( --text-default );
    --comp-brd: var( --comp-txt );
    --comp-bg-hvr: var( --brand-color );
    --comp-txt-hvr: #fff;
    --comp-brd-hvr: var( --comp-bg-hvr );

    display: flex;
    justify-content: center;
    align-items: center;
    margin: calc( var( --gaps ) * -.5 );
    padding: var( --space-v ) var( --space-h );
}

/* display: none; */

.tiles__state:focus-visible {
            outline: 0;
        }

.tiles__state:focus-visible + label {
            outline: var( --outline-size ) var( --outline-style ) var( --outline-ink );
            outline-offset: var( --outline-offset, var( --outline-size ) );
        }

.tiles__item {
        flex-basis: 33%;
        padding: calc( var( --gaps ) * .5 );
    }

.tiles__action {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: var( --gap-half );
        color: var( --comp-txt );
        background-color: var( --comp-bg) ;
        border: 1px solid var( --comp-brd );
        border-radius: 2px;
    }

label.tiles__action {
        display: flex;
    }

.tiles__action:focus,
    .tiles__action:hover,
    .tiles__state:checked + .tiles__action {
        color: var( --comp-txt-hvr );
        background: var( --comp-bg-hvr );
        border-color: var( --comp-brd-hvr );
    }

.tiles .picto {
        font-size: 3em;
    }

.tiles .label {
        margin-top: var( --gap-half );
        text-align: center;
    }

.tiles .label small {
        display: block;
    }

.srp__form {
        margin-bottom: 2em;
    }

.srp__form .text-input {
            text-align: left;
        }

.srp__item {
        margin-bottom: 1.5em;
    }

.srp__title {
        font-size: 1.6em;
        line-height: 1.1;
        color: var( --brand-color );
    }

.srp__title .icon {
            margin-right: .2em;
        }

.srp__link {
        --color-link: currentcolor;
        --color-hover: var( --lobster );
    }

.srp__link:focus,
        .srp__link:hover {
            text-decoration: underline;
        }

.srp__breadcrumb {
        padding: .4em 0;
    }

.pager {
    display: flex;
    justify-content: center;
    text-align: center;
}

.pager.is-first::before,
    .pager.is-last::after {
        content: '';
        display: block;
        width: 6ch;
    }

.pager.is-first::before {
        margin-right: auto;
    }

.pager.is-last::after {
        margin-left: auto;
    }

.pager__item {
        display: inline-block;
    }

.pager__item--prev {
        margin-right: auto;
    }

.pager__item--next {
        margin-left: auto;
    }

.pager__link,
    .pager__text {
        --color-link: var( --green );
        --color-hover: var( --lobster );
        display: inline-block;
        padding: .25em .7em;
    }

.pager .active {
        font-weight: 700;
    }

@media( max-width: 33.99em ) {
        .pager__item--num,
        .pager__item--gap {
            display: none;
        }
    }

.pgr__label {
        display: inline-block;
        margin: 1ex 0;
    }

.pgr__action {
        display: inline-block;
        margin: 1ex 0;
        padding: .25em .7em;
        color: var( --green );
        background: transparent;
        border: 0;
    }

.pgr__action:focus,
        .pgr__action:hover {
            color: var( --lobster );
        }

.pgr .active {
        color: var( --text-default );
        font-weight: 700;
    }

.overlay__backdrop {
        content: '';
        position: fixed;
        z-index: 104;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba( 0, 0, 0, .8 );
        cursor: pointer;
    }

.overlay__content {
        position: fixed;
        z-index: 105;
        top: 50%;
        left: 50%;
        height: 90vh;
        width: 90vw;
        max-width: 25em;
        max-height: 40em;
        min-height: 27em;
        transform: translate( -50%, -50% );
    }

@media (min-width: 60em) {

.overlay__content {
            height: 50vh
    }
        }

.overlay__base {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
        background: #fff;
        border-radius: 5px;
    }

.overlay__main {
        overflow-y: auto;
        padding: 0 var( --gap );
    }

.overlay__main::after,
        .overlay__main::before {
            content: '';
            display: block;
            height: var( --gap );
        }

.overlay__bar {
        display: flex;
        justify-content: space-between;
        padding: var( --gap-half );
        color: #fff;
        background: var( --brand-color );
        border-radius: 5px 5px 0 0;
    }

.overlay__close {
        margin-left: auto;
        padding: var( --gap-half );
        line-height: 1;
        color: #fff;
        background-color: transparent;
        border: 0;
    }

/* a bit hacky but you know … JengaScript */

.js-show-overlay * {
    pointer-events: none;
}

html:has( [popover]:popover-open ) {
    overflow: hidden;
}

.overlord {
    --headr: calc( 2 * var( --gap ) + 1em );

    position: fixed;
    z-index: 105;
    top: 50%;
    left: 50%;
    height: 90vh;
    width: 90vw;
    max-width: 25em;
    max-height: 40em;
    min-height: 27em;
    transform: translate( -50%, -50% );

    /* display: grid; */
    grid-template-areas: 'action close' ' content content' ;
    grid-template-rows: var( --headr ) auto;
    /* gap: var( --gap ); */

    background: linear-gradient( to bottom, var(--brand-color) var( --headr ), #fff var( --headr ));
    backface-visibility: hidden;
    border-radius: 5px;
    box-shadow:
        0 2.7px 2.7px rgb( 0 0 0 / .028 ),
        0 8.9px 8.9px rgb( 0 0 0 / .042 ),
        0 40px 40px rgb( 0 0 0 / .07 )
    ;
}

@media (min-width: 60em) {

.overlord {
        height: 50vh
}
    }

.overlord:popover-open {
        display: grid;
    }

.overlord__close {
        grid-area: close;
        justify-self: flex-end;
        width: var( --headr );
        text-align: center;
        color: #fff;
    }

.overlord__action {
        grid-area: action;
    }

.overlord__content {
        grid-area: content;
        overflow-y: auto;
    }

.overlord__content.is-singular {
            padding: var( --gap );
        }

.overlord::backdrop {
        background-color: rgba( 0, 0, 0, .8 );
        cursor: pointer;
    }

.carousel {
    position: relative;
    display: flex;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scroll-snap-type: x proximity; */
    margin: 0 calc( var( --gap ) * -1 );
    padding: 0 var( --gap );
}

.carousel__item {
        scroll-snap-align: start end;
        padding: var( --gap ) 0;
    }

.carousel__item + .carousel__item {
        margin-left: var( --gap );
    }

.carousel__stopper::after {
        content: '';
        display: block;
        width: var( --gap );
        height: 1em;
    }

.collapse__trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

.collapse__trigger .icon  {
            margin-left: 1ch;
            transform: rotate( 90deg );
            transition: transform .2s;
        }

.collapse__content {
        height: 0;
        overflow: hidden;
    }

.collapse__state:checked + .collapse__trigger .icon {
        transform: rotate( -90deg );
    }

.collapse__state:checked ~ .collapse__content {
        height: auto;
    }

.bullets {
    --comp-bg: transparent;
    --comp-txt: currentColor;
    --comp-border: var( --border-color );

    color: var( --comp-txt );
    background: var( --comp-bg );
}

.bullets--color {
        --comp-bg: var( --green );
        --comp-txt: #fff;
        --comp-border: #eee;
        padding: var( --gap ) 0;
    }

.bullets__headline {
        margin-bottom: var( --gap );
        font-size: 1.5em;
    }

.bullets__link {
        --color-link: currentcolor;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

.bullets__icon {
        display: block;
        margin: 0 var( --gap ) var( --gap-half );
        font-size: 4em;
    }

.bullets__label {
        --fmin: .7;
        --fmax: 1.1;
        --vwmin: 20;
        --vwmax: 35;
        --base: 1rem;

        width: 30vw;
        max-width: 9rem;
    }

.bullets .carousel__item + .carousel__item {
        padding-left: var( --gap );
        border-left: 1px solid var( --comp-border, currentColor );
    }

@media (max-width: 35em) {
        .bullets__label {
            font-size: calc( ( var( --fmin ) * var( --base ) ) + ( var( --fmax) - var( --fmin ) ) * ( ( 100vw - ( var( --vwmin ) * var( --base ) ) ) / ( var( --vwmax ) - var( --vwmin ) ) ) );
        }
    }

@media (min-width: 80em) {
        .bullets--many .bullets__list {
            justify-content: space-between;
        }
        .bullets .carousel__item + .carousel__item {
            padding-left: 0;
            border-left: none;
        }
        .bullets .carousel__stopper {
            display: none;
        }
    }

.contactteaser {
    background-color: #e9ebea;
}

.contactteaser .wrapper {
        padding-top: var( --gap-x2 );
        padding-bottom: var( --gap-x2 );
        padding-right: 30%;

        background: url( '../img/phone.jpg') 100% 100% no-repeat;
        background-size: contain;
    }

@media( max-width: 35em ) {

.contactteaser .wrapper {
            background-size: 12em;
            background-position-x: calc( 100% + 55px )
    }
        }

@media( min-width: 35em ) {

.contactteaser .wrapper {
            padding-right: 13em
    }
        }

.contactteaser__title {
        margin-bottom: 1ex;
        font-size: 1.2em;
    }

.contactteaser__more {
        margin-top: 1ex;
    }

.contactteaser__link {
        display: inline-block;
        padding: .3em 0;
    }

.history {
    --_bg: var( --green-10 );
    position: relative;
    margin-top: var( --gap-x2 );
    margin-bottom: var( --gap-x2 );
}

.history::before {
        content: '';
        position: absolute;
        top: 0;
        left: .7rem;
        height: 100%;
        width: .2rem;
        background: var( --green );
    }

.history__item {
        position: relative;
    }

.history__item::before {
            content: '';
            position: absolute;
            top: 1.5rem;
            left: .3rem;
            width: 1rem;
            height: 1rem;
            background: var( --green );
            border-radius: 50%;
            box-shadow: 0 0 0 .2rem #fff;
        }

.history__item::after {
            content: '';
            display: table;
            clear: both;
        }

.history__item + .history__item {
            margin-top: var( --gap-x2 );
        }

.history__content {
        position: relative;
        margin-left: 3em;
        padding: 1em;
        background: var( --_bg );
    }

.history__content::before {
            content: '';
            position: absolute;
            top: 1.1em;
            right: 100%;
            height: 0;
            width: 0;
            border: 1em solid transparent;
            border-right: 1em solid var( --_bg );
        }

.history__title {
        margin-bottom: .75rem;
        font-size: 1.6rem;
        color: var( --green );
    }

.history__event {
        font-size: 1.25rem;
        margin-bottom: .75rem;
    }

.history__image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

@media (min-width: 40rem) {
        .history::before {
            left: 50%;
            transform: translateX(-50%);
        }
        .history__item::before {
            left: 50%;
            margin-left: -.5rem;
        }
        .history__content {
            margin-left: 0;
            padding: 1.5em;
            width: 45%;
        }
        .history__head {
            position: absolute;
            width: 100%;
            top: 1.1rem;
        }
        .history__title {
            font-size: 2.25rem;
        }
        .history__event {
            font-size: 1.5rem;
            margin-bottom: 1.25rem;
        }

        .history__item:nth-child(2n-1) .history__content {
            float: right;
        }
        .history__item:nth-child(2n-1) .history__head {
            right: 122%;
            text-align: right;
        }
        .history__item:nth-child(2n) .history__head {
            left: 122%;
        }
        .history__item:nth-child(2n) .history__content::before {
            left: 100%;
            border-color: transparent;
            border-left-color: var( --_bg );
        }
    }

.trophies {
    margin-top: var( --gap );
    margin-bottom: var( --gap-x2 );
}

.trophy {
    --_layout: 'icon title' 'content content' 'cta cta';

    display: grid;
    grid-template-areas: var( --_layout );
    grid-template-columns: auto 1fr;
    align-items: var( --_ai, center );
    gap: .8em var( --_xGap, var( --gap ) );
}

.trophy + .trophy {
        margin-top: 2em;
    }

.trophy__antlers {
        grid-area: icon;
        font-size: var( --_antlersSize, 3rem);
        color: var( --brand-color );
    }

.trophy__title {
        grid-area: title;
        font-size: 1.4em;
        font-weight: 700;
    }

.trophy__content {
        grid-area: content;
    }

.trophy__cta {
        grid-area: cta;
    }

@media (min-width: 30em) {

.trophy {
        --_layout: 'icon title' 'icon content' 'icon cta';
        --_xGap: 2rem;
        --_antlersSize: 5rem;
        --_ai: start
}
    }

.cardstack {
    display: flex;
    flex-wrap: wrap;
    gap: var( --gap );
    margin-top: var( --gap );
    margin-bottom: var( --gap-x2 );
}

.card {
    --_border: var( --green-40 );
    --_headFill: var( --green-10 );
    --_headText: var( --green-60 );

    flex: 1 1 17em;
    box-shadow: var( --global-shadow );
    /* border-radius: var( --global-radius ); */
    border: 1px solid var( --_border );
    overflow: hidden;

}

.card.is-special {
        --_border: var( --yellow-60 );
        --_headFill: var( --yellow-20 );
        --_headText: var( --dark );
    }

.card__title {
        display: flex;
        align-items: center;
        gap: 1ex;
        padding: var( --gap-half ) var( --gap );
        font-size: 1.4em;
        font-weight: 700;
        color: var( --_headText );
        background-color: var( --_headFill );
        border-bottom: 1px solid var( --grey-60 );
    }

.card__content {
        padding: var( --gap );
    }

.card__cta {
        padding: var( --gap );
    }

.herzblatt {
    display: flex;
    flex-wrap: wrap;
    gap: var( --gap-x2 );
    align-items: center;
    margin-top: var( --gap );
    margin-bottom: var( --gap-x2 );
    background: var( --green-10 );
    padding: var( --gap-x2 );
}

.herzblatt .avatar {
        border-radius: 50%;
        aspect-ratio: 1;
        max-width: 11.5rem;
    }

.herzblatt .content {
        display: flex;
        flex-direction: column;
        gap: var( --gap );
    }

.herzblatt .title {
        font-size: 1.4em;
        font-weight: 700;
        margin-bottom: var( --gap-half );
        color: var( --green-60 );
    }

.herzblatt .name {
        font-size: 1.2em;
        font-weight: 700;
    }

.herzblatt .reachout * + * {
            margin-top: .2em;
        }

.herzblatt .reachout .icon {
            margin-right: 1ex;
        }

.duo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) var( --gap-x2 );
    margin-block: var( --gap ) var( --gap-x2 );
}

.duo__image {
        display: block;
        flex-basis: 20em;
        flex-grow: 1;
        width: 100%;
        height: auto;
    }

.duo__img {
        position: sticky;
        top: 5rem;
        width: 100%;
    }

.duo__content {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: 50%;
    }

.duo__title {
        font-size: 1.8em;
        font-weight: 700;
        margin-bottom: .5rem;
    }

/* special outer element to frame it's inner content, oppsing to full width container */

.framed {
    --_txt: #fff;
    --_bg: var( --brand-color );

    max-width: min( calc(100% - 2em), var( --wrapper-wide ) );
    margin-inline: auto;
    padding-block: 2em;
    color: var( --_txt );
    background: var( --_bg );
}

.framed--light {
        --_txt: var( --brand-color );
        /* --_bg: oklch(from var( --green ) calc(l * 1.6) c h); */
        --_bg: hsl( from var( --green ) h s 96% );
    }

.framed--mint {
        --_txt: oklch(from var( --green ) calc(l * 0.6) c h);
        --_bg: var( --green-20 );
    }

.framed--gray {
        --_txt: var( --text-default );
        --_bg: var( --grey-40 );
    }

.framed--dark {
        --_txt: #fff;
        --_bg: var( --diane );
    }

.framed + .framed {
        margin-top: 0;
    }

.stepbox {
    --_txt: #fff;
    --_bg: var( --diane );

    display: grid;
    gap: var( --gap );
    padding: var( --gap );
    color: var( --_txt );
    background-color: var( --_bg );
}

.stepbox__container {
        container: stepbox / inline-size;
    }

.stepbox__title {
        font-size: 1.5em;
        font-weight: 700;
    }

.stepbox__list {
        display: grid;
        gap: var( --gap );
        /* list-style: decimal; */
        counter-reset: stepbox;
    }

.stepbox__list .item {
            display: flex;
            gap: var( --gap );
            align-items: center;
            counter-increment: stepbox;
        }

.stepbox__list .item::before {
            content: counter(stepbox);
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 1.5em;
            width: 1.5em;
            font-weight: 700;
            color: var( --_bg );
            background: var( --_txt );
            border-radius: 50%;
        }

@container stepbox (inline-size > 32em) {

.stepbox {
        grid-template-columns: 30% 1fr;
        grid-template-rows: auto auto
}

        .stepbox__title {
            grid-row: span 2;
        }
    }

.cardalbum__title {
        max-width: calc( var( --wrapper ) / 2 );
        font-size: 2em;
        font-weight: 700;
        text-wrap: balance;
        color: var( --_txt, var( --brand-color ) );
    }

.cardalbum__list {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr));
        gap: var( --gap );
        margin-top: 2em;
    }

.cardalbum__list .item {
            display: grid;
            background: #fff;
            box-shadow: .2rem .2rem .4rem 0 rgb( 0 0 0 / .1 );
        }

.cardalbum__list .logo {
            aspect-ratio: 16/9;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.cardalbum__list .image {
            max-width: 80%;
            max-height: 80%;
        }

.cardalbum__list .title {
            display: block;
            margin-inline: var( --gap );
            margin-block-end: .5em;
            font-weight: 700;
            color: var( --brand-color );
        }

.cardalbum__list .text {
            margin-inline: var( --gap );
            color: var( --text-default );
        }

.cardalbum .terms {
        font-size: .8em;
        margin-top: 1em;
        text-align: center;
        color: var( --text-muted );
    }

.cardalbum .cta {
        align-self: end;
        margin-block-start: 1em;
        padding: var( --gap-half );
    }

.cardalbum__more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .7em;
        font-weight: 700;
        color: var( --_moreColor, #fff );
        background-color: var( --_moreBackground, var( --diane ) );
        transition: background-color .2s;
    }

.cardalbum__more .icon {
            flex-shrink: 0;
        }

.cardalbum__more:focus,
        .cardalbum__more:hover {
            background-color: var( --_moreHoverBackground, var( --lobster ) );
        }

.cardalbum__cta {
        --_moreBackground: #fff;
        --_moreColor: var( --text-default );
        --_moreHoverBackground: var( --yellow );

        display: grid;
        color: #fff;
        background: var( --brand-color );
        box-shadow: .2rem .2rem .4rem 0 rgb( 0 0 0 / .1 );
    }

.cardalbum__cta .tagline {
            padding: 1em var( --gap );
            font-size: 1.7em;
            font-weight: 700;
            text-wrap: balance;
        }

.featurelist__title {
        max-width: calc( var( --wrapper ) / 2 );
        font-size: 2em;
        font-weight: 700;
        text-wrap: balance;
        color: var( --brand-color );
    }

.featurelist__list {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr));
        gap: var( --gap );
    }

.featurelist__list .item {
            display: flex;
            gap: .8em;
            font-size: 1.2em;
            color: var( --brand-color );
        }

.featurelist__list .icon {
            flex-shrink: 0;
            font-size: 1.2em;
        }

.featurelist__list,
    .featurelist .textflow,
    .featurelist .cta {
        margin-top: 2em;
    }

.benefits__title {
        max-width: calc( var( --wrapper ) / 2 );
        font-size: 2em;
        font-weight: 700;
        text-wrap: balance;
    }

.benefits__list {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr));
        gap: 2em;
        margin-top: 2em;
    }

.benefits__list .title {
            display: flex;
            align-items: center;
            gap: 1ex;
            margin-bottom: 1ex;
            font-size: 1.4em;
            font-weight: 700;
        }

.benefits .cta {
        display: flex;
        justify-content: center;
        margin-top: 2em;
    }

.bookmarked {
    display: none;
    justify-content: center;
    align-items: center;
    width: 1.7em;
    height: 1.7em;
    padding-left: .1em;
    color: #fff;
    background-color: var( --green );
    border-radius: 50%;
}

.bookmarked.is-bookmarked {
        display: inline-flex;
    }

.checkout {
    margin-top: var( --gap-x2 );
}

.products__list {
        height: 100%;
        padding: var( --gap-x2 ) 0;
        background-color: var( --grey-20 );
    }

.products__item {
        margin-bottom: var( --gap );
        overflow: hidden;

        background-color: #fff;
        border-radius: 5px;
        box-shadow: var( --global-shadow );
    }

.products__header {
        --color-link: currentcolor;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var( --gap-half ) var( --gap );
        font-size: 1.6em;
        color: #fff;
        background-color: var(--brand-color );
    }

.products__header .icon {
            flex-shrink: 0;
        }

.products__main {
        padding: var( --gap );
    }

.products__features {
        margin-bottom: var( --gap );
    }

.products__features__item {
            margin-right: 1ch;
            margin-bottom: .3ch;
        }

.products__features .icon {
            color: var( --brand-color );
        }

.products__price {
        margin-bottom: var( --gap );
    }

.products__price small {
            font-size: .4em;
        }

.products__price .monthly {
            font-size: 2em;
            color: var( --brand-color );
        }

.products__price .total {
            font-size: .9em;
            color: var( --text-muted );
        }

.products__action {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.products__action .button {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            width: 60%;
            max-width: 8em;
            font-size: 1.2em;
        }

.products__action .bookmark__action {
            padding: 1ex;
            color: var( --brand-color );
            background-color: #fff;
            white-space: nowrap;
        }

@media(min-width: 60em) {
            .products__list .wrapper {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 2em;
            }

            .products__list p:last-child {
                grid-column: 1 / 2;
                margin-top: var( --gap );
            }
        .products__item {
            margin-bottom: 0;
        }
        .products__header {
            min-height: 3.1em;
        }
    }

.ranger {
    -webkit-appearance: none;
    width: 100%;
    margin: var( --gap-half ) 0;
}

.ranger:focus {
        outline: none;
    }

.ranger::-moz-range-track {
        width: 100%;
        height: .7em;
        background: var( --grey-60 );
        border: 0;
        border-radius: .35em;
        cursor: pointer;
        -moz-transition: background .2s;
        transition: background .2s;
    }

.ranger::-webkit-slider-runnable-track {
        width: 100%;
        height: .7em;
        background: var( --grey-60 );
        border: 0;
        border-radius: .35em;
        cursor: pointer;
        -webkit-transition: background .2s;
        transition: background .2s;
    }

.ranger::-webkit-slider-thumb {
        height: 1.7em;
        width: 1.7em;
        border-radius: 1em;
        background: var( --green );
        border: 0;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -.5em;
    }

.ranger::-moz-range-thumb {
        height: 1.7em;
        width: 1.7em;
        border-radius: 1em;
        background: var( --green );
        border: 0;
        cursor: pointer;
        -webkit-appearance: none;
        /* margin-top: -14px; */
    }

.ranger::-moz-range-progress {
        height: .7em;
        background: var( --green-40 );
        border-radius: .35em;
    }

.ranger:focus::-moz-range-track {
        background: var( --grey-80 );
    }

.ranger:focus::-webkit-slider-runnable-track {
        background: var( --grey-80 );
    }

.rangeselector {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    max-width: 20em;
    margin: 0 auto;
}

.rangeselector__state {
        display: none;
    }

.rangeselector__member {
        font-size: 2em;
        color: var( --grey-60 );
        padding: 0 .3em;
        text-align: center;
    }

.rangeselector__state:checked + .rangeselector__member,
    .rangeselector__state:checked ~ .rangeselector__member {
        color: var( --green-40 );
    }

.rangeselector__member:hover,
    .rangeselector__member:hover ~ .rangeselector__member,
    .rangeselector__state:checked + .rangeselector__member:hover {
        color: var( --green );
    }

.rangeselector .label {
        display: block;
        font-size: 1rem;
        line-height: 1.1;
        -webkit-hyphens: auto;
                hyphens: auto;
    }

.encyclopod {
    height: 100%;
    max-width: 25em;
    max-height: 40em;
    margin: 0 auto;

}

.p-encyclopod .encyclopod {
        margin-top: var( --gap-x2 );
    }

.encyclopod__view {
        display: none;
        flex-direction: column;
        width: 100%;
        padding-top: var( --gap );
        padding-bottom: var( --gap );
    }

.encyclopod__view.current {
            display: flex;
        }

.encyclopod__bar {
        /* height: calc( var( --gap ) * 2 + 1em ); */
        /* padding-bottom: var( --gap ); */
        height: 1em;
        margin-bottom: var( --gap-x2 );
    }

.encyclopod__metaaction {
        padding: 0;
        line-height: 1;
        background-color: transparent;
        border: 0;
    }

.overlord .encyclopod__metaaction {
            position: absolute;
            left: var( --gap );
            top: var( --gap );
            color: #fff;
        }

.encyclopod__close {
        position: absolute;
        right: var( --gap-half );
        top: var( --gap-half );
        padding: var( --gap-half );
    }

.encyclopod__title {
        font-size: 1.3em;
        margin-bottom: var( --gap );
    }

/* &.form {
        --headr: calc( 2 * var( --gap ) + 1em );
        background: linear-gradient( to bottom, var(--brand-color) var( --headr ), #fff var( --headr ));
        border-radius: 5px;
        box-shadow:
            0 2.7px 2.7px rgba( 0, 0, 0, .028 ),
            0 8.9px 8.9px rgba( 0, 0, 0, .042 ),
            0 40px 40px rgba( 0, 0, 0, .07 )
        ;
    } */

.encyclopod .tiles {
        --space-h: 0;
    }

.encyclopod .form__field {
        margin-top: var( --gap );
    }

.encyclopod .form__buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var( --gap );
        margin-top: var( --gap-x2 );
    }

.encyclopod__rangertop {
        text-align: center;
    }

.encyclopod .keyboard {
        background-image: url( 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="512" height="512" viewBox="0 0 576 512" xml:space="preserve"><path fill="%23ccc" d="M528 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm16 336c0 8.823-7.177 16-16 16H48c-8.823 0-16-7.177-16-16V112c0-8.823 7.177-16 16-16h480c8.823 0 16 7.177 16 16v288zM168 268v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm-336 80v-24c0-6.627-5.373-12-12-12H84c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm384 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zM120 188v-24c0-6.627-5.373-12-12-12H84c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm96 0v-24c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v24c0 6.627 5.373 12 12 12h24c6.627 0 12-5.373 12-12zm-96 152v-8c0-6.627-5.373-12-12-12H180c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h216c6.627 0 12-5.373 12-12z"/></svg>' );
        background-size: 1em;
        background-repeat: no-repeat;
        background-position: var( --gap-half ) center;
        padding-left: var( --gap-x2 );
    }

.encyclopod .text-input[name='postal'] {
        --error-brd: #222;
        --error-bg: #fff;
        width: 8em;
    }

.encyclopod .audience {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

.encyclopod .audience .tiles__item {
            width: 100%;
            max-width: 100%;
        }

.encyclopod .audience .tiles__action {
            flex-direction: row;
            justify-content: flex-start;
        }

.encyclopod .audience .label {
            margin-left: var( --gap );
            text-align: left;
        }

.encyclopod .demand {
        flex-wrap: wrap;
    }

.encyclopod .demand .tiles__item {
            flex-basis: 50%;
        }

.encyclopod .demand .picto {
            font-size: 1.25em;
        }

.encyclopod .demand .tiles__state[disabled] + .tiles__action {
            --comp-txt: var( --grey-60 );
            --comp-brd: var( --comp-txt );
            --comp-bg-hvr: transparent;
            --comp-txt-hvr: var( --comp-txt );
            --comp-brd-hvr: var( --comp-txt );
        }

.encyclopod .suggestions {
        font-size: 1.1em;
    }

.encyclopod .suggestions__item + .suggestions__item {
        margin-top: var( --gap-half );
        padding-top: var( --gap-half );
        border-top: 1px solid var( --border-color );
    }

.encyclopod .divide {
        text-align: center;
    }

.encyclopod .divide__inner {
            position: relative;
            padding: 0 var( --gap );
        }

.encyclopod .divide__inner::after,
            .encyclopod .divide__inner::before {
                content: '';
                position: absolute;
                top: 50%;
                width: 1em;
                border-top: 1px solid #ccc;
            }

.encyclopod .divide__inner::after { left: 100%; }

.encyclopod .divide__inner::before { right: 100%; }

.encyclopod .final__error,
        .encyclopod .final__message {
            font-size: 1.5em;
        }

.encyclopod .final__error .icon, .encyclopod .final__message .icon {
                display: block;
                margin: var( --gap ) auto;
                font-size: 4em;
                color: var( --brand-color );
            }

.encyclopod .spinner {
        position: relative;
        width: 32px;
        height: 32px;
        margin: 20px auto;
        border: 1px var( --brand-color ) solid;
        border-radius: 50%;
    }

.encyclopod .spinner:before {
            content: '';
            border-left: 1px var( --brand-color ) solid;
            position: absolute;
            top: 2px;
            left: 50%;
            width: 1px;
            height: calc( 50% - 2px );
            transform: rotate( 0deg );
            transform-origin: 0% 100%;
            animation: spClock 1s infinite linear;
        }

/* don't show a happy family to a business customer */

.encyclopod.is-business .view--power .encyclopod__rangertop,
        .encyclopod.is-business .view--power .rangeselector,
        .encyclopod.is-business .view--power .row-divider,
        .encyclopod.is-business .view--power .row-range,
        .encyclopod.is-business .view--gas .encyclopod__rangertop,
        .encyclopod.is-business .view--gas .rangeselector,
        .encyclopod.is-business .view--gas .row-divider,
        .encyclopod.is-business .view--gas .row-range {
            display: none;
        }

@keyframes spClock {
    from { transform: rotate( 0deg ); }
    to { transform: rotate( 359deg ); }
}

.overlay .encyclopod__view {
        height: 100%;
    }

.overlay .encyclopod .form__buttons {
        margin-top: auto;
    }

/* Behelfsvehikel für unausgereifte Verwendung der media componente */

.p-home .media-block,
    .p-home .news {
        margin-top: var( --gap-x2 );
        margin-bottom: var( --gap-x2 );
    }

.p-home .hero {overflow: hidden;}

.p-home .hero .wrapper {
        position: relative;
        height: 100%;
    }

.p-home button.hero__audience__trigger,
    .js .p-home a.hero__audience__trigger,
    .p-home .no-js button[popovertarget='preisrechner'] {
        display: none;
    }

.js .p-home button.hero__audience__trigger {
        display: flex;
    }

.p-home .hero__audience {
        visibility: var( --_vis, hidden);
        position: absolute;
        z-index: 1;
        inset: 0;
        transform: translateX( var( --_offset, 100% ) );
        display: flex;
        flex-direction: column-reverse;
        transition: transform .2s, visibility .2s linear;
    }

.p-home .hero__audience.show {
            --_vis: visible;
            --_offset: 0;
            transition: transform .2s, visibility .2s linear;
        }

.p-home .hero__audience__close {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 100%;
            width: 100%;
            cursor: default;
            outline: 0;

        }

/* background: rgb( 0 0 0 / .4); */

.p-home .hero__audience__close .label {
                visibility: hidden;
                padding: 1ch;
                color: #fff;
                background: var( --brand-color );
            }

.p-home .hero__audience__close:focus-visible .label {
                visibility: visible;
                outline: var( --outline-size ) var( --outline-style ) var( --outline-ink );
                outline-offset: var( --outline-offset, var( --outline-size ) );
            }

.p-home .hero__audience .banderole {
            background: var( --brand-color );
        }

.p-home .hero__audience .tiles {
            --comp-bg: transparent;
            --comp-txt: #fff;
            --comp-bg-hvr: #fff;
            --comp-txt-hvr: var(--brand-color );
            --space-h: var( --gap-half );
            width: 100%;
            max-width: var( --wrapper );
            margin-left: auto;
            margin-right: auto;
        }

.product__section {
        margin-top: var( --gap );
        margin-bottom: var( --gap );
    }

.product__section__title {
            font-size: 1.4em;
            margin-bottom: var( --gap-half );
        }

.product__section .details__title {
            font-size: 1.4em;
        }

.product > .product__section:last-child {
        margin-bottom: var( --gap-x2 );
    }

.product__features {
        display: flex;
        flex-wrap: wrap;
        margin-top: -1ch;
        margin-bottom: var( --gap );
    }

.product__features__item {
            margin-right: 1ch;
            margin-bottom: .5ch;
        }

.product__features .icon {
            color: var( --brand-color );
        }

.product__price {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    }

.product__price__item {
            min-width: 15em;
            margin-bottom: var( --gap );
        }

.product__total small {
            display: block;
            font-size: .4em;
        }

.product__total--month {
            font-size: 3em;
            color: var( --brand-color );
        }

.product__total--total {
            font-size: .9em;
            color: var( --text-muted );
        }

.product__action {
        text-align: center;
        margin-top: var( --gap-x2 );
        margin-bottom: var( --gap-x2 );
    }

.product__action .button {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 15em;
            margin-bottom: var( --gap-half );
            font-size: 1.2em;
        }

.product__action .button[hidden] {
            display: none;
        }

.product__action .bookmarked {
            margin: 0 var( --gap-half );
        }

@media (min-width: 41em) {

.product__action {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: calc( var( --gap-half) * -1);
            margin-right: calc( var( --gap-half) * -1)
    }

            .product__action .button {
                margin: 0 var( --gap-half );
            }
        }

.product__reference {
        color: var( --text-muted );
    }

.product__reference .change {
            color: var( --brand-color );
        }

.product__audience__list {
            display: flex;
            align-items: center;
        }

.product__audience__item {
            padding: var( --gap );
            text-align: center;
        }

.product__audience__item + .product__audience__item {
            border-left: 1px solid var( --border-color );
        }

.product__audience .icon {
            display: block;
            margin: 0 auto var( --gap-half );
            font-size: 2.5em;
        }

.product__details__rowhead {
        font-weight: 700;
    }

.product__request__alternatives {
            margin-top: var( --gap );
        }

.pl__head {
        --comp-border: var( --grey-60 );
        padding: 0 0 var( --gap ) 0;
        box-shadow: inset 0 -1px 0 var( --comp-border );
    }

.pl__form {
        margin-top: var( --gap );
        flex-wrap: nowrap;
        justify-content: start;
    }

.pl__facets__explaination {
        white-space: nowrap;
        padding-right: var( --gap );
    }

.pl__facets {
        display: flex;
        flex-wrap: wrap;
        gap: var( --gap-half ) var( --gap );
    }

.pl__facets .alert {
            display: inline-block;
        }

.pl__facets__data {
        padding: var( --gap-half ) var( --gap ) var( --gap-half ) 0;
    }

.pl__facets__change {
        padding: 0;
        font-size: .9em;
        color: var( --brand-color );
        background: none;
    }

.pl__facets .carousel__item {
        padding: 0;
    }

.pl__facets .carousel__item + .carousel__item {
        margin-left: 0;
    }

.matrix {
    margin-bottom: var( --gap-x2 );
}

.matrix__headline {
        margin-top: var( --gap );
        font-size: 1.3em;
        text-align: center;
    }

.matrix .tabs__head {
        margin-bottom: var( --gap );
    }

.matrix .tabs__toggle[aria-selected='true'] {
        --comp-txt: #fff;
        --comp-bg: var( --brand-color );
        --comp-brd: var( --brand-color );
    }

.matrix__item + .matrix__item {
        margin-top: var(--gap-half );
    }

.matrix .wrapper {
        max-width: 35em;
    }

.matrix .tiles {
        --comp-bg: var( --lobster );
        --comp-txt: #fff;
        --comp-brd: var( --comp-bg );
        --comp-bg-hvr: var( --brand-color );
        --comp-txt-hvr: #fff;
        --comp-brd-hvr: var( --comp-bg-hvr );
        --space-h: 0;
    }

.matrix .plan {
        --comp-bg: var( --brand-color );
        --color-link: #fff;
        --color-hover: #fff;
        display: flex;
        align-items: center;
        padding: var(--gap-half );
        background-color: var( --comp-bg );
    }

.matrix .plan--disabled {
            --comp-bg: var( --grey-40 );
            color: var( --color-link );
        }

.matrix .plan__icon {
            margin-right: 1ch;
        }

.matrix .plan__count {
            display: block;
            width: 1.2em;
            height: 1.2em;
            line-height: 1.2em;
            text-align: center;
            margin-left: auto;
            margin-right: 1ch;
            color: var( --comp-bg );
            background-color: var( --color-link );
            border-radius: 2em;
        }

.p-service .media__list .media + .media {
            margin-top: 0;
        }

.p-service .media__list .media:nth-child(3) {
            --color-link: currentcolor;
            color: #fff;
            background-color: var( --green );
}

/* Landing pages */
.landingpage .main-title {
	padding-top: var(--gap-x2);
}

.landingpage .hero .wrapper {
	position: relative;
	height: 100%;
}

.lp__callout {
	text-align: center;
}

.lp__features {
	padding-top: var(--gap-x2);
	padding-bottom: var(--gap-x2);
}

.lp__features__list {
	margin-bottom: var(--gap);
}

.lp__features__list .icon {
	color: var(--brand-color);
}

.textflow .lp__features__list {
	list-style: none;
	margin-left: 0;
}

.lp__features__item {
	display: flex;
	line-height: 1.2;
}

.lp__features__item+.lp__features__item {
	margin-top: .2em;
}

.lp__features__item .icon {
	flex-shrink: 0;
	margin-right: .2em;
	height: 1em;
}

.lp__benefits {
	color: #fff;
	background-color: var(--brand-color);
}

.lp__benefits.light {
	color: var(--text-default);
	background-color: #fff;
}

.lp__benefits .textflow {
	padding-top: var(--gap-x2);
	padding-bottom: var(--gap-x2);
}

.lp__benefits .icon {
	margin-right: .3em;
}

.lp__uni {
	padding-top: var(--gap-x2);
	padding-bottom: var(--gap-x2);
}

.lp__ad {
	position: relative;
	color: #fff;
}

.lp__ad__img {
	display: block;
	width: 100%;
	height: 16em;
	object-fit: cover;
}

.lp__ad .wrapper {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.lp__ad__claim {
	position: absolute;
	top: var(--gap);
	font-size: 1.8em;
	font-weight: 700;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.lp__ad__smallprint {
	position: absolute;
	bottom: var(--gap);
}

/*# sourceMappingURL=main.css.map */