﻿@media all
   {
      body{width: 320px;} /* TODO: body remove */
         
      body
         {
            padding: 0rem;
            margin: 0rem;
         }      
      body > article
         {          
            width: 100%;
            padding: 0rem;
            padding-left: 0.625rem;
            padding-right: 0.625rem;
         
         }  
      body > header,
      body > footer
         {
            width: 100%;
            padding: 0rem;
            position: relative;
         }
      body > footer > article
         {
            padding: 0.625rem;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
         }
      body > article
         {          
         
         }
      /* Logo */
      figure#logo
         {
            padding-top: 0.625rem;
            padding-left: 0.625rem;
         }
      /* Main Menu */
      nav#main-menu
         {            
            position: absolute;
            top: 0.625rem;
            right: 0.625rem;
            height: 2rem;
         }
      nav#main-menu svg.svg-menu,
      nav#main-menu svg.svg-search
         {
            cursor: pointer;
         }
      nav#main-menu svg.svg-menu:hover #menu-line-a,
      nav#main-menu svg.svg-menu:hover #menu-line-b,
      nav#main-menu svg.svg-menu:hover #menu-line-c,
      nav#main-menu svg.svg-search:hover #search-line,
      nav#main-menu svg.svg-search:hover #search-circle
         {
            stroke: #ffffff;
         }
      nav#main-menu svg.svg-menu:hover #menu-background,
      nav#main-menu svg.svg-search:hover #search-background
         {
            fill: #e2001a;
         }
     
      nav#main-menu > ul
         {
            width: auto;
            text-align: right;
         }  
      nav#main-menu > ul > li
         {
            text-align: left;
         }    
      /* Menu */   
      /* Mein Menu - Menu */
      nav#main_menu_menu input[type="checkbox"]:checked + ul
         {
            display: block;
         } 
      nav#main_menu_menu label,
      nav#main_menu_menu a
         {
            color: #ffffff;
            /*
            font-family: 'Lucida Grande', 
                         'Lucida Sans Unicode',
                         'Lucida Sans',
                         'Geneva',
                         'Verdana',
                         'sans-serif';
            */
            font-family: 'pt_sansregular';
            font-weight: normal;            
            line-height: 1.75rem;
            width: 100%;
            display: block;
            cursor: pointer;
         } 
      nav#main_menu_menu label
         {
            font-size: 1.1875rem;
         } 
      nav#main_menu_menu a
         {
            padding-left: 0.7692rem;
         }  
      nav#main_menu_menu > ul > li > a
         {
            padding-left: 0rem;
         }   
      nav#main_menu_menu > ul > li > a.main-menu-top-link
         {
            font-family: 'pt_sansregular';
            font-size: 1.375rem;            
            /* line-height: 1.5rem; */
            line-height: 2rem;
         }         
      nav#main_menu_menu > ul > li:nth-child(4)
         {
            margin-bottom: 0.625rem;
         }
      nav#main_menu_menu > ul > li > a.main-menu-top-link
         {
           
         }
      nav#main_menu_menu label
         {
            font-family: 'pt_sansbold';
         }      
      nav#main_menu_menu
         {            
            position: absolute;
            top: -webkit-calc(0.625rem * 2 + 2.1875rem);
            top: -moz-calc(0.625rem * 2 + 2.1875rem);
            top: calc(0.625rem * 2 + 2.1875rem);
            left: 0.625rem;
            right: 0.625rem;
            background-color: #e2001a;
            color: #ffffff;
            z-index: 10;
            box-sizing: border-box;
         }  
      nav#main_menu_menu > ul
         {        
            display: none;
            padding: 0.7692rem;
         } 
      nav#main_menu_menu > ul > li > ul
         {            
            display: none;
         }
      nav#main_menu_menu > ul > li
         {            
            display: block;
         } 
      nav#main_menu_menu li
         {            
            position: relative;
            cursor: pointer;
            display: block;
         }  
      nav#main_menu_menu input[type="checkbox"]:checked + svg + ul,
      nav#main_menu_menu input[type="radio"]:checked + svg + ul
         {            
            display: block;
         }    
      nav#main_menu_menu svg
         {
            background-color: transparent;  
            
            position: absolute;
            /* right: 0.625rem; */
            right: -0.5rem;
            top: -webkit-calc(50% - 1rem);
            top: -moz-calc(50% - 1rem);
            top: calc(50% - 1rem);       
         } 
      nav#main_menu_menu > ul > li > svg
         {
            top: -0.125rem;
         }
      nav#main_menu_menu label#close_head_menu
         {
            position: absolute;
            display: inline-block;
            /* bottom: 1rem; */
            /* right: -0.7692rem; */ /* icon overflow */
            right: 0.625rem;
            bottom: 1.625rem;
         }
      nav#main_menu_menu > ul
         {
            padding-bottom: 6rem;
         }
      /* Search */      
      nav#main_menu_search
         {            
            position: absolute;
            top: -webkit-calc(0.625rem * 2 + 2.1875rem);
            top: -moz-calc(0.625rem * 2 + 2.1875rem);
            top: calc(0.625rem * 2 + 2.1875rem);
            left: 0.625rem;
            right: 0.625rem;
            background-color: #e2001a;
            color: #ffffff;
            z-index: 10;
            box-sizing: border-box;
         }  
      nav#main_menu_search > div
         {
            display: none;
            min-height: 8rem;
            padding: 0.7692rem;
         }
      nav#main_menu_search input[type="checkbox"]:checked + div
         {
            display: block;
         }
      nav#main_menu_search label#close_head_search
         {
            position: absolute;
            display: inline-block;
            bottom: 0rem;
            right: 0rem;
            cursor: pointer;
         }
      /* search field */
      .search-field
         {
            width: 100%;
            border-width: 0rem;
            border-style: none;
            padding: 0.7692rem;
            color: #e2001a;
         }
      /* search container with field and icon */
      div#search_field_and_icon
         {
            width: 100%;
            white-space: nowrap;
            position: relative;
         }
      div#search_field_and_icon svg
         {
            /*
           position: absolute;
           right: 0.5rem;
           top: -webkit-calc(50% - 1rem);
           top: -moz-calc(50% - 1rem);
           top: calc(50% - 1rem);
           */
           width: 2rem;
           height: 2rem;
         }
      div#search_field_and_icon button
         {
            border-width: 0rem;
            border-style: solid;
            border-color: transparent;
            background-color: transparent;
            color: transparent;
            padding: 0rem;
            padding-top: 0rem;
            padding-bottom: 0rem;
            line-height: 1rem;
            min-width: 0rem;
            min-width: 0rem;
            cursor: pointer;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            font-weight: normal;
            box-sizing: border-box;
           /* ************************ */
           position: absolute;
           right: 0.5rem;
           top: -webkit-calc(50% - 1rem);
           top: -moz-calc(50% - 1rem);
           top: calc(50% - 1rem);
           width: 2rem;
           height: 2rem;
           padding: 0rem;
           display: inline-block;
         }
      /* ************** */
      /* Content - head */
      /* ************** */
      
      /* head tile */
      section figure.head-tile
         {
            position: relative;
            display: block;
            width: -webkit-calc(100% - 2 * 0.625rem);
            width: -moz-calc(100% - 2 * 0.625rem);
            width: calc(100% - 2 * 0.625rem);
            margin-top: 0.625rem;
            margin-bottom: 0.625rem; 
            margin-left: 0.625rem;
            margin-right: 0.625rem;            
            line-height: 0rem;
            
         }
      section figure.head-tile > figcaption a.head-tile-link
         {
            display: block;
            text-decoration: none;
            width: 100%;
            height: 100%;
            margin: 0rem;
            padding: 0rem;
            
         }
      /*
      section > a.head-tile-link
         {
            margin-top: 0.625rem;
            margin-bottom: 0.625rem;
            display: block;
         }
      */
      section figure.head-tile > figcaption
         {
            display: block;
            position: absolute;
            top: 0rem;
            left: 0rem;            
            padding: 0.625rem;
            padding-top: 0.9375rem;
            width: 100%;
            height: 100%;
            line-height: 1rem;
         }
      section figure.head-tile > figcaption header
         {
            border-width: 0.0769rem;
            border-style: solid;
            border-color: transparent;
            background-color: #e2001a;
            color: #ffffff;
            padding: 0.625rem;
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
            min-width: 8.5385rem;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            box-sizing: border-box;
         }
      section figure.head-tile > figcaption section
         {
            position: absolute;
            left: 0rem;
            bottom: 0rem;
            padding: 0.625rem;
            /* padding-top: 0rem; */         
         }
      /* trigger */
      .head-tile-trigger > label
         {
            display: block;
            width: 100%;
            position: relative;
            cursor: pointer;  
            color: #e2001a;
            font-family: 'pt_sansbold';
            padding-left: 0.625rem;
            padding-right: 0.625rem;
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
         }
      .head-tile-trigger > label:hover
         {
               text-decoration: none; 
         }    
      input[type="checkbox"] + .head-tile-trigger > label > svg
         {   
            background-color: transparent;
         }
      input[type="checkbox"] + .head-tile-trigger > label > svg #arrow-line,
      input[type="checkbox"] + .head-tile-trigger > label > svg #arrow-arrow
         {   
            stroke: #e2001a;
         }
      .head-tile-trigger > label > svg
         {
            position: absolute;
            right: 0.625rem;
            top: -webkit-calc(50% - 1rem);
            top: -moz-calc(50% - 1rem);
            top: calc(50% - 1rem);
         }
      /* head-link-all */
      .head-link-all
         {
            /* padding-bottom: 0.625rem; */
         }
      .head-link-all > a
         {
            display: block;
            width: 100%;
            position: relative;
            cursor: pointer;  
            color: #e2001a;
            font-family: 'pt_sansbold';
            padding-left: 0.625rem;
            padding-right: 0.625rem;
         }    
       
      .head-link-all > a > svg
         {      
            position: absolute;
            right: 0.625rem;
            top: -webkit-calc(50% - 1rem);
            top: -moz-calc(50% - 1rem);
            top: calc(50% - 1rem);       
         }         
      .head-link-all > a:hover
         {
            text-decoration: none;           
         }

         
      /* before trigger */
      div.multi-head-tile
         {
            display: none;
         }      
      input[type="checkbox"]:checked + section + div.multi-head-tile
         {
            display: block;
         }
      /* ************** */
      /* Content        */
      /* ************** */
      /* Topic / Top Topic */
      article.topic
         {
            margin-top: 0.9375rem;
            line-height: 1.25rem;
         }      
      body > article.topic
         {             
            padding-left: 1.25rem;
            padding-right: 1.25rem;
         }
      article.topic .button
         {
            /*
            color: #ffffff;
            border-style: solid;
            border-width: 0.07692rem; 
            border-color: transparent;
            margin-top: 0.3125rem;
            margin-bottom: 0.3125rem;
            */         
            border-width: 0.0769rem;
            border-style: solid;
            border-color: transparent;
            background-color: #e2001a;
            color: #ffffff;
            padding: 0.625rem;
          
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
           
            margin-top: 0.625rem;
            margin-bottom: 0.625rem;
            
            min-width: 8.5385rem;
            display: inline-block;
            text-align: center;
            text-decoration: none;
            font-weight: bold;
            box-sizing: border-box;
            line-height: 1rem;
         }
      /*
      article.topic .button:hover
         {
            color: #e2001a;
            border-color: #e2001a;    
         }
      */
      article.topic b
         {
            margin-bottom: 0.1562rem;
            display: inline-block;
         }
      article.topic a
         {
            text-decoration: none;
            color: #000000;
         }
      article.topic a:hover span.c-red,      
      article.topic a:hover b
         {
            text-decoration: none;
         }
      /* ************** */
      /* Footer         */
      /* ************** */
      /* social-media */
      section.social-media
         {
            margin-top: 	0.7692rem;
         }

      /* footer Menu - tmg */    
      nav#footer-tmg-menu 
         {    
         
         }
      nav#footer-tmg-menu > ul > li:after
         {    
            content: "\00a0\00B7";            
            font-size: 0.8125rem;
            line-height: 1.5rem;
         }
      nav#footer-tmg-menu > ul > li:last-child:after
         {    
            content: "";
         }
      nav#footer-tmg-menu a
         {    
            font-weight: normal;  
            /*
            font-family: 'Lucida Grande', 
                         'Lucida Sans Unicode',
                         'Lucida Sans',
                         'Geneva',
                         'Verdana',
                         'sans-serif';  
            */
            font-family: 'pt_sansregular';            
            color: #000000;
            font-size: 0.8125rem;
         }
      /* footer Menu */
      nav[id*="footer-menu"]
         {            
           
         }
      nav[id*="footer-menu"] a
         {             
            font-weight: normal;  
            /*
            font-family: 'Lucida Grande', 
                         'Lucida Sans Unicode',
                         'Lucida Sans',
                         'Geneva',
                         'Verdana',
                         'sans-serif';  
            */
            font-family: 'pt_sansregular';
            color: #000000;                         
         }
      nav[id*="footer-menu"] ul,
      nav[id*="footer-menu"] li
         {            
           display: block;
         }
      nav[id*="footer-menu"] label
         {            
           cursor: pointer;
         }
      nav[id*="footer-menu"] label:hover
         {            
           text-decoration: none;
         }
      nav[id*="footer-menu"]  li
         {            
           display: block;
           position: relative;
         }
      nav[id*="footer-menu"] > ul > li    
         {            
            margin-bottom: 0.7692rem;
         }  
      nav[id*="footer-menu"] > ul > li:last-child
         {            
            margin-bottom: 0rem;
         }      
      nav[id*="footer-menu"] > ul > li > ul
         {            
            margin-bottom: 0.7692rem;
         }     
      nav[id*="footer-menu"] > ul > li > ul > li
         {            
           line-height: 1.5rem;
         }
      nav[id*="footer-menu"] > ul > li > ul > li > a
         {            
            padding-left: 3.2308rem;
            width: 100%;
            display: inline-block;
         }
      nav[id*="footer-menu"] > ul > li > label,
      nav[id*="footer-menu"] > ul > li > a
         {            
            padding-left: 2.5rem;
            font-family: 'pt_sansbold';
            display: block;
            line-height: 1.875rem;
         }
      nav[id*="footer-menu"] > ul > li > label 
         {
            line-height: 1.875rem;
         }
      nav[id*="footer-menu"] > ul > li > svg  
         {
            position: absolute;
            top: 0rem;
            left: 0rem;
         }
      nav[id*="footer-menu"] > ul > li > input[type="checkbox"]:checked + svg #plus-minus-v-line
         {            
            display: none;
         }
      nav[id*="footer-menu"] > ul > li > input[type="checkbox"]:checked + svg + ul
         {            
            display: block;
         }
      nav[id*="footer-menu"] > ul > li > ul
         {            
            display: none;
         }
      /* ************** */
      /* SVG            */
      /* ************** */
      
      /* facebook tile */ 
      svg.svg-facebook:hover
         {
            background-color: #e2001a;
            cursor: pointer;
            border-width: 0.0769rem;
            border-style: solid;
            border-color: transparent;
         }
      svg.svg-facebook:hover #facebook-f
         {
            fill: #ffffff;
         }
      /*
      svg.svg-facebook:hover
         {
            background-color: #ffffff;
            border-color: #e2001a;
         }
      svg.svg-facebook:hover #facebook-f
         {
            fill: #e2001a;
         }
      */
      /* twitter tile */
      svg.svg-twitter:hover
         {
            background-color: #e2001a;
            cursor: pointer;
            border-width: 0.0769rem;
            border-style: solid;
            border-color: transparent;
         }
      svg.svg-twitter:hover #twitter-bird
         {
            fill: #ffffff;
         }  
      /*
      svg.svg-twitter:hover
         {
            background-color: #ffffff;
            border-color: #e2001a;
         }
      svg.svg-twitter:hover #twitter-bird
         {
            fill: #e2001a;
         }   
      */
      /* ***************** */
      /* background-image  */
      /* ***************** */
      .bg-img-transparent-black-v
         {
            background: transparent;
            background: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 100%);
            background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 100%); 
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 100%); 
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000000',GradientType=0 ); 
         }
      /* ************** */
      /* SVG static     */
      /* ************** */
      input[type="checkbox"]:checked + .head-tile-trigger > label > svg
         { 
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
                    
            -ms-transform-origin: 50% 50%;       
            -webkit-transform-origin: 50% 50%;       
            -o-transform-origin: 50% 50%;       
            -moz-transform-origin: 50% 50%;     
            transform-origin: 50% 50%;             
         }
      /* ************** */
      /* SVG moves      */
      /* ************** */
      /* Arrow moves default */      
      /* default */
      /*
      li > svg.svg-arrow #arrow-group,
      a > svg.svg-arrow #arrow-group,
      */
      /* head tile */
      /*
      label > svg.svg-arrow #arrow-group, 
      */      
      /* main menu */     
      /*      
      nav#main_menu_menu svg,
      */
      /* Plus moves */
      /*
      li input[type="checkbox"]:not(:checked) + svg.svg-plus-minus #plus-minus-v-line
         { 
            -ms-transform-origin: 50% 50%;       
            -webkit-transform-origin: 50% 50%;       
            -o-transform-origin: 50% 50%;       
            -moz-transform-origin: 50% 50%;     
            transform-origin: 50% 50%; 

            -moz-transition: transform 250ms;
            -ms-transition: transform 250ms;
            -o-transition: transform 250ms;
            -webkit-transition: transform 250ms;
            transition: transform 250ms;             
         } 
      */
      /* default */
      /*
      li:hover > svg.svg-arrow #arrow-group,
      a:hover > svg.svg-arrow #arrow-group,
      */
      /* head tile */
      /*
      label:hover > svg.svg-arrow #arrow-group,
      */
      /* main menu - Arrow moves */
      /*
      nav#main_menu_menu > ul > li:hover > svg,      
      nav#main_menu_menu > ul > li > ul > li:hover > svg
         { 
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
                    
            -ms-transform-origin: 50% 50%;       
            -webkit-transform-origin: 50% 50%;       
            -o-transform-origin: 50% 50%;       
            -moz-transform-origin: 50% 50%;     
            transform-origin: 50% 50%; 

            -moz-transition: transform 250ms;
            -ms-transition: transform 250ms;
            -o-transition: transform 250ms;
            -webkit-transition: transform 250ms;
            transition: transform 250ms;             
         }   
      */
      /* plus moves */
      /*      
      li:hover input[type="checkbox"]:not(:checked) + svg.svg-plus-minus #plus-minus-v-line 
         { 
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
                    
            -ms-transform-origin: 50% 50%;       
            -webkit-transform-origin: 50% 50%;       
            -o-transform-origin: 50% 50%;       
            -moz-transform-origin: 50% 50%;     
            transform-origin: 50% 50%; 

            -moz-transition: transform 250ms;
            -ms-transition: transform 250ms;
            -o-transition: transform 250ms;
            -webkit-transition: transform 250ms;
            transition: transform 250ms;             
         }
      */  
      /* head tile arrow special move */
      /*
      input[type="checkbox"]:checked + .head-tile-trigger > label > svg
         {           
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);

            -moz-transition: transform 250ms;
            -ms-transition: transform 250ms;
            -o-transition: transform 250ms;
            -webkit-transition: transform 250ms;
            transition: transform 250ms;          
         }
      input[type="checkbox"]:checked + .head-tile-trigger > label:hover > svg
         {           
            -moz-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            -o-transform: rotate(225deg);
            -webkit-transform: rotate(225deg);
            transform: rotate(225deg);

            -moz-transition: transform 250ms;
            -ms-transition: transform 250ms;
            -o-transition: transform 250ms;
            -webkit-transition: transform 250ms;
            transition: transform 250ms;          
         }
      */
   }