:root {
    --AppWidth: 90%;
    --ColBlack: #000;
    --ColBlackTrans1: rgba(0,0,0,0.67);
    --ColWhite: #fff;
    --ColWhiteTrans1: rgba(255,255,255,0.75);
    --ColGrayTrans1: rgba(128,128,128,0.5);
    --ColAkzent1: #999999;
    --ColAkzent2: #53565a;
    --ColAkzent3: #55c5d9;
    --ColDezent1: #53565a;
    --ColDezent2: #87888b;
    --ColDezent3: #aaa;
    --ColLite1: #f8f9fa;
    --ColLite2: #ecedee;
    --ColLite3: #c8c9c7;
    --ColLiteAkzent1: #cccccc;
    --ColSuccess: #25b636;
    --ColSuccessDk: #006600; /*z.B. Text, Rahmen*/
    --ColSuccessLt: #ccffdd; /*z.B. Hintergrund*/
    --ColErr: #cc3344; /*nur Text*/
    --ColErrDk: #993333; /*z.B. Text, Rahmen*/
    --ColErrLt: #fccccc; /*z.B. Hintergrund*/
    --ColWarnDk: #cc6600; /*z.B. Text, Rahmen*/
    --ColWarnLt: #ffeecc; /*z.B. Hintergrund*/
    --ColHintDk: #006fcf; /*z.B. Text, Rahmen*/
    --ColHintLt: #e3e9ec; /*z.B. Hintergrund*/
    --BordRadiusS: 0.2em;
    --BordRadiusFixS: 0.2rem;
    --BordRadiusM: 0.3em;
    --BordRadiusL: 0.5em;
    --BordRadiusChip: 3rem;
    --BordCircle: 50%;
    --FieldShadowM: 0.1rem 0.1rem 0.4rem 0rem rgba(0,0,0,0.2);
    --FieldShadowL: 0.15rem 0.15rem 0.6rem 0rem rgba(0,0,0,0.25);
    --FieldShadowXXL: 0.25rem 0.25rem 1rem 0rem rgba(0,0,0,0.66);
    --BackBlurLite: blur(4px);
    --BackBlurMedium: blur(8px);
    --BackBlurStrong: blur(16px);
    --TransMid: all 0.33s;
    --LineHeightM: 1.5em;
    font-size: 1rem;
}
/* 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
*/
/* Mobile first! ab 320px Width (von klein nach gross!) */
* {box-sizing:border-box}
body {margin:0;padding:0; font-family:'Helvetica Neue', Roboto, Arial, Helvetica, sans-serif; font-size:1rem; }

input, select, textarea, button {outline:0;outline-offset:0;font-family:'Helvetica Neue', Roboto, Arial, Helvetica, sans-serif; font-size:1rem;}
p {line-height:var(--LineHeightM);margin:0.75em 0;}
a {color:var(--ColAkzent1); text-decoration:none;cursor:pointer;outline:0;outline-offset:0}
a:hover, a:focus {text-decoration:underline}

a.LiteLink {color:var(--ColWhite); text-decoration:underline;transition:var(--TransMid)}
a.LiteLink:hover, a.LiteLink:focus{color:var(--ColLite2)}

#app{height:100vh;min-height:10rem;}

