@charset "UTF-8";

/* ALLE Beitraege */

/* Drei Farben Blau */
/* 
dunkles Hellblau
color: #54C1DD
*/
/*
mittleres Hellblau
color: #98DAEB
*/
/*
helles Hellblau
color: #DDF3F8
*/
/* Drei Farben Rosa */
/*
dunkles Rosa
color: #F2B2BB
*/
/*
mittleres Rosa
color: #F4C5CB
*/
/*
helles Rosa
color: #F9DADE
*/


/*NOTE: Head */

.main-headline {
    color: var(--colorBlue)!important;
}


/* NOTE: Alle Beiträge - Textfarben, Beitragszahlen, Links usw. */
h1, 
h2, 
p, 
a, 
.zahl_im_kreis, 
.zahl_kreis,
.quelle_head,
.readMore {
 color: rgb(250, 240, 10)!important; /* Yellow */
}
a:hover,
.readMore:hover {
 color: rgb(220, 0, 90)!important;
}
#head .header_picture {
    width:70%;
    margin:-3% 0 0 35%;
    position:absolute;
}

/* NOTE: Beitrag 00 — Editorial */

#beitrag_00 p,
#beitrag_00 h1 {
 color: rgb(0, 70, 130) !important; /* Blau */
 font-family: "MaisonNeue";
 line-height: 120%;
}
#beitrag_00 h1 {text-align-last: right}
#beitrag_00 p { 
    font-size: clamp(0.8rem, 1.7vw, 27px);
    line-height: normal;
    }
























/* NOTE: Beitrag 01 — Mehr als Desinformation */

#beitrag_01 .animation {
    width: 180%;
    margin: -10% 0 0 -40%;
}

#beitrag_01 .desktop_only.breite_50 {
    float: right;
}

#beitrag_01 .flex-container.breite_50 {
    float: left;
}






/* NOTE: Beitrag 02 — Gesellschaftliche Resilienz */

/* ========================================================================== */
/* BASIS */
/* ========================================================================== */

#beitrag_02 .cards-widget,
#beitrag_02 .cards-widget *{
 box-sizing:border-box;
 margin:0 0 5% 0;
 padding:-30% 0 0 0;
}

/* ========================================================================== */
/* WIDGET */
/* ========================================================================== */

#beitrag_02 .cards-widget{
 position:relative;
 width:100%;
 padding-left:5.4vw;
}

/* ========================================================================== */
/* RAHMEN */
/* ========================================================================== */

#beitrag_02 .cards-frame{
 position:relative;
 min-height:58vw;
 padding:2vw;
 overflow:hidden;
 background:#6dbbc9;
 border:.25vw solid #faf00a;
 border-radius:3vw;
}

/* ========================================================================== */
/* TAB-CONTAINER */
/* ========================================================================== */

#beitrag_02 .cards-tabs{
 position:absolute;
 left:.08vw;
 top:50%;
 transform:translateY(-50%);
 display:flex;
 flex-direction:column;
 width:5.4vw;
 z-index:40;
}

/* ========================================================================== */
/* TABS */
/* ========================================================================== */

#beitrag_02 .cards-tab{
 width:5.4vw;
 min-width:5.4vw;
 display:flex;
 justify-content:center;
 align-items:center;
 padding:.1vw;
 background:#6dbbc9;
 border:.25vw solid #faf00a;
 border-radius:1.8vw 0 0 1.8vw;
 cursor:pointer;
 transition:.25s;
 position:relative;
}

/* leichte Überdeckung */

#beitrag_02 .cards-tab + .cards-tab{
 margin-top:-0.25vw;
}

/* ========================================================================== */
/* AKTIVER REITER */
/* ========================================================================== */

#beitrag_02 .cards-tab:not(.cards-inactive){
 opacity:1;
 z-index:50;
 border-right-width:0;
    transform:translateX(.18vw);

 /* ersetzt die bisherige ::after-Lösung */
}

