:root {
    /* -- Achtung diese Variable als RGB, ohne rgb, damit die Alphatransparenz überschrieben werden kann. -- */    
    --color_weiss: 255, 255, 255;   
    --color_f1f1f1: #F1F1F1;
    --color_333: #333333;
    --color_666: #666666;
    --color_000: #000000;
    --color_dedede: #DEDEDE;
    --color_ccc: #CCCCCC;
    --color_aaa: #AAAAAA;
    /* -- Achtung diese Variable als RGB, ohne rgb, damit die Alphatransparenz überschrieben werden kann. -- */
    --color_base_color: 34, 34, 34;
    --color_base_hightlight_1: #E42C2A;

    --color_base_alpha1: 1;
    --color_base_alpha085: 0.85;
    --color_base_alpha070: 0.70;
    --color_base_alpha050: 0.50;
    --color_base_alpha030: 0.30;

    --hl_fontweigt_300: 300;
    --hl_fontweigt_400: 400;
    --hl_fontweigt_700: 700;

    --hl_fontfamily_1: 'Roboto Condensed';
    --hl_fontfamily_2: 'Roboto';
    --hl_fontfamily_3: 'Northwell Alt';

    --font-size_14: 14px; /* min: 12px -> 320px, max. 14px -> 1200px */
    --font-size_18:  clamp(1rem, 0.9545rem + 0.2273vw, 1.125rem); /* min: 16px -> 320px, max. 18px -> 1200px */
    --font-size_20: clamp(1.125rem, 1.0795rem + 0.2273vw, 1.25rem); /* min: 18px -> 320px, max. 20px -> 1200px */
    --font-size_22: clamp(1.25rem, 1.2045rem + 0.2273vw, 1.375rem);; /* min: 20px -> 320px, max. 22px -> 1200px */
    --font_lineheigt: 1.4;

    --text-shadow_000-06: 0px 0px 12px rgba(0,0,0,0.60);
    --transitiontrans03: transform 0.3s ease;
    --transitionall03: all 0.3s ease;
    
    --padding20: 5px clamp(10px, calc(6.364px + 1.136vw), 20px);
    --padding10: 10px;
    --padding1020: clamp(10px, calc(6.364px + 1.136vw), 20px);
    --paddingl20: clamp(15px, calc(13.182px + 0.568vw), 20px);
    --paddingl25: clamp(20px, calc(18.182px + 0.568vw), 25px);
    --paddingl30: clamp(25px, calc(23.182px + 0.568vw), 30px);
    --paddingl40: clamp(20px, calc(12.727px + 2.273vw), 40px);
    --paddingl50: clamp(25px, calc(15.909px + 2.841vw), 50px);
    --boxshadow01: rgba(0, 0, 0, 0.1) 1px 2px 4px;

    --width20: clamp(15px, calc(13.182px + 0.568vw), 20px);

    --absolute_width: 2500px;
    --content-width: 90%;
    --max-width: 1200px;
    --max-with90: 90%;

    --blur10: blur(10px);

    --link_text_offfset: 4px;

    --basic_fehlertext: 'Fehler! Bitte die Einstellungen für diesen Rahmen/Layout mit dem Rahmenverzeichnis überprüfen. Nur wenn die Einstellungen korrekt sind, wird der Rahmen/Layout richtig angezeigt.'
}

html {
    width: 100%;
    float: left;
    clear: both; 
    margin: 0; 
    padding: 0; 
    scroll-behavior: smooth;
}

body {
    width: 100%;
    float: left;
    clear: both; 
    margin: 0; 
    padding: 0; 
    font-size: var(--font-size_20);
    line-height: var(--font_lineheigt);
    font-family: var(--hl_fontfamily_2);
    font-weight: var(--hl_fontweigt_300);
    color: rgb(var(--color_base_color));
    scroll-behavior: smooth;
}

.aussenrahmen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    float: none;
    clear: both;
    max-width: var(--absolute_width);
    margin: 0 auto;
}

#inhaltsbereich {
    flex-grow: 1;    
    width: 100%;
    float: left;
    clear: both;    
}

img {
    max-width: 100%;
    height: auto;
}


p {
    margin: 0 0 10px 0;
}

b, strong {
    font-weight: var(--hl_fontweigt_700);
}

ul {
    list-style-type: square;
    padding-inline-start: var(--paddingl40);
}

ul:not([class]) li::marker {
    color: var(--color_base_hightlight_1);
}

ol {
    padding-inline-start: var(--paddingl40);
}

/* -- Links -- */
a:not([class]),
a.ankerlink,
a.data-fancybox.inline  {
    color: rgb(var(--color_base_color));
    text-decoration: underline;
    text-underline-offset: var(--link_text_offfset);
    position: relative;
}