.Start{height:100vh;display:flex;flex-flow:column nowrap;background-image:url(img_bg_phone.jpg);background-size:cover;background-position:right -4rem;max-width:64rem;margin:0 auto;overflow:auto}
.StartHead{text-align:center;padding:1.25rem 0;background-color:rgba(255,255,255,0.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.StartContent {flex:1 1 auto;display:flex;flex-flow:column nowrap;align-items:center;justify-content:space-between;margin:0 auto;padding:10rem 1rem 0 1rem;max-width:24rem;color:var(--ColWhite);}

ul.StartFeatures{padding:0;list-style:none;}
ul.StartFeatures > li {margin:0.5rem 0;text-shadow:0 0 2px var(--ColAkzent3) }
ul.StartFeatures > li::before {display:inline-block;content:"✓";width:1.33rem;height:1.33rem;font-size:0.9rem;font-weight:bold;line-height:1.4rem;text-align:center;margin-right:0.5rem;color:var(--ColAkzent3) !important;
    background-color:var(--ColWhite);border-radius:var(--BordCircle);text-shadow:none}

.StartText{text-align:center;text-shadow:0 0 2px var(--ColAkzent3) }
.StartSlider{text-align:center;padding:1rem 0.25rem;margin-top:2rem;background-color:rgba(255,255,255,0.25);border-radius:var(--BordRadiusM);overflow:hidden;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.SliderContent{position:relative;height:4.25rem;text-shadow:0 0 2px var(--ColAkzent3) }
.SliderContent p.SliderText {position:absolute;top:0;left:0;width:100%}
.SliderFooter{text-align:center;padding:1rem 0 0 0}
.SliderFooter > a {display:inline-block;width:1rem;height:1rem;margin:0 0.5rem;padding:0.25rem;border:1px solid var(--ColWhite);border-radius:var(--BordCircle);transition:var(--TransMid)}
.SliderFooter > a.SliderActive{background-color:var(--ColWhite);pointer-events:none}
.SliderFooter > a:hover{background-color:rgba(255,255,255,0.5)}

.slider-enter-active, .slider-leave-active {transition: opacity .75s, transform .75s;}
.slider-enter {opacity: 0;transform: scale(0.75);filter:blur(2px)}
.slider-leave-to{opacity: 0;transform: scale(1.5);filter:blur(2px)}

.StartButton {margin:2rem auto;width:100%}
.StartButton > a {display:block;}

.Danke{height:100vh;margin:0 auto;position:relative;background-color:var(--ColAkzent1);background-size:cover;background-position:center center;
    background-repeat:no-repeat;}
.DankeVideoBg {display:flex;align-items: center;justify-content: center;height:100%;width:100%;overflow:hidden;}
.Danke > .DankeVideoBg > video {height:100%;width:100%;object-fit:cover}
.DankeWrapper{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:auto}
.DankeWrapper > .DankeContent{display:flex;flex-flow:column nowrap;align-items:center;justify-content:space-between;color:var(--ColWhite);
    text-align:center;margin:0 auto;padding:0 1rem;max-width:100%;height:100vh;}
.DankeContent h1 {margin:0;padding:1rem 0;}
.DankeCard > img {width:200px;}

.ButtonDanke{color:var(--ColAkzent2);background-color:var(--ColWhite);}
.ButtonDanke:hover{color:var(--ColWhite);background-color:var(--ColAkzent2);text-decoration:none}

.Antrag {height:100vh;display:flex;flex-flow:column nowrap;}
.Antrag > div.AntragContent{flex:1 1 auto;display:flex;flex-flow:column nowrap;position:relative;}

.FullDialog{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ColAkzent3);padding:1rem;text-align:center;color:var(--ColWhite);z-index:20}
.FullDialog h1{font-size:1.5rem;margin:0.5rem 0}
.FullDialog > .DialogHead {display:flex;flex-flow:row nowrap;}
.FullDialog > .DialogHead > h1{flex:1 1 auto;margin: 0}
.FullDialog > .DialogHead > a {filter:saturate(0) brightness(100)}
.FullDialog > .DialogHead > a:hover {filter:none}

.AntragSideHeader {position:relative;background-color:var(--ColDezent3);
    background-image:url(img_head_phone.jpg);background-size:cover;background-position:right top;background-repeat:no-repeat;}

.StatusInfo {flex:1;display:flex;flex-flow:row nowrap;align-items:center;color:var(--ColWhite);min-height:70px;}
.StatusInfo > span {flex:1 1 auto;font-size:0.75rem;}
.StatusInfo > svg {width:55px;height:55px;margin:0 0.3rem 0 1rem} 

.AntragLogo {margin:1rem;width:70px;height:70px;display:none;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: pixelated;}

.AntragForms{flex:1;display:flex;justify-content:center;padding:0.5rem 1rem 2rem 1rem}
.AntragForms > div{position:relative;width:100%;max-width:25rem;}
.AntragForms > div.AntragLarge {max-width:50rem;}
/*display:flex;flex-flow:row nowrap;overflow-x:scroll;scroll-snap-type: x proximity;scroll-behavior:smooth;outline:1px none green*/
.AntragForms > div > div.AntragStep {min-width:100%;scroll-snap-align: start;}

.AntragForms h1 {color:var(--ColAkzent1);font-size:1.5rem;text-align:center}
.AntragForms h2 {color:var(--ColAkzent2);font-size:1rem;font-weight:normal;margin:0.5rem 0;text-align:center}
.AntragForms h3 {color:var(--ColAkzent2);font-size:1rem;margin:0.5rem 0;}
.AntragForms h4 {color:var(--ColAkzent2);font-size:0.75rem;margin:0.5rem 0 0.25rem 0;}

.AntragFooter{background-color:var(--ColAkzent1);color:var(--ColWhite);text-align:center;padding:0 1rem;font-size:0.9rem;margin-bottom:3.1rem ;display:flex;justify-content:center;}
.AntragFooter .AntragFooterLogoLt{margin:2rem 0 1rem 0}
.AntragFooter .AntragFooterLogoDk{margin:2.5rem 0 1rem 0;display:none}
.AntragFooter .AntragFooterLinks {border-top:1px solid var(--ColWhite);border-bottom:1px solid var(--ColWhite);padding:1rem 0;
    display:flex; flex-flow:row nowrap;justify-content:space-between;align-items:center}
.AntragFooter .AntragFooterLinks a{color:var(--ColWhite);font-weight:bold;font-size:0.9rem;padding:0 0.25rem;text-align:center}
.AntragFooter .AntragFooterLinks a:first-child{padding-left:0}
.AntragFooter .AntragFooterLinks a:last-child{padding-right:0}
.AntragFooter .AntragFooterCopy {margin:1.5rem 0}
.AntragFooter .AntragFooterCopy a {color:var(--ColAkzent2)}

.Freunde {height:100vh;position: relative;display:flex;flex-flow: column nowrap;}
.Freunde > .FreundeHead {text-align: center;background-color: var(--ColWhite);padding:1.25rem}
.Freunde > .FreundeBg {flex: 1 1 auto;background-image: url(img_bmw_carbon_thank_you_desktop.jpg); background-size:cover;background-position:center center;
    background-repeat:no-repeat;}
.Freunde > .FreundeBg > .FreundeBox {position:absolute; bottom: 0;width:100%;color:var(--ColWhite);background-color:var(--ColBlackTrans1); padding:1.5rem;
    -webkit-backdrop-filter: blur(2px);backdrop-filter: blur(2px);}
.Freunde > .FreundeBg > .FreundeBox h1 {font-weight: normal; margin:0.5rem 0}
.Freunde > .FreundeBg > .FreundeBox p {font-size:1rem}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons {display:flex;flex-flow: column nowrap;margin-top:1rem}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons > div {position:relative}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons a.Link {color:var(--ColWhite);font-weight: bold;text-decoration: underline;}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons a.Button {display:inline-block;color:var(--ColWhite);text-align:center;font-weight:bold;margin:1.25rem 1.5rem 0.5rem 0;
    background-color:var(--ColAkzent1);padding:0.9rem 1.25rem; border:0;cursor:pointer;white-space:nowrap; border-radius:var(--BordRadiusFixS);transition:var(--TransMid)}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons a.Button:hover{background-color:var(--ColAkzent2)}
.Freunde > .FreundeBg > .FreundeBox .FreundeButtons a.Button > img {height:0.9rem;}

.Freunde .FreundeInfo {position:absolute;bottom:2rem;min-width: 17rem;padding:1rem;margin:0 1rem;background-color:var(--ColWhite);border-radius: var(--BordRadiusL);
    box-shadow: var(--FieldShadowXXL);}
.Freunde .FreundeInfo > .InfoClose {position:absolute;top:-0.3rem;right:-0.3rem;width: 1.7rem; height: 1.7rem ;background-color: var(--ColAkzent1);
    text-align: center;text-decoration: none ;border-radius: var(--BordCircle);transition:var(--TransMid);font-size: 0}
.Freunde .FreundeInfo > .InfoClose:hover {background-color:var(--ColAkzent2)}
.Freunde .FreundeInfo > .InfoClose > img {width:1rem;height:1rem;margin:0.35rem 0.1rem}
.Freunde .FreundeInfo > .InfoArrow {position:absolute;bottom:-0.5rem;left:2rem;width: 1rem; height: 1rem; background-color: var(--ColWhite); transform:rotateZ(45deg) }
.Freunde .FreundeInfo > .InfoContent {color:var(--ColBlack);font-size: 0.8rem;}
.Freunde .FreundeInfo > .InfoContent > .InfoItem {display:flex;flex-flow: row nowrap;align-items: center;}
.Freunde .FreundeInfo > .InfoContent > .InfoItem > div:last-child {max-width: 10rem;line-height:1.3rem}
.Freunde .FreundeInfo > .InfoContent > .InfoItem .InfoIcon {position:relative;margin:1rem;background-color:var(--ColLite1);border-radius: var(--BordCircle);}
.Freunde .FreundeInfo > .InfoContent > .InfoItem .InfoIcon > img {width:2rem;height: 2rem;margin:1rem}
.Freunde .FreundeInfo > .InfoContent > .InfoItem .InfoIcon > div {position:absolute;top:-0.15rem; left:-0.15rem;width: 1.5rem;height:1.5rem;padding:0.3rem;
    text-align: center;font-size: 0.7rem;font-weight: bold;background-color: var(--ColLite2);border-radius: var(--BordCircle);}

.ErrorPage {padding:2rem;display:flex;flex-flow:column-reverse nowrap}
.ErrorPage > div {flex: 1 1 auto;}
.ErrorPage > div:last-child {min-width:250px}
.ErrorPage h1 {color:var(--ColAkzent2)}
.ErrorLogo {margin:-0.5rem -0.8rem;height:100px;max-height:250px}

.ErrorText {font-size:0.7rem;color:var(--ColErr);margin:0.25rem 0;}

.SummItem, .BlockItem {padding:1rem 0;border-bottom:1px solid var(--ColLite2)}
.SummItem:first-child, .BlockItem:first-child {padding:0 0 1rem 0}
.SummItem span {font-size:0.75rem;display:inline-block;background-color:var(--ColLite1);padding:0.125rem 0.25rem;margin:0 0.25rem 0.125rem 0}
.SummItem a {font-size:0.9rem}

.FormContainer {margin-top:2rem;padding-bottom:1rem}

.InputField {position:relative;margin-top:0.75rem;padding:0.25rem 0;background-color:var(--ColLite1);border:1px solid var(--ColLite1);border-radius:var(--BordRadiusS);transition:var(--TransMid)}
.InputField label, .InputLabel {display:block;font-size:0.7rem;color:var(--ColAkzent2);margin:0 0.75rem}
.InputField div.ErrorText {font-size:0.7rem;color:var(--ColErr);margin:0 0.75rem;min-height:0.85rem}
.InputField input, .InputField select {width:100%;padding:0.25rem 2.25rem 0.25rem 0.75rem;color:var(--ColAkzent2);font-size:1rem;font-weight:bold;background-color:transparent;border:0;}
.RemoveRightPadding input {padding-right:0.75rem}
.InputField select {padding:0.25rem 4.75rem 0.25rem 0.75rem;-moz-appearance: none; -webkit-appearance: none; appearance: none;}

.InputSelect {background:url(down.svg) no-repeat calc(100% - 0.8rem) center ,
                  linear-gradient(to left, var(--ColLite2) 2.55rem, var(--ColLite1) 2.55rem)  no-repeat}

.InputField datalist option{appearance: none; -webkit-appearance: none; font-family:'Helvetica Neue', Roboto, Arial, Helvetica, sans-serif;  font-size:1rem;font-weight:bold;cursor:pointer}
.InputField:hover{border-color:var(--ColLite3)}
.InputField:focus-within {border:1px solid var(--ColAkzent1)}
.InputField.Disabled {pointer-events:none}
.InputField.Disabled input, .InputField.Disabled select, .InputField.Disabled label {color:var(--ColDezent2)}
/*
.FieldValid::after, .FieldInvalid::after {position:absolute;right:0.5rem;top:1.35rem;width:1.4rem;height:1.4rem;font-size:0.9rem;line-height:1.4rem;text-align:center;color:var(--ColWhite);border-radius:var(--BordCircle)}
.InputSelect.FieldValid::after, .InputSelect.FieldInvalid::after {right:2.25rem;}
.FieldValid::after {content:"✓";background-color:var(--ColSuccess);font-weight:bold}
.FieldInvalid::after {content:"✗";background-color:var(--ColErr);font-weight:bold;}
*/
.FieldInvalid {border-color:var(--ColErr)}
.FieldValid::after, .FieldInvalid::after {position:absolute;right:0.65rem;top:1.3rem;width:20px;height:20px;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: pixelated;}
.InputSelect.FieldValid::after, .InputSelect.FieldInvalid::after {right:3.25rem;}
.FieldValid::after {content:url(success.svg);}
.FieldInvalid::after {content:url(error.svg);}

.InputTip {display:flex;flex-flow:column nowrap;align-items:center;position:absolute;bottom:95%;left:0;width:100%;}
.InputTipMessage{background-color:var(--ColAkzent1);color:var(--ColWhite);font-size:0.7rem;text-align:center;max-width:90%;padding:0.5rem 1rem;
    border-radius:var(--BordRadiusM);z-index:1}
.InputTipArrow{width:1rem;height:1rem;background-color:var(--ColAkzent1);transform: translateY(-0.5rem) rotate(45deg)}

@keyframes Quirrl { 
  from {transform: rotate(0)} 
  to {transform: rotate(360deg)} 
}

.InputLoader {position:absolute;right:0.3rem;top:1.0rem;width:1.9rem;height:1.9rem;
    border-top:3px solid var(--ColDezent2);border-left:3px solid var(--ColDezent2);border-bottom:3px solid var(--ColLite3);border-right:3px solid var(--ColLite3);border-radius:50%;
    animation: Quirrl 2s infinite linear;
}

.CheckBox {cursor:pointer;display:flex;flex-flow:row nowrap;align-items:baseline;}
.CheckBox > span {font-size:0.7rem;line-height:1.4em;color:var(--ColAkzent2);position:relative;padding-top:0.25rem;display:inline-block;}
.CheckBox > input{flex:0 0 1.6rem;opacity:0}
.CheckBox > input ~ span::before {position:absolute;top:0;left:0;width:1.33rem;height:1.33rem;content:" ";font-size:1rem;font-weight:bold;line-height:1.33rem;text-align:center;margin:0 0.5rem 0 -2rem;
    background-color:var(--ColLite1);color:var(--ColLite1);border:2px solid var(--ColLite3);border-radius:var(--BordRadiusM);transition:var(--TransMid)}
.CheckBox > input[type=radio] ~ span::before {border-radius:var(--BordCircle)}
.CheckBox > input:checked ~ span::before{content:"✓";color:var(--ColWhite);background-color:var(--ColAkzent2);}
.CheckBox > input:hover ~ span::before{border-color:var(--ColDezent3)}

.CheckBox > input[disabled], .CheckBox > input:disabled{pointer-events:none;cursor:auto}
.CheckBox > input[disabled] ~ span {color:var(--ColDezent1);cursor:auto}
.CheckBox > input[disabled] ~ span::before{opacity:0.33;filter:saturate(0.25);cursor:auto}

.Switch {position:relative;width:3.5rem;height:1.75rem}
.Switch > input {position:absolute;top:-0.5rem;opacity:0}
.Switch > input ~ div {position:relative;display:inline-block;width:3.5rem;height:1.75rem;border:1px solid var(--ColAkzent2);
               cursor:pointer;border-radius:var(--BordRadiusChip);z-index:1;overflow:hidden;background-color:var(--ColWhite);transition:var(--TransMid)}
.Switch > input ~ div .Knob {width:1.4rem;height:1.4rem;margin:0.095rem 0;vertical-align:middle;background-color:var(--ColAkzent2);border-radius:var(--BordCircle);transition:var(--TransMid)}
.Switch > input ~ div > div {position:relative;white-space:nowrap;transform:translate(-1.6rem);transition:var(--TransMid)}
.Switch > div > div > span {display:inline-block;font-size:0.6rem;color:var(--ColAkzent2);transition:var(--TransMid)}
.Switch > div > div > span:first-child, .Switch > div > div > span:last-child {width:1.7rem;text-align:center;}

.Switch > input:checked ~ div {background-color:var(--ColAkzent2)}
.Switch > input:checked ~ div .Knob {background-color:var(--ColWhite);}
.Switch > input:checked ~ div > div > span {color:var(--ColWhite)}
.Switch > input:checked ~ div > div {position:relative;white-space:nowrap;transform:translate(0.15rem)}

.Switch > input ~ div:hover .Knob{background-color:var(--ColAkzent1)}

.MobileButtons {display:flex;flex-flow:row nowrap;align-items:center;position:fixed;bottom:0;width:100%;z-index:10;
    background-color:var(--ColWhite);padding:0.25rem 0.5rem 0.25rem 0.5rem;border-top:1px solid var(--ColAkzent1);transition:var(--TransMid)}
.MobileButtons > a {padding:0.5rem 0.5rem 0.25rem 0.5rem;border-radius:var(--BordCircle);min-width:2.5rem;min-height:2.5rem;margin:0 0.5rem;}
.MobileButtons > a:first-child{margin-left:0;padding-top:0.6rem;}
.MobileButtons > a:first-child > img {vertical-align:text-bottom;padding-right:0.4rem}
.MobileButtons > a:last-child{margin-right:0}
.MobileButtons > a:hover, .MobileButtons > a:active{filter:brightness(0.5)}
.MobileButtons > a:disabled, .MobileButtons > a[disabled=true] {pointer-events:none;opacity:0.25}

@keyframes bgfade {
  from {background-position: -900%}
    to {background-position: 1000%}
}

.ButtonDk, .ButtonLt, .ButtonDanke {display:inline-block;font-size:0.95rem;text-align:center;font-weight:bold;margin:1rem 0.25rem;padding:0.9rem 1.25rem;width:100%;
    border:0;cursor:pointer;white-space:nowrap;background-repeat:no-repeat;background-size:90%;background-position: -900%;
    border-radius:var(--BordRadiusChip);transition:var(--TransMid);will-change:contents;}

.ButtonDk{color:var(--ColWhite);background-color:var(--ColAkzent2) ;}
.ButtonLt{color:var(--ColAkzent2);background-color:var(--ColWhite);}
.ButtonDk:hover, .ButtonLt:hover{color:var(--ColWhite);background-color:var(--ColAkzent1);text-decoration:none}
.ButtonDk:disabled, .ButtonDk[disabled] {background-color:var(--ColDezent1);pointer-events:none;opacity:0.25}
.ButtonLt:disabled, .ButtonLt[disabled] {pointer-events:none;opacity:0.25}

.ButtonDk:active, .ButtonDk:focus, .ButtonLt:active, .ButtonLt:focus {background-image:linear-gradient(to right, transparent, rgba(255,255,255,0.33) 75%, transparent ); animation: bgfade 0.25s linear;}
.ButtonBar{margin:2.5rem -0.25rem 0.5rem -0.25rem}
.NextButton{flex:1 1 60%}
.PrevButton{flex:1 1 10%;font-size:0.9rem;}

.PrevButton > img {margin-right:0.5rem;vertical-align:-0.25rem}
.PrevButton:hover > img {filter: saturate(0) brightness(100)}

.ErrorInfo {font-size:0.7rem;color:var(--ColErr);margin-top:1rem;min-height:1rem;}

.BorderBox{padding:0.5rem 1rem 1.5rem 1rem;border:1px solid var(--ColAkzent1);border-radius:var(--BordRadiusM)}

.BulletList{padding-left:0.75rem}
.BulletList > li {margin:0.33rem 0}

.IcoList {margin:1.25rem 0}
.IcoList > p {display:flex; flex-flow:row nowrap}
.IcoList > p > span:first-child {padding:0 0.5rem 0 0;line-height:normal}
.IcoList > p > span:last-child {line-height:var(--LineHeightM);color:var(--ColAkzent2)}

.FlexRow{display:flex;flex-flow:row nowrap}

.FlexSpaceBetween{justify-content:space-between}

.FlexItemsCenter{align-items:center}

.FlexWidth10{flex:1 1 8%}
.FlexWidth20{flex:1 1 18%}
.FlexWidth25{flex:1 1 23%}
.FlexWidth30{flex:1 1 28%}
.FlexWidth33{flex:1 1 31%}
.FlexWidth40{flex:1 1 38%}
.FlexWidth50, .AutoFlex50 > div {flex:1 1 46%}
.FlexWidth66{flex:1 1 65%}
.FlexWidth70{flex:1 1 68%}
.FlexWidth75{flex:1 1 73%}
.FlexWidth80{flex:1 1 78%}
.FlexWidth90{flex:1 1 88%}

.FlexFill{flex:1 1 auto}

.TextS{font-size:0.7rem}
.TextM{font-size:0.75rem !important}
.TextL{font-size:0.9rem !important}
.TextNeutral{font-size:1rem !important}
.TextXL{font-size:1.1rem !important}
.TextXXL{font-size:1.25rem !important}
.TextXXXL{font-size:1.5rem !important}

.TextCenter {text-align:center}
.ColAkzent2 {color:var(--ColAkzent2)}
.TextShineDk {text-shadow:0 0 2px rgba(0,0,0,0.75)}
.TextDezent{color:var(--ColDezent1)}
.TextAkzent{color:var(--ColAkzent1)}
.AutoHyper {-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
  -moz-hyphenate-lines: 3; -webkit-hyphenate-lines: 3; -ms-hyphenate-lines: 3; hyphenate-lines: 3;}

.PflichtText{color:var(--ColAkzent2)}

.LineHeightNormal, div.LineHeightNormal > p {line-height:normal;}

.HidePhone, .HidePhoneInline {display:none}

.DialogContainer {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(210,215,220,0.75);will-change:contents;
    display: flex;align-items: center;justify-content: center; z-index:99;-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px);}
.DialogContainer > section {max-width:95vw;max-height:97vh;min-height:15rem;min-width:10rem;padding:0; display:flex;flex-flow:column nowrap;
    box-shadow:var(--FieldShadowL);border-radius:var(--BordRadiusFixS);will-change:contents;}    
.DialogContainer > section > div {padding:0.5rem 1rem}
.DialogContainer > section > .DialogHead {position:relative;color:var(--ColAkzent2); padding-right:2rem;background-color:var(--ColLite2);
    border-radius:var(--BordRadiusFixS) var(--BordRadiusFixS) 0 0}
.DialogContainer > section > .DialogHead > .DialogClose {position:absolute;top:-0.3rem;right:-0.3rem;width: 1.7rem; height: 1.7rem ;background-color: var(--ColAkzent1);
    text-align: center;text-decoration: none ;border:none;border-radius: var(--BordCircle);transition:var(--TransMid);cursor:pointer;font-size: 0;}
.DialogContainer > section > .DialogHead > .DialogClose > img {width:1rem;height:1rem;margin:0.3rem 0}
.DialogContainer > section > .DialogHead > .DialogClose:hover {background-color:var(--ColAkzent2)}
.DialogContainer > section > .DialogContent {flex:1 1 auto;overflow-y:auto;background-color:var(--ColWhite);}
.DialogContainer > section > .DialogButtons{background-color:var(--ColWhite);display:flex;flex-flow:row nowrap;justify-content:center;
    border-radius: 0 0 var(--BordRadiusFixS) var(--BordRadiusFixS);}
.DialogContainer > section > .DialogButtons > button {margin:0 0.5em;width:auto}

.dialogfade-enter-active, .dialogfade-leave-active {transition: opacity .2s;}
.dialogfade-enter-from, .dialogfade-leave-to{opacity: 0;}
.dialogpop-enter-active, .dialogpop-leave-active {transition: transform .25s;}
.dialogpop-enter-from, .dialogpop-leave-to{transform: scale(0.01);transition-timing-function:ease-out}

.DarkBox {background-color:rgba(0,0,0,0.33);padding:0.5rem 1rem;border-radius:var(--BordRadiusM);backdrop-filter:blur(2px)}

.InviteHeader{background-color:#006fcf;background-image: url(worldservice-tile.svg);background-size: 33%;color:var(--ColWhite);
    text-align: center;padding: 1rem;font-size: 1rem;box-shadow: var(--FieldShadowM); }
.InviteHeader > p {margin-top:0}
.InviteHeader > img.Slogan{width: 80%;max-width: 25rem;}

.CardView{display: Flex; flex-flow: row wrap;margin:1rem -0.5rem}
.CardView > div {display:flex;flex-flow:column nowrap;margin:0.5rem;padding:0.5rem;min-width: 220px;box-shadow: var(--FieldShadowM);border-radius: var(--BordRadiusM);}
.CardView > div > div:first-child {flex:1 1 auto}
.CardView > div .CardImg {height:70px;float: left;margin:0 0.5rem 1rem 0}
.CardView > div h4 {clear: both;border-bottom:2px solid var(--ColAkzent1); margin:1rem 0}
.CardView > div ul {margin-left:-25px;list-style-type: none;}
.CardView > div ul > li {margin:0.2em 0}
.CardView > div ul > li::before{content:"✓";display: inline-block;margin-left:-14px;margin-right: 5px;}
.CardView > div button {margin: 0.5rem 0;}

.InfoTable {border-collapse: collapse; border-spacing: 0;}
.InfoTable td {padding-right:1rem; vertical-align: top;}
.InfoTable td:last-child {padding-right: 0;}

@keyframes toploader {
    from {background-position: -300%}
    to {background-position: 400%}
}
.TopLoader{position:fixed;top:0;left:0;width:100%;height:0.33rem;background-color:var(--ColLite2);overflow:hidden;z-index:999;will-change:contents}
.TopLoadAnim{height:0.33rem;background-image:linear-gradient(to right, var(--ColLite2), var(--ColAkzent1), var(--ColLite2) ); 
    background-repeat:no-repeat;background-size:75%;animation: toploader 2.5s infinite linear;}

.page-fade-enter-active, .page-fade-leave-active {transition: opacity .2s;}
.page-fade-enter-from, .page-fade-leave-to{opacity: 0;}

.fadezoom-enter-active, .fadezoom-leave-active {transition: all .33s;}
.fadezoom-enter-from, .fadezoom-leave-to{transform: scale(0.1);opacity: 0;transition-timing-function:ease-out}

.PageLoader {position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255, 0.75);transition: all 0.333s;
    -webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px);z-index:99999 }