/* ========================================================================== */
/* INAKTIVER REITER */
/* ========================================================================== */

#beitrag_02 .cards-tab.cards-inactive{
 opacity:.65;
 border-color:rgba(250,240,10,.75);
 z-index:1;
}

#beitrag_02 .cards-tab.cards-inactive span{
 color:rgba(250,240,10,.75);
}

/* ========================================================================== */
/* TAB-TEXTE */
/* ========================================================================== */

#beitrag_02 .cards-tab span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    text-align:center;
    font-family:"MaisonNeue",sans-serif;
    
    font-size: clamp(0.8vw, 1.5vw, 32px); /* Schriftgröße: minimum, optimum, maximum */
    line-height:1.2;
    color:#faf00a;
    padding:3.3vw 0 3.3vw 0!important;
    max-height:auto!important;

    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;

    width:80%;
    display:block;
}


/* ========================================================================== */
/* PANELS */
/* ========================================================================== */

#beitrag_02 .cards-panel{
 display:none;
}

#beitrag_02 .cards-panel.cards-active{
 display:flex;
 justify-content:center;
 align-items:center;
}

#beitrag_02 .cards-panel img{
 width:90%;
 height:auto;
 display:block;
}










/* NOTE: Beitrag 03 — Der neue Gasschock */

#beitrag_03 img {
 width:100%;
 margin-bottom: 5%;
}

#beitrag_03 .zweites {
    margin:-10% 0 0 20%;
}










/* NOTE: Beitrag 04 — “The Euro-Atlantic area is not at peace” */

:root{
--blue:rgb(0,70,130);
--yellow:rgba(250,240,10,1);
--red:rgba(220,0,90,1);
--pink:rgba(241,177,187,1);
--lightblue:#54C1DD;

/* Platz für die schrägen Labels */
--frame-bottom-space:7vw;
}

#beitrag_04 {
margin:0;
background:var(--blue);
font-family:MaisonNeue,sans-serif;
color:var(--yellow);
}

.widget{
width:95%;
margin:1.5vw auto;
}

.tabs{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:.4vw;
}

.tab{
padding:1vw 2vw;
border:.25vw solid var(--yellow);
border-bottom:none;
border-radius:2vw 2vw 0 0;
font-size:clamp(1rem,2vw,2rem);
cursor:pointer;
position:relative;
z-index:1;
}

.tab.inactive{
opacity:.25;
}

.tab:not(.inactive){
background:rgb(0,70,130);
margin-bottom:-0.3vw;
z-index:3;
}

.chart-frame{
border:.3vw solid var(--yellow);
border-radius:3vw;
padding-top:4vw;
padding-left:0vw;
padding-right:3vw;

/* Nur dieser Bereich wächst */
padding-bottom:var(--frame-bottom-space);
}

.chart-layout{
display:flex;
gap:1vw;
}

/* -------------------------------- */
/* Y-ACHSE */
/* -------------------------------- */

.y-axis{
width:8%;
height:42vw;
position:relative;
box-sizing:border-box;
}

.y-label{
position:absolute;
right:0;
transform:translateY(50%);
font-size:clamp(.9rem,1.4vw,1.6rem);
}

/* -------------------------------- */
/* PLOT */
/* -------------------------------- */

.plot-area{
position:relative;
width:92%;
height:42vw;
overflow:visible;
}

#grid{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}

.grid-line{
position:absolute;
left:0;
right:0;
border-top:.12vw dashed rgba(250,240,10,.65);
}

/* -------------------------------- */
/* BALKENBEREICH */
/* -------------------------------- */

