/* ##################################################
Variables
################################################## */


:root {

  /* Colors */
  --color-1 :#0073c8;
  --color-2 :#005491;
  --color-3 : #003366;
  --color-4: #CCE3F4;

  --color-link : #000000;
  --color-link-hover:#000000;
  --color-link-visited:#000000;
  --color-link-active:#000000;

  --color-white :#ffffff;
  --color-black :#000000;
  --color-error :#B60101;
  --color-focus:#000000;
  --color-form-fields:#f2f2f3;
  --color-bg-footer:#f2f2f3;
  --color-bg-2:#f2f2f3;

  --color--dynamic:#005491;

    --polygone-transparency: rgba(0, 115, 200, 0.9);

    /* Svg Filter color svg backgroundimages check here: https://angel-rs.github.io/css-color-filter-generator/*/
    --svg-color-white:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1%) hue-rotate(311deg) brightness(104%) contrast(101%);
    --svg-color-link:brightness(0) saturate(100%) invert(28%) sepia(71%) saturate(1839%) hue-rotate(185deg) brightness(98%) contrast(103%);

    --svg-color-1:brightness(0) saturate(100%) invert(28%) sepia(71%) saturate(1839%) hue-rotate(185deg) brightness(98%) contrast(103%);
    --svg-color-2:brightness(0) saturate(100%) invert(19%) sepia(33%) saturate(5056%) hue-rotate(188deg) brightness(100%) contrast(102%);
    --svg-color-3:brightness(0) saturate(100%) invert(11%) sepia(86%) saturate(2389%) hue-rotate(196deg) brightness(100%) contrast(101%);

    /* Font Definiton */
    --primary-font: 'Public Sans', Helvetica, Arial, sans-serif;

    --font-size-body : 1.6rem;
    --font-size-body-responsive: 1.5rem;

    --font-size-h1 : 4rem;
    --font-size-h2 : 2.8rem;
    --font-size-h2_1: 2.5rem;
    --font-size-h3 : 2.2rem;
    --font-size-h4 : 1.8rem;
    --font-size-h5 : 1.6rem;
    --font-size-h6 : 1.5rem;
    --font-size-small : 1.3rem;
    --font-size-medium:1.5rem;
    --font-size-main-navi : 1.5rem;

    --font-weight-normal : 400;
    --font-weight-bold : 700;

    /* Sizes | Padding | Margins | Gaps  */
    --header-margin-bottom: 2rem;
    --paragraph-margin-bottom: 2rem;

    --max-container-width : 1280px;
    --medium-container-width : 1024px;
    --small-container-width : 960px;

    --flex-gap-0 : 0;
    --flex-gap : 3.2rem;
    --grid-gap : 3.2rem;
    --sub-menu-gap : 4.8rem;
    --button-gap : 1rem;
    --container-gap: 3.6rem;

    --card-padding : 2.4rem;
    --textbox-padding : 3.2rem;
    --modul-margin-top: 8rem;
    --modul-margin-bottom : 8rem;
    --button-padding:1.6rem 3.2rem 1.6rem 4.8rem;
    --wordwrap-normal: normal;
}

