/* ANCHOR Fonts */

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-Bold.ttf) format("truetype");
  font-wight: 700;
  font-style:normal;
  font-display: swap;
}

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-BoldItalic.ttf) format("truetype");
  font-wight: 700;
  font-style:italic;
  font-display: swap;
}

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-Medium.ttf) format("truetype");
  font-wight: 500;
  font-style:normal;
  font-display: swap;
}

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-Regular.ttf) format("truetype");
  font-wight: 400;
  font-style:normal;
  font-display: swap;
}

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-Light.ttf) format("truetype");
  font-wight: 300;
  font-style:normal;
  font-display: swap;
}

@font-face {
  font-family: "VendSans";
  src: url(../Fonts/Vend_Sans/static/VendSans-LightItalic.ttf) format("truetype");
  font-wight: 300;
  font-style:italic;
  font-display: swap;
}

/* ANCHOR - Custom Properities */

body {
    --color-black: #191919;
    --color-white: #f3f3f3;
    --color-red: #f70707;
    --color-lightred: #f16363;
    --color-grey: #726e6e;
    --color-blue: #5255e7;
    --color-green: #04492c;
    --color-ligtblue: #c3daf0;

    --font: "VendSans", monospace;
    --line: 2ch;
    --font-scale: 0.4 vw;
}

/* ANCHOR - Main Style */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    font-style:normal;
    font-size: calc(1rem + var(--font-scale));
    line-height: var(--line);
    color: var(--color-black);
    background-color: var(--color-white);
}

main
{
    width: 100%;
    max-width: 1920;
    margin: 0 auto;
    padding: 24px;
    background-image: linear-gradient(var(--color-white), var(--color-lightred));
}

footer {
    width: 100%;
    max-width: 1920;
    margin: 0 auto;
    padding: 12px;
    background-color: var(--color-red);
}

header {
    width: 100%;
    max-width: 1920;
    margin: 0 auto;
    padding: 24px;
}

/* ANCHOR - Content Style */

h1
{
    color: var(--color-red);
    font-size: calc(3.5rem + var(--font-scale));
    font-weight: 400;
    line-height: var(--line);
    margin: 0;
}

h2 {
    color: var(--color-green);
    font-size: calc(1.6rem + var(--font-scale));
    font-weight: 200;
    line-height: var(--line);
    margin: 0;
}

a {
    text-decoration: none;
}

/* ANCHOR - Navigation */

nav >   ul {
    list-style:none;
    padding: 0;
    display:flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* ANCHOR - Link Colors */

.link-blue{
  cursor: pointer;
}

.link-black{
    color: var(--color-black);
}

.link-white{
    color: var(--color-white);
}

.link-red{
    color:defined ;
}

.link-grey{
    color: var(--color-grey);
}

.link-blue{
    color: var(--color-blue);
}

.link-green{
    color: var(--color-green);
}

.link-blue:hover{
    color: var(--color-black);
    background: var(--color-red);
}

.link-white:hover{
    color: var(--color-black);
    background: var(--color-red);
}

/*   ANCHOR - Text Colors */

.text-black{
    color: var(--color-black);
}

.text-white{
    color: var(--color-white);
}

.text-red{
    color: var(--color-red);
}

.text-grey{
    color: var(--color-grey);
}

.text-green{
    color: var(--color-green);
}

.text-blue{
    color: var(--color-blue);
}


/* ANCHOR - Background Colors */

.background-white{
  background-color: var(--color-white);
}

.background-blue{
  background-color: var(--color-blue);
}

.background-grey{
  background-color: var(--color-grey);
}

.background-ligtblue{
  background-color: var(--color-ligtblue);
}

.background-verlauf{
  background-image: linear-gradient(var(--color-blue), var(--color-ligtblue));
}


#page-logo{
    font-style: normal;

}

/* ANCHOR Footer style */

footer > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap:wrap;
    gap: 8px;
}

/* ANCHOR Behälter */

.seitenverhaeltnis {
    background-color: var(--color-blue);
    aspect-ratio: 1920/1080;
    width: 75%;
}

.sticky {
    position: sticky;
    top: 0;
}

.relative {
    position: relative;
    top: 0;
}

.container-center
{
  display: flex;
  justify-content: center;
  align-items: center;    
}