.PageLoader > div {position:absolute;left:calc(50% - 2.5rem);top:calc(50% - 2.5rem);width:5rem;height:5rem;
    border-top:6px solid var(--ColAkzent1);border-left:6px solid var(--ColAkzent1);border-bottom:6px solid var(--ColLite3);border-right:6px solid var(--ColLite3);border-radius:50%;
    z-index:10;animation: Quirrl 2s infinite linear;opacity:1;transition: opacity 0.333s;}

.BorderTop {border-top:1px solid var(--ColLite2)}

.mTopM {margin-top:1rem}
.mTopL {margin-top:2rem}
.mTopXL {margin-top:3rem}

.mBottomL {margin-bottom:2rem}

.mRightS{margin-right:0.5rem}
.mRightM{margin-right:1rem}
.mRightL{margin-right:2rem}

.mLeftS{margin-left:0.5rem}

.clearMarginHorz{margin-left:0;margin-right:0;}

.pS {padding:0.5rem}
.pRightM {padding-right:1rem}

.InlineBlock {display:inline-block}

#usercentrics-root{position: absolute; top:0; left:0}
body > iframe {display:none}

@media (min-width: 22.5rem) {/*Bigger Phone > 360px*/
    .StatusInfo > span {font-size:0.8rem;}
    .StatusInfo > svg {margin:0 0.6rem 0 1rem}
}


