/*//////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                            //
//   copyright (c) 2025-2026, marcus fehse                                                    //
//   all rights reserved.                                                                     //
//                                                                                            //
//   this file is part of a responsive website coded for   kitzretterTEAM.de   by             //
//                                                                                            //
//        marcus fehse <marcus@fehse.com>                                                     //
//                                                                                            //
//                                                        last edited on 11–JUN-2026 by mrx   //
//                                                                                            //
//////////////////////////////////////////////////////////////////////////////////////////////*/

@charset 'UTF-8';

@import url('../fonts/merriweather.css');

/* ----- variables ----- */

:root {
    --background-color: #002211FF;
    --deep-background-color: #000000FF;
    --duration-fadein: 2s;
    --font-family: 'Merriweather', georgia, serif;
    --font-size: var(--font-size-base); /* TODO(mrx): check @media too */
    --font-size-base: calc(1.0vmax + 1.0vmin);
    /* --font-size-base: 2.0vmax; */
    --full-line: 1.2rem;
    --letter-spacing: 0.01333rem;
    --line-height: calc(var(--font-size) * 1.75);
    --link-color: #FFCC00FF;
    --link-color-alternative: #FF3399CC;
    --scroll-factor: 3.0;
    --spot-color: #FFFFFFCC;
    --text-color: #FFEECCCC;
}

/* ----- website style ----- */

html { /* foundation */
    background-color: var(--background-color);
}

body { /* the content */
    color: var(--text-color);
    margin: 6.66667vw 10.0vw 0;
}

header div {
    font-size: 0.83333em;
    line-height: 1.66667em;
    text-align: right;
}

header img {
    height: auto;
    margin-bottom: 2.0em;
    opacity: 0.83333;
    width: 50.0vw;
}

header .phonenumber {
    font-size: 1.0em;
    line-height: 1.66667em;
}

canvas {
    left: 0;
    position: absolute;
    top: 0;
    z-index: -999;
}

footer {
    bottom: 0;
    color: var(--spot-color);
    opacity: 0.83333;
    position: initial;
    text-align: center;
    width: 100%;
    z-index: 999;
}

* {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: 300;
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height);
    padding: 0;
}

a {
    color: var(--link-color);
    font-weight: 400;
    padding: 0 calc(0.125 * var(--tab-size));
    text-decoration: none;
}

a:visited {
    color: var(--link-color-alternative);
}

a:hover,
a:focus,
a:active {
    color: var(--link-color-alternative);
    font-weight: 600;
}

input {
    field-sizing: content;
    padding-left: 2.0 em;
    text-align: right;
}

input[type='checkbox'] {
    height: 1.0em;
    width: 1.0em;
}

input[type='number'] {
    width: 3.33333em;
}

table {
    border-collapse: collapse;
}

td {
    padding: 0.25em;
    vertical-align: top;
}

.bold {
    font-weight: bold;
}

.bottom {
    vertical-align: bottom;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.fade-in {
    -moz-animation: fadein var(--duration-fadein); /* firefox < 16 */
    -ms-animation: fadein var(--duration-fadein); /* internet explorer */
    -o-animation: fadein var(--duration-fadein); /* opera < 12.1 */
    -webkit-animation: fadein var(--duration-fadein); /* safari, chrome and opera > 12.1 */
    animation: fadein var(--duration-fadein);
}

.scroll-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 1;
}

.scroll-text {
    display: inline-block;
    font-size: calc(var(--font-size) * var(--scroll-factor));
    height: 100%;
    line-height: calc(var(--line-height) * var(--scroll-factor));
    padding: calc(1.33333 * var(--full-line)) 0;
    text-align: center;

    /* animation properties */
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);

    -moz-animation: my-animation 20.0s 3.33333s linear infinite;
    -webkit-animation: my-animation 20.0s 3.33333s linear infinite;
    animation: my-animation 20.0s 3.33333s linear infinite;
}

.flex-container {
    /* background-color: #FF00FF33; */
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.333333 * var(--full-line));
    justify-content: space-around;
    padding: calc(2.0 * var(--full-line)) calc(0.66667 * var(--full-line));
    position: relative;
    text-align: center;
}

.flex-container div {
    /* background-color: #FFFF0066; */
    padding: 0 calc(0.66667 * var(--full-line));
}

@media screen and (orientation: landscape) {
    #inPortrait {
        display: none;
    }
}

@media screen and (orientation: portrait) {
    body {
        margin: 5.0vw 6.66667vw 0;
    }

    #inLandscape {
        display: none;
    }
}

@-moz-keyframes my-animation { /* for firefox */
    from { -moz-transform: translateY(100%); }
    to { -moz-transform: translateY(-100%); }
}

@-webkit-keyframes my-animation { /* for chrome */
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(-100%); }
}

@keyframes my-animation {
    from {
        -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    to {
        -moz-transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}