a:not([class]):hover,
a.ankerlink:hover,
a.data-fancybox.inline:hover {
    color: rgb(var(--color_base_color));
    text-decoration: transparent;
}

a:not([class])::before,
a.ankerlink::before,
a.data-fancybox.inline::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(var(--color_base_color));
    transform: scaleX(0);
    transition: var(--transitiontrans03);   
}

a:not([class]):hover::before,
a.ankerlink:hover::before,
a.data-fancybox.inline:hover::before {
  transform: scaleX(1);
  background-color: var(--color_base_hightlight_1);
}


a.link-mail,
a.link-phone,
a.link-fax,
a.link-legal {
    position: relative;
    padding-left: var(--paddingl25); 
    color: rgb(var(--color_base_color));
    text-decoration: none;
}

a.link-mail::before,
a.link-phone::before,
a.link-fax::before,
a.link-legal::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    color: rgb(var(--color_base_color));
    font-weight: var(--hl_fontweigt_700);
    background-color: rgb(var(--color_base_color));
    mask-image: url(../images/mail.svg);
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    transform: translateY(-50%);
    width: var(--width20);
    height: var(--width20);
}

a.link-phone::before {
    mask-image: url(../images/phone.svg);
    mask-size: 100% auto;
}

a.link-fax::before {
    mask-image: url(../images/fax.svg);
    mask-size: 100% auto;
}

a.link-legal::before {
    mask-image: url(../images/privacy.svg);
    mask-size: 100% auto;
}

a.link-mail:hover::before,
a.link-phone:hover::before,
a.link-fax:hover::before,
a.link-legal:hover::before {
    background-color: var(--color_base_hightlight_1);    
}

a.link-mail::after,
a.link-phone::after,
a.link-fax::after,
a.link-legal::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: rgb(var(--color_base_color));
    transform: scaleX(0);
    transition: var(--transitiontrans03);   
}

a.link-mail:hover::after,
a.link-phone:hover::after,
a.link-fax:hover::after,
a.link-legal:hover::after {
  transform: scaleX(1);
  background-color: var(--color_base_hightlight_1);
}

a.link-mail.more::after,
a.link-phone.more::after,
a.link-fax.more::after,
a.link-legal.more::after,

a.link-mail.link-kontur::after,
a.link-phone.link-kontur::after,
a.link-fax.link-kontur::after,
a.link-legal.link-kontur::after,
a.link-mail.link-kontur::before,
a.link-phone.link-kontur::before,
a.link-fax.link-kontur::before,
a.link-legal.link-kontur::before,
a.link-pfeil.link-kontur::before,
a.link-kontur.data-fancybox.inline::before,
a.link-kontur.ankerlink::before  {
    display: none;
}

a.link-pfeil {
    color: var(--color_base_hightlight_1);
    text-decoration: none;
    font-weight: var(--hl_fontweigt_700);
    font-size: var(--font-size_18);
    position: relative;
    padding-left: var(--paddingl25); 
    transition: var(--transitionall03);
}

a.link-pfeil::before {
    content: '\2794';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color_base_hightlight_1);
    font-weight: var(--hl_fontweigt_700);
}

a.link-pfeil:hover {
    padding-left: var(--paddingl30); 
}

a.more,
a.data-fancybox.inline.more {
    display: inline-block;
    vertical-align: top;
    background: var(--color_base_hightlight_1);
    color: rgb(var(--color_weiss));
    text-decoration: none;
    border: 1px solid var(--color_base_hightlight_1);
    text-align: center;
    padding: var(--padding20);
    box-shadow: var(--boxshadow01);
    transition: var(--transitionall03);
    font-weight: var(--hl_fontweigt_700);
    font-size: var(--font-size_18);
}

a.more::before,
a.data-fancybox.inline.more::before {
    display: none;
}

a.more:hover,
a.data-fancybox.inline.more:hover {
    background: initial;
    background-position: 0 0;
    color: var(--color_base_hightlight_1);
}

a.link-pfeil.more:hover {
    padding: var(--padding20);
}

a.link-kontur {
    display: inline-block;
    vertical-align: top;
    color: rgb(var(--color_base_color));
    text-decoration: none;
    border: 2px solid rgb(var(--color_base_color));
    text-align: center;
    padding: var(--padding20);
    box-shadow: var(--boxshadow01);
    transition: var(--transitionall03);
    font-weight: var(--hl_fontweigt_700);
    font-size: var(--font-size_18);    
}

a.link-kontur:hover {
    border-color: var(--color_base_hightlight_1);
}

a.link-kontur.more {
    background: none;
}

a.link-pfeil.link-kontur:hover {
    padding: var(--padding20);  
}

table {
    
}

.frame {
    width: 100%;
    float: left;
    clear: both;
}

.frame > .rahmen {
    width: var(--content-width);
    max-width: var(--max-width);
    margin: 0 auto;
}