@media (min-width: 37.5rem) {/*Tablet hoch > 600px*/
    .Start{background-image:url(img_bg_tablet.jpg);background-position:right top}
    .StartContent {padding:0rem 1rem 0 1rem}

    .DankeCard > img {width:260px;}

    .Antrag {display:flex;flex-flow:row nowrap;}
    .Antrag > div.AntragContent{flex:1 1 60%;overflow:auto}
    
    .AntragSideHeader {flex:1 1 40%;background-image:url(img_bg_tablet.jpg);background-position:right top;}
 
    .StatusInfo {position:absolute;right:3%;bottom:3%;}
    .StatusInfo > span {font-size:0.9rem;order:1}
    .StatusInfo > svg {width:65px;height:65px;margin:0 0 0 0.5rem;order:2} 

    .AntragLogo {display:block}
    
    .MobileButtons {display:none}
    .StartButton > a {display:inline;}
    .AntragFooter{background-color:var(--ColWhite);color:var(--ColDezent2);margin-bottom:0;text-align:left;font-size:0.75rem;}
    .AntragFooter > div{max-width:25rem;border-top:1px solid var(--ColLite3)}
    .AntragFooter .AntragFooterLogoLt{display:none}
    .AntragFooter .AntragFooterLogoDk{display:block}
    .AntragFooter .AntragFooterLinks {padding:0.5rem 0;}
    .AntragFooter .AntragFooterLinks a{color:var(--ColAkzent2);text-decoration:underline;transition:var(--TransMid)}
    .AntragFooter .AntragFooterLinks a:hover{color:var(--ColAkzent1)}
    .AntragFooter .AntragFooterCopy {margin:1rem 0 1.5rem 0}

    .ErrorPage {display:flex;flex-flow:row nowrap}
    .ErrorLogo {margin:0.25rem 0.5rem 0 0.5rem;height:100%;}

    .HidePhone {display:block}
    .HidePhoneInline {display:inline-block}

    .InviteHeader{font-size: 1.25rem;}
    .InviteHeader > p {margin-bottom: 2rem;margin-top:1rem}
}