/* Degree definition */
.animation-game                      { --color--dynamic:#005D89; }
.virtual-reality                     { --color--dynamic:#62005B; }
.expanded-media,
.informatik                          { --color--dynamic:#D2460F; }
.information-science                 { --color--dynamic:#20349B; }
.media-design                        { --color--dynamic:#B30010; }
.international-media                 { --color--dynamic:#20349B; }
.technology-society                  { --color--dynamic:#003A5E; }
.motion-pictures                     { --color--dynamic: #20349B; }
.online-journalism                   { --color--dynamic:#005D89; }
.online-communication                { --color--dynamic:#005D89; }
.sound-music                         { --color--dynamic:#D2460F; }
.user-experience-music               { --color--dynamic:#B30010; }


/* overwriting Colors for degrees*/


.animation-game .rd-site-content   {
  --color-1 :#005D89;
  --color-2 :#002A3D;
  --color-3 :#003A5E;
  --color-4: #D1DFE8;
  --darkmode-color-4 : #00131B;
  --polygone-transparency: rgba(0, 93, 137, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(15%) sepia(91%) saturate(3604%) hue-rotate(185deg) brightness(92%) contrast(101%);
  --svg-color-2:brightness(0) saturate(100%) invert(12%) sepia(71%) saturate(1214%) hue-rotate(165deg) brightness(94%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(15%) sepia(33%) saturate(3304%) hue-rotate(179deg) brightness(99%) contrast(101%);
}
.animation-game.master .rd-site-content   {
  --color-1 :#04786D;
  --color-2 :#004B4C;
  --color-3 :#0B260C;
  --color-4 :#D3E6E2;
  --darkmode-color-4 : #011816;
  --polygone-transparency: rgba(4, 120, 109, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(28%) sepia(69%) saturate(1297%) hue-rotate(142deg) brightness(100%) contrast(97%);
  --svg-color-2:brightness(0) saturate(100%) invert(17%) sepia(81%) saturate(1275%) hue-rotate(150deg) brightness(98%) contrast(101%);
  --svg-color-3:brightness(0) saturate(100%) invert(10%) sepia(12%) saturate(2865%) hue-rotate(73deg) brightness(94%) contrast(96%);
}
.virtual-reality .rd-site-content {
  --color-1 :#62005B;
  --color-2 :#4F0c37;
  --color-3 :#9b176C;
  --color-4 :#E0CEDF;
  --darkmode-color-4 : #140012;
  --polygone-transparency: rgba(98, 0, 91, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(14%) sepia(31%) saturate(7177%) hue-rotate(289deg) brightness(76%) contrast(116%);
  --svg-color-2:brightness(0) saturate(100%) invert(8%) sepia(74%) saturate(2416%) hue-rotate(299deg) brightness(99%) contrast(101%);
  --svg-color-3:brightness(0) saturate(100%) invert(13%) sepia(68%) saturate(4328%) hue-rotate(307deg) brightness(90%) contrast(92%);
}
.expanded-media .rd-site-content  {
  --color-1 :#D2460F;
  --color-2 :#9e350b;
  --color-3 :#852c09;
  --color-4 :#F7DAD2;
  --darkmode-color-4 : #2A0E03;
  --polygone-transparency: rgba(210, 70, 15, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(31%) sepia(83%) saturate(1565%) hue-rotate(355deg) brightness(90%) contrast(96%);
  --svg-color-2:brightness(0) saturate(100%) invert(22%) sepia(26%) saturate(6584%) hue-rotate(6deg) brightness(91%) contrast(91%);
  --svg-color-3:brightness(0) saturate(100%) invert(11%) sepia(92%) saturate(4418%) hue-rotate(31deg) brightness(96%) contrast(93%);
}
.informatik .rd-site-content  {
  --color-1 :#D2460F;
  --color-2 :#9e350b;
  --color-3 :#852c09;
  --color-4 :#F7DAD2;
  --darkmode-color-4 : #2A0E03;
  --polygone-transparency: rgba(210, 70, 15, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(31%) sepia(83%) saturate(1565%) hue-rotate(355deg) brightness(90%) contrast(96%);
  --svg-color-2:brightness(0) saturate(100%) invert(22%) sepia(26%) saturate(6584%) hue-rotate(6deg) brightness(91%) contrast(91%);
  --svg-color-3:brightness(0) saturate(100%) invert(11%) sepia(92%) saturate(4418%) hue-rotate(31deg) brightness(96%) contrast(93%);
}
.information-science .rd-site-content {
  --color-1 :#20349B;
  --color-2 :#101B4F;
  --color-3 :#010658;
  --color-4 :#D2D7EC;
  --darkmode-color-4 : #060A1F;
  --polygone-transparency: rgba(32, 52, 155, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(25%) sepia(17%) saturate(3951%) hue-rotate(203deg) brightness(96%) contrast(117%);
  --svg-color-2:brightness(0) saturate(100%) invert(10%) sepia(22%) saturate(6185%) hue-rotate(219deg) brightness(98%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(10%) sepia(43%) saturate(5676%) hue-rotate(233deg) brightness(76%) contrast(121%);
}
.media-design .rd-site-content     {
  --color-1 :#B30010;
  --color-2 :#840012;
  --color-3 :#660009;
  --color-4 :#F2D0D0;
  --darkmode-color-4 : #240003;
  --polygone-transparency: rgba(179, 0, 16, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(7%) sepia(87%) saturate(7257%) hue-rotate(351deg) brightness(103%) contrast(103%);
  --svg-color-2:brightness(0) saturate(100%) invert(10%) sepia(31%) saturate(7431%) hue-rotate(337deg) brightness(110%) contrast(117%);
  --svg-color-3:brightness(0) saturate(100%) invert(8%) sepia(50%) saturate(6301%) hue-rotate(336deg) brightness(88%) contrast(122%);
}
.international-media .rd-site-content {
  --color-1 :#20349B;
  --color-2 :#101B4F;
  --color-3 :#010658;
  --color-4 :#F2D0D0;
  --darkmode-color-4 : #060A1F;
  --polygone-transparency: rgba(32, 52, 155, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(25%) sepia(17%) saturate(3951%) hue-rotate(203deg) brightness(96%) contrast(117%);
  --svg-color-2:brightness(0) saturate(100%) invert(10%) sepia(22%) saturate(6185%) hue-rotate(219deg) brightness(98%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(10%) sepia(43%) saturate(5676%) hue-rotate(233deg) brightness(76%) contrast(121%);
}
.technology-society .rd-site-content  {
  --color-1 :#003a5e;
  --color-2 :#002A3d;
  --color-3 :#005D89;
  --color-4 :#CCD6DE;
  --darkmode-color-4 : #000C13;
  --polygone-transparency: rgba(32, 52, 155, 0.9);/* all*/
  --svg-color-1:brightness(0) saturate(100%) invert(15%) sepia(33%) saturate(3304%) hue-rotate(179deg) brightness(99%) contrast(101%);
  --svg-color-2:brightness(0) saturate(100%) invert(12%) sepia(84%) saturate(1193%) hue-rotate(167deg) brightness(91%) contrast(104%);
  --svg-color-3:brightness(0) saturate(100%) invert(14%) sepia(90%) saturate(4017%) hue-rotate(186deg) brightness(94%) contrast(101%);
}
.motion-pictures .rd-site-content     {
  --color-1 :#20349B;
  --color-2 :#101B4F;
  --color-3 :#010658;
  --color-4 : #D3D8ED;
  --darkmode-color-4 : #060A1F;
  --polygone-transparency: rgba(32, 52, 155, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(25%) sepia(17%) saturate(3951%) hue-rotate(203deg) brightness(96%) contrast(117%);
  --svg-color-2:brightness(0) saturate(100%) invert(10%) sepia(22%) saturate(6185%) hue-rotate(219deg) brightness(98%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(10%) sepia(43%) saturate(5676%) hue-rotate(233deg) brightness(76%) contrast(121%);
}
.online-journalism .rd-site-content   {
  --color-1 :#005D89;
  --color-2 :#002A3D;
  --color-3 :#003A5E;
  --color-4 :#CCD6DE;
  --darkmode-color-4 : #00131B;
  --polygone-transparency: rgba(0, 93, 137, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(15%) sepia(91%) saturate(3604%) hue-rotate(185deg) brightness(92%) contrast(101%);
  --svg-color-2:brightness(0) saturate(100%) invert(12%) sepia(71%) saturate(1214%) hue-rotate(165deg) brightness(94%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(15%) sepia(33%) saturate(3304%) hue-rotate(179deg) brightness(99%) contrast(101%);
}
.online-communication .rd-site-content {
  --color-1 :#005D89;
  --color-2 :#002A3D;
  --color-3 :#003A5E;
  --color-4 : #CCD6DE;
  --darkmode-color-4 : #00131B;
  --polygone-transparency: rgba(0, 93, 137, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(15%) sepia(91%) saturate(3604%) hue-rotate(185deg) brightness(92%) contrast(101%);
  --svg-color-2:brightness(0) saturate(100%) invert(12%) sepia(71%) saturate(1214%) hue-rotate(165deg) brightness(94%) contrast(103%);
  --svg-color-3:brightness(0) saturate(100%) invert(15%) sepia(33%) saturate(3304%) hue-rotate(179deg) brightness(99%) contrast(101%);
}

.sound-music .rd-site-content           {
  --color-1 :#D2460F;
  --color-2 :#9e350b;
  --color-3 :#852c09;
  --color-4 : #F7DAD2;
  --darkmode-color-4 : #2A0E03;
  --polygone-transparency: rgba(210, 70, 15, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(31%) sepia(83%) saturate(1565%) hue-rotate(355deg) brightness(90%) contrast(96%);
  --svg-color-2:brightness(0) saturate(100%) invert(22%) sepia(26%) saturate(6584%) hue-rotate(6deg) brightness(91%) contrast(91%);
  --svg-color-2:brightness(0) saturate(100%) invert(11%) sepia(92%) saturate(4418%) hue-rotate(31deg) brightness(96%) contrast(93%);
}
.user-experience-music .rd-site-content  {
  --color-1 :#B30010;
  --color-2 :#840012;
  --color-3 :#660009;
  --color-4 : #F2D0D0;
  --darkmode-color-4 : #240003;
  --polygone-transparency: rgba(179, 0, 16, 0.9);
  --svg-color-1:brightness(0) saturate(100%) invert(7%) sepia(87%) saturate(7257%) hue-rotate(351deg) brightness(103%) contrast(103%);
  --svg-color-2:brightness(0) saturate(100%) invert(10%) sepia(31%) saturate(7431%) hue-rotate(337deg) brightness(110%) contrast(117%);
  --svg-color-3:brightness(0) saturate(100%) invert(8%) sepia(50%) saturate(6301%) hue-rotate(336deg) brightness(88%) contrast(122%);
}