.bars-area{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
padding:0 3%;
box-sizing:border-box;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

.group{
width:6.5%;
height:100%;
display:flex;
align-items:flex-end;
}

.bar-zone{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:flex-end;
gap:0;
}

.bar-wrap{
width:100%;
height:100%;

display:flex;
justify-content:flex-end;
align-items:center;
}

.bar{
width:100%;
height:100%;

display:flex;
flex-direction:column-reverse;
}

.seg{
width:100%;
transition:height .5s ease-in-out;
}

.pink{
background:var(--pink);
}

.red{
background:var(--red);
}

.lightblue{
background:var(--lightblue);
}

.yellow{
background:var(--yellow);
}

.ref-sollstaerke {
    font-size: 1.5vw!important;
    padding:29.5vw 0 0 25vw;
}


/* -------------------------------- */
/* LABELBEREICH */
/* -------------------------------- */

.label-area{
position:absolute;

left:0;
right:0;
padding:0 3%;
box-sizing:border-box;
top:100%;
display:flex;
justify-content:space-between;
align-items:flex-start;
pointer-events:none;
}

.label-group{
width:6.5%;
display:flex;
justify-content:center;
align-items:flex-start;

gap:10%;
}

.bar-label{
width:34%;
white-space:nowrap;
display:flex;
justify-content:flex-end;
text-align:right;
position:relative;
top:0.5em;
right:18%;
transform:rotate(-45deg);
transform-origin:top right;
font-size:1.5vw;
color:white;
}

/* -------------------------------- */
/* LEGENDE */
/* -------------------------------- */

.legend{
    display:flex;
    justify-content:center;
    gap:3vw;
    flex-wrap:wrap;
    margin-top:2vw;
    margin-bottom:5%;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:1vw;
    font-size:1.3vw;
}

.dot{
    width:3vw;
    height:3vw;
    min-width:28px;
    min-height:28px;
    border-radius:50%;
}



.schild {
 margin:20vw 0 0 0!important;
}

.schild img {
 position: absolute;
bottom: -0.3vw;
 left: 50%;
 transform: translateX(-50%);
}

#beitrag_04 img.monitor {
 width:20%;
 display: flex;
 justify-content: center!important; /* horizontal mittig */
 align-items: flex-end; /* unten */
}











/* NOTE: Beitrag 05 — Deutschlands Blick nach Norden */
#beitrag_05 h1, 
#beitrag_05 h2 {
 position:relative;
 z-index:10;
}
#beitrag_05 h4 {
    /*color: var(--colorBlue)!important;*/
    /*text-align: center;*/
    margin:10% 0 0 0;
    z-index: 5;
}

#beitrag_05 .illu_oben {
    margin:-65% -5% 0 -16%;
    width:122%;
    background:#98DAEB;
    padding:0 0 0 -10%!important;
}
#beitrag_05 .illu_unten {
    margin:5% 0 5% 0;
}

.scene{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:none;
    margin:0;
}
.sky{
 height:46vw;
 background:#98DAEB;
}
/*
 WASSERKANTE DURCH DEN BÄREN
 Hier die Höhe der Wasseroberkante einstellen.
 Kleinere Werte = Wasser steigt nach oben.
 Größere Werte = Wasser sinkt nach unten.
 Aktueller Wert: 80%
*/
.water{
    position:absolute;
    left:0;
    right:0;
    top:68%;
    bottom:0;
    background:#6dbbc9;
    z-index:1;}
