/* -------------------------------------------- */
/* VAPAGUIDE 24 */
/* Version: 46 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* StyleSheet Scope: 
Variable initialization
Font initialization
Element/Property resets
Development markers */
/* -------------------------------------------- */


/* !-------------------------------------------- */
/* !Central property dictionary */
/* !-------------------------------------------- */
    
:root {
    /* 🎨 --- COLOR: definitions */
    /* ▪️ Base corporate colors */
    --vapa-marine-100: #3c597d;
    --vapa-marine-50: #b0bdcc;
    --vapa-marine-30: #c1d7e2;
    --vapa-marine-20: #e6f0f3;
    --vapa-marine-10: #f3f7f9;
    
    --vapa-earth-100: #947b57;
    --vapa-earth-60: #dcc9ba;
    --vapa-earth-50: #dac9b9;
    --vapa-earth-30: #ede5d5;
    --vapa-earth-20: #f8f4ee;
    
    --vapa-nature-100: #5b6255;
    --vapa-nature-50: #ccd8cc;
    --vapa-nature-30: #ebefea;
    
    --vapa-black: var(--vapa-black-100);
    --vapa-black-100: #000000;
    --vapa-black-80: #282f38;
    --vapa-black-60: #7F7F7F;
    --vapa-black-30: #c6c6c6;
    --vapa-black-30-alpha: rgba(0, 0, 0, 0.3);
    --vapa-black-20: #e8e8e8;
    --vapa-black-20-alpha: rgba(0, 0, 0, 0.2);
    --vapa-black-10-alpha: rgba(0, 0, 0, 0.1);
    
    --vapa-accent-120: #5d527a;
    --vapa-accent-100: #7a6da1;
    --vapa-accent-50: #bab2d0;
    --vapa-accent-50-alpha: rgba(122, 109, 161, 0.5);
    --vapa-accent-30: #d6cfe2;
    --vapa-accent-20: #e2dfe9;
    --vapa-accent-10: #efedf4;
    --vapa-accent-10-alpha: rgba(122, 109, 161, 0.1);
    
    --vapa-signal-100: #bb3f4b;
    --vapa-signal-50: #b37e87;
    --vapa-signal-20: #f6c1b9;
    --vapa-signal-10: #f6e9ec;

    --vapa-counter: #d29846;
    
    --vapa-white: #fff;
    --vapa-white-80-alpha: rgba(255, 255, 255, 0.8);
    
    
    /* 🎨 --- COLOR: semantic assignments */
    /* ▪️ Signature colors */
    --vapa-water: var(--vapa-marine-30);
    --vapa-water-light: var(--vapa-marine-20);
    --vapa-water-solid: var(--vapa-marine-100);
    
    --vapa-land: var(--vapa-earth-30);
    --vapa-land-light: var(--vapa-earth-20);
    --vapa-land-solid: var(--vapa-earth-100);

    --vapa-hybrid: var(--vapa-accent-30);
    --vapa-hybrid-light: var(--vapa-accent-10);
    --vapa-hybrid-solid: var(--vapa-accent-100);
    
    --vapa-general: var(--vapa-nature-50);
    --vapa-general-light: var(--vapa-nature-30);
    --vapa-general-solid: var(--vapa-nature-100);
    
    
    /* 📃 --- BACKGROUNDS */
    /* ▪️ Background colors */
    --selectable-emphasis-backcolor: rgba(255,255,255,0.5);
    --mobile-shading-backcolor: rgba(40, 47, 56, 0.3);
    
    --map-backcolor: var(--vapa-white);
    --map-selector-backcolor: var(--vapa-earth-60);
    
    --backcolor-flow-link: var(--vapa-accent-10-alpha);
    --backcolor-flow-link-hover: transparent;
    --backcolor-flow-link-focus: var(--vapa-accent-50-alpha);
    
    /* ▪️ Table cell backgrounds */
    --table-backcolor-light: var(--vapa-black-20);
    --table-backcolor-medium: var(--vapa-black-30);
    --table-backcolor-dark: var(--vapa-black-60);
    --table-backcolor-signal-light: var(--vapa-signal-10);
    --table-backcolor-signal-medium: var(--vapa-signal-20);
    
    
    /* 📈 --- LINES */
    /* ▪️ Lines */
    --line-master: 4px solid var(--vapa-black-80);
    
    --line-standard: 1px solid var(--vapa-black-80);
    --line-standard-land: 1px solid var(--vapa-earth-100);
    --line-standard-water: 1px solid var(--vapa-marine-100);
    --line-standard-hybrid: 1px solid var(--vapa-accent-100);
    --line-standard-general: 1px solid var(--vapa-nature-100);
    
    --line-light: 1px solid var(--vapa-black-30);
    --line-light-land: 1px solid var(--vapa-land);
    --line-light-water: 1px solid var(--vapa-water);
    --line-light-hybrid: 1px solid var(--vapa-hybrid);
    --line-light-general: 1px solid var(--vapa-general);
    
    --line-ultralight: 1px solid var(--vapa-black-20);
    
    --line-flyout-border: var(--line-light);

    /* ▪️ Table separator lines */
    --table-line-horizontal-head-sticky: inset 0 -4px 0 0 var(--vapa-black-30);
    --table-line-vertical-head-sticky: inset 1px 0 0 0 var(--vapa-black-30);
    --table-line-vertical-head-sticky-light: inset 1px 0 0 0 var(--vapa-black-20);
    
    --table-line-horizontal-body: var(--line-light);
    --table-line-horizontal-body-light: var(--line-ultralight);
    --table-line-vertical-body: var(--line-light);
    --table-process-line-box: var(--line-light);

    
    /* ⭐️ --- ICONS: graphical assets */
    --asset-action-link: url("./img/icons/icon_link.svg");
    --asset-action-link-white: url("./img/icons/icon_link_white.svg");
    --asset-action-link-external: url("./img/icons/icon_link_external.svg");
    --asset-action-link-external-white: url("./img/icons/icon_link_external_white.svg");
    

    /* ⭐️ --- ICONS: Dimensions */
    --zoo-tile-height-minimum-mobile: 64px;

    --zoo-illu-height: 80px;
    --zoo-illu-snake-height-maximum: 242px;
    --zoo-illu-other-height: 68px;
    
    --zoo-illu-height-mobile: 48px;
    --zoo-illu-other-height-mobile: 22px;
    
    --zoo-illu-width-mobile-static: 68px;

    
    /* 🔗 --- BUTTONS & LINKS */
    /* ▪️ Master buttons */
    --textcolor-link: var(--vapa-black-100);
    --textcolor-link-low: var(--vapa-black-80);
    --textcolor-link-hover: var(--vapa-black-80);
    --textcolor-link-focus: var(--vapa-nature-80);
    
    /* ▪️ Inline links in content */
    --textcolor-flow-link: var(--vapa-black-100);
    --textcolor-flow-link-hover: var(--vapa-black-100);
    --textcolor-flow-link-focus: var(--vapa-black-80);
    
    --textcolor-flow-link-inverse: var(--vapa-white);
    --textcolor-flow-link-inverse-hover: var(--vapa-white);
    --textcolor-flow-link-inverse-focus: var(--vapa-white-80-alpha);

    
    /* ▪️ Primary actions */
    --primary-action-height: 35px;
    --primary-icon-width: 50px;

    
    /* ☑️ 🎨 --- FORM COMPONENTS: Colors */
    --field-backcolor: var(--vapa-white);
    --field-border: 1px solid var(--vapa-black-30);
    --field-border-hover: 1px solid var(--vapa-black-100);
    --field-border-focus: 1px solid var(--vapa-black-100);

    
    /* ☑️ 📐 --- FORM COMPONENTS: dimensions, distances & typography */

    
    /* 🖼️ --- CONTAINERS */
    /* ▪️ Box shadows */
    --shadow-soft: 
    0px 4.8px 2.2px rgba(0, 0, 0, 0.028),
    0px 9.7px 5.3px rgba(0, 0, 0, 0.04),
    0px 15px 10px rgba(0, 0, 0, 0.05),
    0px 21.8px 17.9px rgba(0, 0, 0, 0.06),
    0px 33.9px 33.4px rgba(0, 0, 0, 0.072),
    0px 73px 80px rgba(0, 0, 0, 0.1);
    
    --shadow-edge: 5px 0 30px rgba(0,0,0,0.5);

    --shadow-flyout: var(--shadow-soft);
    --shadow-drawer: var(--shadow-edge);

    
    /* 🏁 --- TRANSITIONS */
    --transition-universal: all 0.3s ease;
    --transition-color: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    --transition-border: border 0.3s ease;
    --transition-transform: transform 0.5s ease;
    
    --transition-drawer: 0.3s left ease-in-out;

    
    /* 🔠 --- TYPOGRAPHY */
    /* ▪️ Text colors */
    --textcolor-standard: var(--vapa-black-100);
    --textcolor-emphasis: var(--vapa-black-80);
    --textcolor-label: var(--vapa-black-80);
    --textcolor-accent: var(--vapa-accent-100);
    --textcolor-badge: var(--vapa-counter);
    --textcolor-dimmed: var(--vapa-black-60);
    
    /* ▪️ Baseline font */
    --font-base: "DIN", "Helvetica", "Arial", sans-serif;
    --font-content: "Andada", "Georgia", "Times", serif;
    --font-size-standard: 14px;
    
    /* ▪️ Size configurations */
    --textset-xs: 400 10px/13.5px var(--font-base);
    --textset-s: 400 12px/15px var(--font-base);
    --textset-m: 400 14px/18px var(--font-base);
    --textset-l: 600 16px/22px var(--font-base);
    
    --textset-content-s: 400 13px/18px var(--font-content);
    --textset-content-m: 400 14.5px/21.5px var(--font-content); /* also used for h6 */
    --textset-content-m-minus: 400 14.5px/20px var(--font-base); /* h5 */
    --textset-content-m-plus: 400 15.5px/21.5px var(--font-base); /* h4 */
    --textset-content-l: 600 16.5px/21px var(--font-base); /* h3 */ 
    --textset-content-xl: 600 20px/26px var(--font-base); /* h2 */
    --textset-content-xxl: 600 24px/32px var(--font-content); /* h1 */
    
    --textset-table-s: 600 10px/13.5px var(--font-base);
    --textset-table-m: 400 12px/15px var(--font-base);
    --textset-table-l: 400 14px/18px var(--font-base);

    /* ▪️ Letter spacing */
    --spacing-env-marker: 0.07em;
    --spacing-headline-level3: 0.1em;
    
    /* ▪️ Richtext list markers */
    --marker-order-color: var(--textcolor-standard);
    --marker-order-color-land: var(--vapa-earth-100);
    --marker-order-color-water: var(--vapa-marine-100);
    --marker-order-color-general: var(--vapa-nature-100);
    --marker-order-color-hybrid: var(--vapa-accent-100);
    
    --marker-bullet-color: var(--vapa-black-80);
    --marker-bullet-color-land: var(--vapa-earth-60);
    --marker-bullet-color-water: var(--vapa-marine-50);
    --marker-bullet-color-general: var(--vapa-nature-50);
    --marker-bullet-color-hybrid: var(--vapa-accent-50);


    /* 💬 --- STRINGS */
    --env-marker-dev: "DEV: ";
    --env-marker-preview: "PREVIEW: ";
    --env-marker-prototype: "PROTOTYPE: ";

    
    /* 📦 --- PAGE LAYOUT */
    /* ▪️ Default widths */
    --site-tablet-width: 1256px; /* 1st breakpoint: tablets begin to scale down with 1256px enforced width (= 1192px + 2 * 32px) */
    --site-width: 1192px; /* technical minimum width */
    --site-width-mobile: 736px; /* 2nd breakpoint: switch to mobile layout */
    
    --desktop-gutter: 24px;
    --mobile-gutter: 16px;

    /* ▪️ Column grid */
    --width-1col: 40px;
    --width-1col-plus: 64px;
    --width-2col: 104px;
    --width-2col-plus: 128px;
    --width-3col: 168px;
    --width-3col-plus: 192px;
    --width-4col: 232px;
    --width-4col-plus: 256px;
    --width-5col: 296px;
    --width-5col-plus: 320px;
    --width-6col: 360px;
    --width-6col-plus: 384px;
    --width-7col: 424px;
    --width-7col-plus: 448px;
    --width-8col: 488px;
    --width-8col-plus: 512px;
    --width-9col: 552px;
    --width-9col-plus: 576px;
    --width-10col: 616px;
    --width-10col-plus: 640px;
    --width-11col: 680px;
    --width-11col-plus: 704px;
    --width-12col: 744px;
    --width-12col-plus: 768px;
    --width-13col: 808px;
    --width-13col-plus: 832px;
    --width-14col: 872px;
    --width-14col-plus: 896px;
    --width-15col: 936px;
    --width-15col-plus: 960px;
    --width-16col: 1000px;
    --width-16col-plus: 1024px;
    --width-17col: 1064px;
    --width-17col-plus: 1088px;
    --width-18col: 1128px;
    --width-18col-plus: 1152px;
    --width-19col: 1192px;

    /* ▪️ Central page headers */
    --navigation-main-height: 106px;
    --navigation-main-height-home: 106px;
    --navigation-aspect-height: 102px;
    
    --breadcrumb-sticky-height-offset: calc(20px + env(safe-area-inset-top, 0px)); /* offset temporary browser chrome on iOS */
    
    --content-headline-height: 100px;
    
    /* ▪️ Central content containers */
    --sidebar-width: var(--width-4col-plus);
    
    --content-width: var(--width-10col-plus);
    --content-width-extended: calc(var(--site-width) - var(--sidebar-width) - var(--width-1col));
    
    /* ▪️ Flyouts */
    --flyout-width-standard: var(--width-6col);
    --flyout-width-small: var(--width-5col);
    --flyout-width-large: var(--width-9col);
}


