html {
    height: 100%;
}

body {
    --brand-color: hsl(58, 88%, 50%);
    --brand-color-secondary: hsl(345, 5%, 15%);
    --brand-color-background: hsl(58, 88%, 85%);
    height: 100%;
}

header {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../media/Abschleppdienst-B7.jpg");
    height: 40svw;
    background-repeat: no-repeat;
    background-size: 100svw auto;
    background-position: center 90%;
    align-items: end;
    justify-content: end;
    position: relative;
    flex: 0 0 auto;
}


header > img {
    position: absolute;
    width: 15svw;
    bottom: 2em;
    left: 2em;
}
@media  screen and (min-width: 1536px) {
    header {
        height: 614px;
        background-size: 1536px auto;
    }
    header > img {
        width: 230px;
    }
}

.contact {
    font-size: smaller;
}

.homelink {
    padding-inline-end: 1rem;
}

hgroup {
    margin-inline-end: 1em;
    text-shadow: var(--brand-color-secondary) 2px 2px 5px;
}

nav, footer {
    background-color: var(--brand-color);
    flex: 0 0 auto;
}

nav {
    padding-inline: 1rem;
}

nav ul {
    display: flex;
    align-items: stretch;
    gap: 0.5em;
}

nav ul li {
    display: flex;
}

a {
    color: #632e07;
}
a:hover {
    color: #321703;
}
a:focus {
    outline: blue solid 2px;
    outline-offset: 2px;
}
a:focus:not(:focus-visible) {
    outline: none;
}

nav li a {
    color: black;
    background-image: linear-gradient(rgb(0 0 0/8%) 0 0);
    border-radius: 10px;
    border: 2px solid black;
}
nav li a:hover {
    background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
    text-decoration: none;
}

main {
    padding: var(--pico-spacing);
    background-color: var(--brand-color-background);
    flex: 1 1 auto;
}
@media only screen and (prefers-color-scheme: dark) {
    body {
        /*--brand-color: hsl(58, 88%, 35%);*/
        --brand-color-background: hsl(58, 88%, 45%);
    }
    main {
        color: black;
    }
    h1, h2, h3, h4, h5, h6, p, li, address, main > strong {
        color: black;
    }
    strong, p.footer {
        color: #373c44;
    }
}
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}

.footer {
    display: block;
    padding-inline-start: 1em;
    margin-bottom: unset;
    font-size: smaller;
}

.contact span {
    padding-inline-start: 0.5em;
}

@media (max-width: 576px) {
    header {
        align-items: center;
    }
    header h1 {
        font-size: x-large;
    }
    nav strong {
        font-size: 3.8svw;
    }
    header > img {
        bottom: unset;
        top: 5svw;
        left: unset;
    }
    footer {
        display: flex;
        flex-direction: column;
    }
    .footer {
        margin-bottom: var(--pico-typography-spacing-vertical);
    }
    .contact span {
        display: none;
    }
    .contact a {
        align-self: center;
        justify-self: center;
    }
    .contact svg {
        width: 3em;
    }
}

.container-fluid {
    min-height: 100%;
    padding: var(--pico-spacing);
    background: repeating-linear-gradient(
          45deg,
          var(--brand-color),
          var(--brand-color) 20px,
          var(--brand-color-secondary) 20px,
          var(--brand-color-secondary) 40px
        );
    max-width: 1536px;
    display: flex;
    flex-direction: column;
}
.header-tagline {
    padding: 2vw 4vw;
}

.header-tagline :is(h1, p) {
    color: white;
}

a.disabled {
    pointer-events: none;
}