@media (min-width: 60rem) { /*Desktop > 960px*/
    .Antrag > div.AntragContent{flex:1 1 50%}
    .AntragSideHeader {flex:1 1 50%;background-image:url(img_bg_desktop.jpg);}

    .DialogWidthLg60 {width:60%}

    .StatusInfo > span {font-size:1rem}
    .StatusInfo > svg {width:80px;height:80px;margin:0 0 0 1rem} 

    .Freunde > .FreundeBg > .FreundeBox {left:7%;width:43rem;padding:3rem}
    .Freunde > .FreundeBg > .FreundeBox h1 {font-size:3rem}
    .Freunde > .FreundeBg > .FreundeBox .FreundeButtons {flex-flow: row-reverse nowrap;align-items: baseline;justify-content: flex-end;}
    .Freunde .FreundeInfo > .InfoContent {display:flex;flex-flow:row nowrap}
    .Freunde .FreundeInfo > .InfoContent > .InfoItem {flex-flow: column nowrap;align-items: center;}
    .Freunde .FreundeInfo > .InfoContent > .InfoItem > div:last-child {width:9rem;margin:0 1.5rem 0.75rem 1.5rem;text-align: center;}

    .DocUploads{display:flex;flex-flow:row nowrap;width:75%;margin:auto}
    .DocUploads > div {flex:1 1 50%;margin: 0 2rem}
    
}

@media (min-width: 93rem) { /*Desktop > 1488px*/
    .InputTip {flex-flow:row nowrap;position:absolute;top:0;left:99%;min-height:100%;width:auto;}
    .InputTipMessage{order:2;padding:0.5rem 0.75rem;width:10rem;}
    .InputTipArrow{order:1;transform: translateX(0.5rem) rotate(45deg)}

   
}
@media (min-width: 128rem) { /*Desktop > 2048px ... 2-4k */
    .AntragSideHeader {background-image:url(img_bg_desktop4k.jpg);}
}