/* !--- Smaller viewports */
@media only screen and (max-width: 736px) {
    .tt-eins {
        /* Enable measuring <body> width without scrollbar space consumption , using cqi units */
        container-type: inline-size;
    }
    
    :root {
        /* 📦 --- PAGE LAYOUT */
        /* ▪️ Default widths */
        --site-width: 100cqi;
        
        /* ▪️ Central page headers */
        --breadcrumb-sticky-height-offset: 150px; /* Offset sticky breadcrumb nav, 120px covers 2 lines of breadcrumb path */

        /* ▪️ Central content containers */
        --sidebar-width: 0;
        
        --content-width: 100cqi;
        --content-width-extended: 100cqi;
    }
}


/* !-------------------------------------------- */
/* !Fonts */
/* !-------------------------------------------- */
/* Obtained from www.fontsquirrel.com */
/* The D-DIN font family is a SIL Open Font License v1.10, see https://www.fontsquirrel.com/fonts/d-din */
/* The Andada font family is a SIL Open Font License v1.10, see https://www.fontsquirrel.com/fonts/andada */
/* !-------------------------------------------- */

/* --- DIN */
@font-face {
    font-family: "DIN";
    src: url("./fonts/d-dinexp-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "DIN";
    src: url("./fonts/d-dinexp-bold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}


/* --- Andada */
@font-face {
    font-family: "Andada";
    src: url("./fonts/andada-regular-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Andada";
    src: url("./fonts/andada-italic-webfont.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Andada";
    src: url("./fonts/andada-bold-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Andada";
    src: url("./fonts/andada-bolditalic-webfont.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
}


/* !-------------------------------------------- */
/* !Reset-styles */
/* !-------------------------------------------- */

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

html {
    min-height: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion) {
    html {
        scroll-behavior: auto;
    }
}

body, h1, h2, h3, h4, h5, h6, p {
    font-weight: 400;
    margin: 0;
    padding: 0;
}

main {
    display: block; /* bugfix for IE11 and older (their default is display: inline) */
}

ul, ol, li, dl, dt, dd {
    list-style: none;
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: none;
	display: block;
    min-width: 0; /* overrides browser default to make it as wide as its widest children */
}

legend {
    color: inherit;
	padding: 0;
	margin: 0;
}

figure {
	margin: 0;
}

em {
	font-style: normal;
    font-weight: bolder;
}

mark {
	background: transparent;
	color: inherit;
}


/* --- Initialization of focus heuristics */
*:focus:not(:focus-visible) {
    outline: none;
}