:root
{
    --h2-font-size: 1.5rem;
    --h2-font-weight: bold;
    --h2-font-family: 'Space Mono', sans-serif;
    --text-color: white;
    --primary-color: #FFCC00;
}

html, body
{
    margin: 0;
    padding: 0;
    background-color: #141414;
    display: flex;
    width: 100%;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}

main
{
    width: 100%;
}

a
{
  color: var(--text-color);
  &:hover
  {
	color: var(--primary-color);  	
  }
}

.agb
{
    li
    {
    	padding-bottom: 0.5rem;
    }

    ol
    {
        counter-reset: cupcake;
    }

    ol > li
    {
        counter-increment: cupcake;
    }

    ol > li::marker
    {
        content: counters(cupcake, ".") ". ";
    }

    .h2-li-number
    {

        &::marker
        {
	    font-family: var(--h2-font-family);
            font-size: var(--h2-font-size);
            font-weight: var(--h2-font-weight);
        }

        h2
        {
            display: inline-block;
	    margin-bottom: 0.5rem;
	    margin-block-end: 0.5rem;
	    margin-top: 0.5rem;
	    margin-block-start: 0.5rem;
        }
    }

    ul
    {
        list-style: inside;
    }
}

h1
{
    font-size: 3rem;
    font-weight:bold;
    color: #FFCC00;
}

h2
{
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
}


.main-container
{
    padding: 0 min(20px, 2%);
    display: flex;
    justify-content: center;
}

.start-page
{
    display: flex;
    justify-items: center;
    justify-content: center;
    min-height: 100svh;
    flex-direction: column;
}


.main-content
{
    width: min(1200px, 100vw);
}

.brand-name-font
{
    font-family: 'Dongle', sans-serif;
    font-size: min(8rem, 20svw);
    text-align:center;
    line-height: 0.8;
}

.brand-claim-font
{
    font-family: 'Space Mono', sans-serif;
    font-size: min(2rem, 6svw);
    text-align:center;
}

.image-container
{
    height: 50svh;
    display: flex;
    justify-content: center;
    justify-items: center;
    img
    {
        max-width: 95svw;
        max-height: 100%;
	object-fit: contain;
        display: block; /* Entfernt den zusätzlichen Platz unter dem Bild */
    }
}

.imprint-row-holder
{
    display: flex;
    justify-content: start;
    gap: 1rem;
}

@font-face
{
    font-family: 'Space Mono';
    font-style: normal;
    font-display: optional;
    font-weight: 400;
    src: url('fonts/space-mono/full/SpaceMono-400.woff') format('woff');
}

@font-face
{
    font-family: 'Space Mono';
    font-style: normal;
    font-display: optional;
    font-weight: 700;
    src: url('fonts/space-mono/full/SpaceMono-700.woff') format('woff');
}

@font-face
{
    font-family: 'Dongle';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('fonts/dongle/latin/Dongle-400.woff2') format('woff');
}

@font-face
{
    font-family: 'Dongle';
    font-style: normal;
    font-display: optional;
    font-weight: 700;
    src: url('fonts/dongle/latin/Dongle-700.woff2') format('woff');
}

@font-face
{
    font-family: 'Inter';
    font-style: normal;
    font-display: optional;
    font-weight: 400;
    src: url('fonts/inter/full/Inter-400.woff') format('woff');
}

@font-face
{
    font-family: 'Inter';
    font-style: normal;
    font-display: optional;
    font-weight: 700;
    src: url('fonts/inter/full/Inter-700.woff') format('woff');
}