/*
 ANIMIERTE WASSEROBERFLÄCHE (oberer Wellenbalken)
 Hier die Höhe des animierten Wellenbalkens einstellen.
 Kleinere Werte = Balken weiter nach oben.
 Größere Werte = Balken weiter nach unten.
 Aktueller Wert: 48%
*/
.wave{position:absolute;left:0;width:100%;height:8%;top:75%;z-index:4;animation:waveBob 6s ease-in-out infinite;}
.wave path{fill:none;stroke:#6dbbc9;stroke-width:65;stroke-linecap:round;}
.ice{position:relative;z-index:5;animation:iceFloat 6.5s ease-in-out infinite;transform-origin:20% 80%;}

.ice svg{
 width:150%;
 height:auto;
 display:block;
 margin:35px auto 0 auto;
}

#USA,#Russia,#China{transform-box:fill-box;transform-origin:center center;}
#USA{animation:boatUSA 5.8s ease-in-out infinite;}
#Russia{animation:boatRUS 7.1s ease-in-out infinite;}
#China{animation:boatEUR 6.3s ease-in-out infinite;}
#bear{animation:iceFloat 6.5s ease-in-out infinite;}

@keyframes waveBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes iceFloat{0%,100%{transform:translateY(0) rotate(-0.9deg)}50%{transform:translateY(-8px) rotate(0.9deg)}}
@keyframes boatUSA{0%,100%{transform:translateY(12px) rotate(-0.8deg)}50%{transform:translateY(8px) rotate(0.8deg)}}
@keyframes boatRUS{0%,100%{transform:translateY(10px) rotate(0.6deg)}50%{transform:translateY(15px) rotate(-0.9deg)}}
@keyframes boatEUR{0%,100%{transform:translateY(14px) rotate(-0.5deg)}50%{transform:translateY(9px) rotate(1deg)}}


    


/* NOTE: Beitrag 06 — Krieg der Satelliten */

#beitrag_06 { /* Variablen für die Skalierung und Platzierung der Satelliten */
 --sat-scale: 0.9;
 --sat-y: 0vw;
}

#beitrag_06 .space-scene {
 position: relative;
 width: 100%;
 height: 80vw;
 overflow: hidden;
}
#beitrag_06 .space-scene img {
 width: 100%;
}

#beitrag_06 .fg {
 position: absolute;
 inset: 0;
 transform:
 translateY(var(--sat-y))
 scale(var(--sat-scale));
 transform-origin: center center;
}
#beitrag_06 .stars{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
}


/* Beitrag 06_01 (Video) */

#beitrag_07 {
    margin:7% 0 0 0;
}

#beitrag_07 img {
	width: 100%;
	margin: 0 0 5% 0!important;
	padding: 0%!important;
	box-sizing: border-box;
	display: block;
}
#beitrag_07 div.breite_66 {
	box-sizing: border-box;
    margin: 4% 0 4% 0;
}
#beitrag_07 h1 {
 font-size:1.7vw;
 line-height:110%;
margin: 0% 0 2% 0;
}
#beitrag_07 h2 {
 font-size:1.7vw;
 line-height:120%;
	-moz-hyphens: none;
	-o-hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens:none;
    margin: 0 0 0 0;
}


/* Ende Beitrag 06_01 (Video) */





























/* NOTE: Allgemeine Angaben */

#beitrag_01, #beitrag_02, #beitrag_03, #beitrag_04, #beitrag_05, #beitrag_06, #beitrag_07, #beitrag_08 {
 overflow:hidden!important;
}
#beitrag_00 a, #beitrag_01 a, #beitrag_02 a, #beitrag_03 a, #beitrag_04 a, #beitrag_05 a, #beitrag_06 a, #beitrag_07 a, #beitrag_08 a {
 font-family: "MaisonNeue";
}




































/* NOTE: Mobile Styles */
/*@media (max-width: 1000px){
}

@media screen and (min-width: 1280px) {
}*/




/* NOTE: AB HIER MOBILE 480px */


@media (max-width: 480px) {
    body, .beitrag_00, .beitrag_01, .beitrag_02, .beitrag_0, .beitrag_04, .beitrag_05, .beitrag_06, .beitrag_07, .beitrag_08, .beitrag_09, .beitrag_10, .beitrag_11, .beitrag_12, .beitrag_13, .beitrag_00 {
    overflow-x: hidden!important;
  }

  .margin-bottom {
    margin-bottom: 27vw;
  }

#head .menue_button {
 background-color:red!important;
 }
    
/* NOTE: Mobile_Header */
    
