@font-face {
    font-family: 'Orbitron';
    src: url('/assets/fonts/Orbitron-Variable.woff2') format('woff2-variations'),
        url('/assets/fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('/assets/fonts/Rajdhani-Light.woff2') format('woff2-variations'),
        url('/assets/fonts/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('/assets/fonts/Rajdhani-Regular.woff2') format('woff2-variations'),
        url('/assets/fonts/Rajdhani-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rajdhani';
    src: url('/assets/fonts/Rajdhani-Medium.woff2') format('woff2-variations'),
        url('/assets/fonts/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/SpaceMono-Regular.woff2') format('woff2-variations'),
        url('/assets/fonts/SpaceMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/SpaceMono-Bold.woff2') format('woff2-variations'),
        url('/assets/fonts/SpaceMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('/assets/fonts/SpaceMono-Italic.woff2') format('woff2-variations'),
        url('/assets/fonts/SpaceMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}



/* =====================
   MOBILE
   0 - 767px
===================== */

    .t-hero{ /* Verwendung: Hero, wichtigste Aussage einer Seite */
        font-family: 'Orbitron', sans-serif;
        font-size: 36px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h1{ /* Verwendung: Große Überschrift*/
        font-family: 'Orbitron', sans-serif;
        font-size: 32px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h2{  /* Verwendung: großer Abschnitt  */
        font-family: 'Orbitron', sans-serif;
        font-size: 28px; 
        font-weight: 700;
        line-height: 115%;
        letter-spacing: -0.5%;

    }

    .t-h3{  /* Verwendung: Unterabschnitte, größere Card-Titel  */ 
        font-family: 'Orbitron', sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 0%; 
    }

    .t-h4{  /* Verwendung: kleinere Überschriften, Info-Bereiche */
        font-family: 'Orbitron', sans-serif;
        font-size: 18px; 
        font-weight: 600;
        line-height: 125%;
        letter-spacing: +0.5%;
    }

    .body-s{    /* Verwendung: Zusatzinfos, kleinere Texte */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 145%;
        letter-spacing: +0.2%;
    }

    .body-m{    /* Verwendung: normaler Fließtext  */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .body-l{    /* Verwendung: Einleitung, wichtige Beschreibungen */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .button-s{  /* Verwendung: kleine Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .button-m{  /* Verwendung: Standard Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .meta{  /* Verwendung: Status, Zeitangaben, Nebeninformationen  */
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: +2%;
    }

    .label{ /* Verwendung: Kategorien, Tags, UI-Bezeichnung  */
        font-family: 'Space Mono', monospace;
        font-size: 13px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: +3%;
    }

    .code{  /* Verwendung: technische Texte, IDs, Code, Schnittstellen */
        font-family: 'Space Mono', monospace;
        font-size: 15px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;

    }

    .code-muted{    /* Verwendung: deaktivierte / nicht aktive technische Inhalte, Nebensächliche Technische Sachen zB Inhalt eines Eingabefelds */
        font-family: 'Space Mono', monospace;
        font-size: 15px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;
        opacity: 0.5;

    }

/* =====================
   TABLET
   ab 768px
===================== 

@media (min-width: 768px) {

    .t-hero{  Verwendung: Hero, wichtigste Aussage einer Seite 
        font-family: 'Orbitron', sans-serif;
        font-size: 52px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h1{  Verwendung: Große Überschrift
        font-family: 'Orbitron', sans-serif;
        font-size: 44px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h2{  /* Verwendung: großer Abschnitt  
        font-family: 'Orbitron', sans-serif;
        font-size: 36px; 
        font-weight: 700;
        line-height: 115%;
        letter-spacing: -0.5%;

    }

    .t-h3{   Verwendung: Unterabschnitte, größere Card-Titel  
        font-family: 'Orbitron', sans-serif;
        font-size: 28px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 0%; 
    }

    .t-h4{   Verwendung: kleinere Überschriften, Info-Bereiche 
        font-family: 'Orbitron', sans-serif;
        font-size: 22px; 
        font-weight: 600;
        line-height: 125%;
        letter-spacing: +0.5%;
    }

    .body-s{     Verwendung: Zusatzinfos, kleinere Texte 
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 145%;
        letter-spacing: +0.2%;
    }

    .body-m{     Verwendung: normaler Fließtext  
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .body-l{     Verwendung: Einleitung, wichtige Beschreibungen 
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .button-s{   Verwendung: kleine Buttons 
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .button-m{   Verwendung: Standard Buttons 
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .meta{   Verwendung: Status, Zeitangaben, Nebeninformationen  
        font-family: 'Space Mono', monospace;
        font-size: 14px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: +2%;
    }

    .label{  Verwendung: Kategorien, Tags, UI-Bezeichnung  
        font-family: 'Space Mono', monospace;
        font-size: 14px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: +3%;
    }

    .code{   Verwendung: technische Texte, IDs, Code, Schnittstellen 
        font-family: 'Space Mono', monospace;
        font-size: 16px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;

    }

    .code-muted{     Verwendung: deaktivierte / nicht aktive technische Inhalte, Nebensächliche Technische Sachen zB Inhalt eines Eingabefelds 
        font-family: 'Space Mono', monospace;
        font-size: 16px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;
        opacity: 0.5;

    }


}

*/
/* =====================
   DESKTOP
   ab 1200px
===================== */

@media (min-width: 1200px) {

    .t-hero{ /* Verwendung: Hero, wichtigste Aussage einer Seite */
        font-family: 'Orbitron', sans-serif;
        font-size: 64px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h1{ /* Verwendung: Große Überschrift*/
        font-family: 'Orbitron', sans-serif;
        font-size: 54px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h2{  /* Verwendung: großer Abschnitt  */
        font-family: 'Orbitron', sans-serif;
        font-size: 44px; 
        font-weight: 700;
        line-height: 115%;
        letter-spacing: -0.5%;

    }

    .t-h3{  /* Verwendung: Unterabschnitte, größere Card-Titel  */ 
        font-family: 'Orbitron', sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 0%; 
    }

    .t-h4{  /* Verwendung: kleinere Überschriften, Info-Bereiche */
        font-family: 'Orbitron', sans-serif;
        font-size: 24px; 
        font-weight: 600;
        line-height: 125%;
        letter-spacing: +0.5%;
    }

    .body-s{    /* Verwendung: Zusatzinfos, kleinere Texte */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 145%;
        letter-spacing: +0.2%;
    }

    .body-m{    /* Verwendung: normaler Fließtext  */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .body-l{    /* Verwendung: Einleitung, wichtige Beschreibungen */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .button-s{  /* Verwendung: kleine Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .button-m{  /* Verwendung: Standard Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .meta{  /* Verwendung: Status, Zeitangaben, Nebeninformationen  */
        font-family: 'Space Mono', monospace;
        font-size: 14px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: +2%;
    }

    .label{ /* Verwendung: Kategorien, Tags, UI-Bezeichnung  */
        font-family: 'Space Mono', monospace;
        font-size: 14px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: +3%;
    }

    .code{  /* Verwendung: technische Texte, IDs, Code, Schnittstellen */
        font-family: 'Space Mono', monospace;
        font-size: 17px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;

    }

    .code-muted{    /* Verwendung: deaktivierte / nicht aktive technische Inhalte, Nebensächliche Technische Sachen zB Inhalt eines Eingabefelds */
        font-family: 'Space Mono', monospace;
        font-size: 17px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;
        opacity: 0.5;

    }

}

/* =====================
   Small 
   bis 510px
===================== */

@media (max-width: 510px) {

    .t-hero{ /* Verwendung: Hero, wichtigste Aussage einer Seite */
        font-family: 'Orbitron', sans-serif;
        font-size: 34px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h1{ /* Verwendung: Große Überschrift*/
        font-family: 'Orbitron', sans-serif;
        font-size: 30px; 
        font-weight: 700;
        line-height: 110%;
        letter-spacing: -1%;

    }

    .t-h2{  /* Verwendung: großer Abschnitt  */
        font-family: 'Orbitron', sans-serif;
        font-size: 26px; 
        font-weight: 700;
        line-height: 115%;
        letter-spacing: -0.5%;

    }

    .t-h3{  /* Verwendung: Unterabschnitte, größere Card-Titel  */ 
        font-family: 'Orbitron', sans-serif;
        font-size: 21px;
        font-weight: 600;
        line-height: 120%;
        letter-spacing: 0%; 
    }

    .t-h4{  /* Verwendung: kleinere Überschriften, Info-Bereiche */
        font-family: 'Orbitron', sans-serif;
        font-size: 18px; 
        font-weight: 600;
        line-height: 125%;
        letter-spacing: +0.5%;
    }

    .body-s{    /* Verwendung: Zusatzinfos, kleinere Texte */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 500;
        line-height: 145%;
        letter-spacing: +0.2%;
    }

    .body-m{    /* Verwendung: normaler Fließtext  */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .body-l{    /* Verwendung: Einleitung, wichtige Beschreibungen */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 17px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0%;
    }

    .button-s{  /* Verwendung: kleine Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .button-m{  /* Verwendung: Standard Buttons */
        font-family: 'Rajdhani', system-ui, sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 110%;
        letter-spacing: +2%;
        white-space: nowrap;
    }

    .meta{  /* Verwendung: Status, Zeitangaben, Nebeninformationen  */
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: +2%;
    }

    .label{ /* Verwendung: Kategorien, Tags, UI-Bezeichnung  */
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: +3%;
    }

    .code{  /* Verwendung: technische Texte, IDs, Code, Schnittstellen */
        font-family: 'Space Mono', monospace;
        font-size: 15px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;

    }

    .code-muted{    /* Verwendung: deaktivierte / nicht aktive technische Inhalte, Nebensächliche Technische Sachen zB Inhalt eines Eingabefelds */
        font-family: 'Space Mono', monospace;
        font-size: 15px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0%;
        opacity: 0.5;

    }
    
    .lang-btn{
        display: none;
    }
    .log-btn{
        display: none;
    }
    .lang-ham{
        display: flex !important;
    }

}

@media (min-width: 511px) {

    .lang-toggle{
        display: flex !important;
    }
    

}