/* reset, ie */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align: baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0} /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
@media (-ms-high-contrast:none),(-ms-high-contrast:active){#dm-browserUpgrade{display:block!important}} /* IE11 understands media queries but not feature queries */
@supports ((not (display:grid)) and (display:flex)){#dm-browserUpgrade{display:block!important}} /* Edge 12-15 */
@supports (not (display:grid)) and (not (display:flex)){#dm-browserUpgrade{display:block!important}} /* paleolithic browsers */

/* common styles */
:root {
  --brandLogoWidth: 400px;
  --brandLogoHeight: 45px;
  --fontSize: 16px;
  --articleTextSize: 1.125rem; /* 1.125rem = 18px */
  --textFont: 'Mulish', sans-serif;
  --headlineFont: 'Noto Serif', serif;
  --mobileMargin: 1rem;
  --negativeMobileMargin: -1rem;
  --articleItemMarginBottom: 2rem;
  --clusterMarginBottom: 2rem;
  --teaserMarginBottom: 2rem;
  --navAniDuration: .3s;
  --burgerBarHeight: 4rem;
  --burgerBarHeightDesktop: calc(var(--burgerBarHeight) * 1.3);
  --readProgressBarHeight: 1px;
  --baseZIndex: 999;

  --teaserHeadlineSizeM: 1.125rem;
  --teaserHeadlineSizeL:  1.5rem;
  /* primary colors*/
  --darkBlue: #024c63;
  --middleBlue: #006994; /* Use --brandColor instead */
  --lightBlue: #20c4f4;
  --secondary: #C7D4DA;
  --darkRed: #B3004F;
  --white: white;
  --black: black;
  --flint: #333333;
  --darkGrey: #808080;
  --grey: #E6E6E6;
  --lightGrey: #B2B2B2;
  --yellow: #FFD700;
  --red: #F13732;
  --green: #21BA59;
  --shadow: 0 3px 3px rgba(135, 135, 135, .2);

  /* derivative colors for specific use cases */
  --brandColor: var(--middleBlue); /* HSL: 197, 100%, 29% */
  --brandColorSoft: #E1EEF3;     /* HSL( 197, 43%, 92%); */
  --rootBGColor: var(--white);
  --contentBGColor: var(--white);
  --articleBGColor: var(--white);
  --mainTextColor: var(--black);
  --linkColor: var(--brandColor);
  --textLinkColor: var(--brandColor);
  --active: var(--brandColor);
  --brightIconColor: var(--white);
  --footerBg: var(--flint);
  --navColor: var(--black);

  /* icons */
  --home: url(/abo/www/meta/common/icons/home.svg);
  --clock: url(/abo/www/meta/common/icons/clock.svg);
  --upvote: url(/abo/www/meta/common/icons/upvote.svg);
  --downvote: url(/abo/www/meta/common/icons/downvote.svg);
  --comment: url(/abo/www/meta/common/icons/comment.svg);
  --heart: url(/abo/www/meta/common/icons/heart.svg);
  --share: url(/abo/www/meta/common/icons/share.svg);
  --shareAndroid: url(/abo/www/meta/common/icons/shareAndroid.svg);
  --shareIos: url(/abo/www/meta/common/icons/shareIos.svg);
  --whatsapp: url(/abo/www/meta/common/icons/whatsapp.svg);
  --horoscope: url(/abo/www/meta/common/icons/horoscope.svg);
  --newspaper: url(/abo/www/meta/common/icons/newspaper.svg);
  --store: url(/abo/www/meta/common/icons/store.svg);
  --weather: url(/abo/www/meta/common/icons/weather.svg);
  --cart: url(/abo/www/meta/common/icons/cart.svg);
  --letterOpen: url(/abo/www/meta/common/icons/letterOpen.svg);
  --instagram: url(/abo/www/meta/common/icons/instagram.svg);
  --facebook: url(/abo/www/meta/common/icons/facebook.svg);
  --tiktok: url(/abo/www/meta/common/icons/tiktok.svg);
  --telegram: url(/abo/www/meta/common/icons/telegram.svg);
  --youtube: url(/abo/www/meta/common/icons/youtube.svg);
  --twitter: url(/abo/www/meta/common/icons/twitter.svg);
  --letter: url(/abo/www/meta/common/icons/letter.svg);
  --coupon: url(/abo/www/meta/common/icons/coupon.svg);
  --arrowNorth: url(/abo/www/meta/common/icons/arrowNorth.svg);
  --arrowRight: url(/abo/www/meta/common/icons/arrowRight.svg);
  --epaper: url(/abo/www/meta/common/icons/epaper.svg);
  --push: url(/abo/www/meta/common/icons/push.svg);
  --estate: url(/abo/www/meta/common/icons/estate.svg);
  --suit: url(/abo/www/meta/common/icons/suit.svg);
  --tagStar: url(/abo/www/meta/common/icons/tagStar.svg);
  --grave: url(/abo/www/meta/common/icons/grave.svg);
  --jeck: url(/abo/www/meta/common/icons/jeck.svg);
  --tagRemove: url(/abo/www/meta/common/icons/tagRemove.svg);
  --cartPhone: url(/abo/www/meta/common/icons/cartPhone.svg);
  --empty: url(/abo/www/meta/common/icons/empty.svg);
  --videoPlay: url(/abo/www/meta/common/icons/videoPlay.svg);
  --user: url(/abo/www/meta/common/icons/user.svg);
  --userFilled: url(/abo/www/meta/common/icons/userFilled.svg);
  --clockAlt: url(/abo/www/meta/common/icons/clockAlt.svg);
  --bookmark: url(/abo/www/meta/common/icons/bookmark.svg);
  --bookmarkActive: url(/abo/www/meta/common/icons/bookmarkActive.svg);
  --headphones: url(/abo/www/meta/common/icons/headphones.svg);
  --search: url(/abo/www/meta/common/icons/magnify.svg);
  --play: url(/abo/www/meta/common/icons/play.svg);
  --speechBubble: url(/abo/www/meta/common/icons/speechbubble.svg);
  --fontResize: url(/abo/www/meta/common/icons/fontResize.svg);
  --externalLink: url(/abo/www/meta/common/icons/externalLink.svg);
  --appStore: url(/abo/www/meta/common/icons/appStore.svg);
  --playStore: url(/abo/www/meta/common/icons/playStore.svg);
  --badgeAppStore: url(/abo/www/meta/common/icons/badgeAppStore.svg);
  --badgePlayStore: url(/abo/www/meta/common/icons/badgePlayStore.svg);
  --kPlus: url(/abo/www/meta/ksta/icons/kPlus.svg);
  --pencil: url(/abo/www/meta/common/icons/pencil.svg);
  --chevron: url(/abo/www/meta/common/icons/chevron.svg);
  --print: url(/abo/www/meta/common/icons/print.svg);
  --facebookColor: url(/abo/www/meta/common/icons/facebookColor.svg);
  --facebookMessengerColor: url(/abo/www/meta/common/icons/facebookMessengerColor.svg);
  --whatsAppColor: url(/abo/www/meta/common/icons/whatsAppColor.svg);
  --twitterColor: url(/abo/www/meta/common/icons/twitterColor.svg);
  --linkedInColor: url(/abo/www/meta/common/icons/linkedInColor.svg);
  --xingColor: url(/abo/www/meta/common/icons/xingColor.svg);
  --getPocketColor: url(/abo/www/meta/common/icons/getPocketColor.svg);
  --telegramColor: url(/abo/www/meta/common/icons/telegramColor.svg);
  --closeButton: url(/abo/www/meta/common/icons/closeButton.svg);
  --follow: url(/abo/www/meta/common/icons/follow.svg);
  --unfollow: url(/abo/www/meta/common/icons/unfollow.svg);
  --undo: url(/abo/www/meta/common/icons/undo.svg);
  --speechBubbles: url(/abo/www/meta/common/icons/speechBubbles.svg);
  --questionMark: url(/abo/www/meta/common/icons/questionMark.svg);
  --copyLink: url(/abo/www/meta/common/icons/copyLink.svg);
  --checkMarkColor: url(/abo/www/meta/common/icons/checkMark.svg);
  --bullet: url(/abo/www/meta/common/icons/bullet.svg);
}

@media (min-width: 768px) {
  :root {
    --teaserHeadlineSizeS: 1.25rem;
    --teaserHeadlineSizeM: 1.5rem;
    --teaserHeadlineSizeL: 2rem;
  }
}

/* mandator specific styles */
:root.ksta {
  --letterSpacing: 1.5px;
  --borderRadius: 5px;
  --burger: url(/abo/www/meta/ksta/icons/burger.svg);
  --kplus: url(/abo/www/meta/ksta/icons/kPlus.svg);
  --brandLogo: url(/abo/www/meta/ksta/icons/siteLogo.svg);
  --kPlusSimple: url(/abo/www/meta/ksta/icons/kPlusSimple.svg);
}

:root.rundschau-online {
  --letterSpacing: 1.5px;
  --borderRadius: 5px;
  --burger: url(/abo/www/meta/rundschau-online/icons/burgerMenu.svg);
  --krplus: url(/abo/www/meta/rundschau-online/icons/krPlus.svg);
  --brandLogo: url(/abo/www/meta/rundschau-online/icons/siteLogo.svg);
  --burgerMenu: url(/abo/www/meta/common/icons/burgerMenu.svg);
  --brandColor: #269AD5;
  --logoOrange: #ffa643;
}

:root {
  font-size: var(--fontSize);
  font-family: var(--textFont);
  background: var(--rootBGColor);
  color: var(--mainTextColor);
}