.main-headline {
    margin-bottom: 14%!important;
}
#head a {
    color:var(--colorBlue); /* Blue */
}
.head_newsletter {
    /*border: solid var(--colorBlue);*/
}
.head_newsletter:hover {
    border: solid var(--colorRed)!important;
}
#head a:hover,
.head_newsletter:hover {
    color: rgb(220, 0, 90)!important; /* Red */
}
 
 

.mobile_header_picture {
 width:100%;
 margin:5% 0 0 0;
 position:absolute;
} 
    
    
    
    
    
    
/* NOTE: Editorial */
    
 #beitrag_00 p {
    font-size: 4.8vw;
    line-height: 120%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    display: block;
    width: 100%;
 }
    
    
/* NOTE: Mobile_Beitrag 01 — Mehr als Desinformation: KI als Infrastruktur und autonomer Akteur */

    
    
    
    
/* NOTE: Mobile_Beitrag 02 — Gesellschaftliche Resilienz: Das messen, was wirklich zählt */
 #beitrag_02 h1 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;

 hyphens: auto !important;
    -webkit-hyphens: auto !important;

    }
/* ========================================================================== */
/* BASIS */
/* ========================================================================== */

#beitrag_02 .cards-widget,
#beitrag_02 .cards-widget *{
 box-sizing:border-box;
}

/* ========================================================================== */
/* WIDGET */
/* ========================================================================== */

#beitrag_02 .cards-widget{
 position:relative;
 width:100%;
}

/* ========================================================================== */
/* RAHMEN */
/* ========================================================================== */

#beitrag_02 .cards-frame{
 position:relative;
 min-height:auto;
 overflow:hidden;
 border:.7vw solid #faf00a;
}

/* ========================================================================== */
/* TAB-CONTAINER */
/* ========================================================================== */

#beitrag_02 .cards-tabs{
    position:absolute;
    left:.08vw;
    top:50%;
    transform:translateY(-100%);
    display:flex;
    flex-direction:column;
    width:auto;
    z-index:40;
}

/* ========================================================================== */
/* TABS */
/* ========================================================================== */


#beitrag_02 .cards-tab span{
 white-space:normal;
 word-break:normal;
 overflow-wrap:break-word;
 hyphens:auto;
 -webkit-hyphens:auto;
 display:block;
 width:100%;
}

#beitrag_02 .cards-tab + .cards-tab{
 /*margin-top:-0.25vw;*/
}

/* ========================================================================== */
/* AKTIVER REITER */
/* ========================================================================== */

#beitrag_02 .cards-tab:not(.cards-inactive){
 opacity:1;
 z-index:50;
 border-right-width:0;
 transform:translateX(.18vw);
}

/* ========================================================================== */
/* INAKTIVER REITER */
/* ========================================================================== */

#beitrag_02 .cards-tab.cards-inactive{
 opacity:.35;
 border-color:rgba(250,240,10,.75);
 z-index:1;
}

#beitrag_02 .cards-tab.cards-inactive span{
 color:rgba(250,240,10,.75);
}

/* ========================================================================== */
/* TAB-TEXTE */
/* ========================================================================== */

#beitrag_02 .cards-tab span{
    writing-mode:vertical-rl;
    /*transform:rotate(180deg);*/
    text-align:center;
    font-family:"MaisonNeue",sans-serif;
    font-size:3.5vw;
    line-height:1.2;
    color:#faf00a;
    padding:0!important;
    max-height:auto!important;
    hyphens: auto;
    -webkit-hyphens: auto!important;
    hyphenate-limit-chars: auto 2!important;
    hyphenate-limit-lines: 6!important;
    width:80%;
}

/* ========================================================================== */
/* PANELS */
/* ========================================================================== */


#beitrag_02 .cards-panel.cards-active{
 display:flex;
 justify-content:center;
 align-items:center;
}

#beitrag_02 .cards-panel img{
 width:90%;
 height:auto;
 display:block;
}

/* ========================================================================== */
/* MOBILE */
/* ========================================================================== */


 #beitrag_02 .cards-widget{
 padding-left:0;
 }

 #beitrag_02 .cards-tabs{
 position:relative;
 left:auto;
 top:auto;
 transform:none;
 width:100%;
 margin-bottom:0;
 flex-direction:row;
 }

 #beitrag_02 .cards-tab + .cards-tab{
 margin-top:0;
 }

 
#beitrag_02 .cards-tab{
 width:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 border:0.7vw solid #faf00a;
 border-radius:4vw;
 cursor:pointer;
 transition:.25s;
 position:relative;
 height:25vw!important;
 background-color: rgb(0, 70, 130); /*Blau */
}
 #beitrag_02 .cards-tab:not(.cards-inactive){
 transform:none;
 border:0.7vw solid #faf00a;
 }

 #beitrag_02 .cards-tab span{
 writing-mode:horizontal-tb;
 transform:none;
 max-height:none;
 padding:0;
 }

    
    
    
    
    

/* NOTE: Mobile_Beitrag 03 — Der neue Gasschock */
    
 #beitrag_03 img {
        margin-top: 4%;
    }

    
     
    
    
/* NOTE: Mobile_Beitrag 04 — “The Euro-Atlantic area is not at peace” */

  
/* -------------------------------- */
/* MOBILE */
/* -------------------------------- */


:root{
 --frame-bottom-space:22vw;
}

.plot-area,
.y-axis{
height:75vw;
    padding:5%!important;
}

.plot-area { /* Diagramm-Balken-Bereich */
    width: 84%!important;
}
.y-axis { /* Bereich Beschriftung Y-Achse */
    width: 16%!important;
}

.y-label { /* Beschriftung Y-Achse */
    font-size:3vw;
}
.bar-label{ /* Jahreszahlen */
font-size:3vw;
}
.legend-item {
    font-size:4vw;
}



.chart-frame{
border:.3vw solid var(--yellow);
border-radius:3vw;
padding-top:6vw;
padding-left:0vw;
padding-right:3vw;

/* Nur dieser Bereich, unterhalb Jahreszahlen, wächst */
padding-bottom:12vw;
margin-bottom: 5%;
    margin-top:2%;
}
    
.tabs{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:.4vw;
}

.tab{
padding:1vw 2vw;
border:.4vw solid var(--yellow);
border-radius:0;
font-size:clamp(1rem,2vw,2rem);
cursor:pointer;
position:relative;
z-index:1;
background-color: rgb(23, 29, 61); /* dark blue */
margin:1%;
}

.tab.inactive{
opacity:.25;
}

.tab:not(.inactive){
background:rgb(0,70,130);
/*margin-bottom:-0.3vw;*/
z-index:3;
    margin:1%;

}
    
    
    
    
    

.schild {
 margin:35vw 0 0 0!important;

}

.schild img {
 position: absolute;
bottom: -0.5vw;
 left: 50%;
 transform: translateX(-50%);
}

#beitrag_04 img.monitor {
 width:40%;
 display: flex;
 justify-content: center!important; /* horizontal mittig */
 align-items: flex-end; /* unten */
}
    
    
    
    
    
    
    
    
    
    
    
    
    
/* NOTE: Mobile_Beitrag 05 — Deutschlands Blick nach Norden */
#beitrag_05 {
    }
#beitrag_05 .illu_oben {
 margin:-100% -5% 0 -16%;
 width:122%;
 background:#98DAEB;
 padding:0 0 0 -10%!important;
    z-index: -1;
    padding:30% 0 0 0;
}
/* NOTE: Mobile_Beitrag 06 — Krieg der Satelliten */
 
#beitrag_07 h1 {
 font-size:8vw;
 margin: 5% 0 2% 0;
}
#beitrag_07 h2 {
 font-size:6vw;
}

      } /* Ende 480px */