/* inclusive-sans-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inclusive Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inclusive-sans-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* inclusive-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inclusive Sans';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/inclusive-sans-v1-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* anton-sc-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Anton SC';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/anton-sc-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --gutter-1: 1rem;
    --color-1: #62BEC1;
    --color-2: color-mix(in srgb, var(--color-1), black 35%);
    --color-3: color-mix(in srgb, var(--color-1), black 75%);
    --border: 1px solid #999;
}
*, ::before, ::after {
    box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}
body {
    font-family: 'Inclusive Sans';
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
    background-color: #fefdf7;
    background-image: radial-gradient(var(--color-1) 0.5px, #fefdf7 0.5px);
    background-size: 32px 32px;
}
.body-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "header header" "aside main" "footer footer";
    gap: var(--gutter-1);
}
section:not(:first-of-type) {
    margin: 3rem 0;
}
header {
    grid-area: header;
    text-align: center;
}
nav {
    grid-area: aside;
    background-color: var(--color-2);
    color: white;
    position: sticky;
    padding: var(--gutter-1);
    transition: all 1s ease-in-out;
    align-self: start;
    z-index: 10;
}
.scrolled nav {
    top: 0;
    bottom: auto;
}
nav a {
    color: white;
    text-decoration: none;
    padding: .5rem;
    display: block;
}
nav a.active {
    text-decoration: underline solid color-mix(in srgb, var(--color-1), white 35%) 5px;
    text-underline-offset: .3rem;
}
nav ul {
    list-style: none;
    padding-left: .5rem;
}
main {
    grid-area: main;
    padding: var(--gutter-1);
}
footer {
    grid-area: footer;
    text-align: center;
    padding: var(--gutter-1);
    display: flex;
    justify-content: space-between;
}
@media (max-width: 991.99px) {
    .body-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "aside" "main" "footer";
    }
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
}
h2.top {
    font-size: 2.1em;
    display: inline-block;
    background-image: linear-gradient(180deg, rgba(98,190,193,1) 0%, rgba(98,190,193,1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.4em;
    background-position: 0 98%;
}
h3.top {
    font-size: 1.8em;
    color: var(--color-3);
}
a {
    color: var(--color-2);
}
code:not([class]) {
    background: #ebebeb;
    padding: .125rem .25rem;
    border-radius: .25em;
}
code[class*="language-"], pre[class*="language-"] {
    white-space: pre-wrap;
}
pre[class*="language-"] {
    margin-bottom: var(--gutter-1);
}
@media (min-width: 992px) {
    pre {
        max-width: 80%;
    }
}
figure {
    margin: 0 0 2em;
}
img {
    max-width: 100%;
}
dl {
    margin: 0;
}
dd {
    margin-bottom: .5rem;
    margin-left: 0;
}
.heart {
    color: crimson;
}
.more {
    background-color: var(--color-3);
    padding: 1rem;
    margin: 2rem 0;
    color: #fff;
    a, h3 {
        color: currentColor;
    }
}
.w-5 {
    width: 1.25rem;
}
.h-5 {
    height: 1.25rem;
}
/* Grundlagen */
.grund p {
    color: blue;
}
.grund .anderefarbe {
    color: cadetblue;
}
.grund p {
    color: purple;
}
#meinDiv {
    padding: 2rem;
    background-color: #efedea;
    width: fit-content;
}
#meinDiv address {
    color: blue;
}
.meindiv address {
    color: cadetblue;
}
address {
    color: purple;
}
p.exinherit {
    border: 3px solid green;
    width: fit-content;
}
.exinherit.brd em {
    border: inherit;
}
/* Box example */
.box-example > div {
    width: 150px;
    height: 200px;
    padding: 40px;
    margin: 20px;
    border: 3px solid cornflowerblue;
    background-color: gold;
    display: flex;
    justify-content: center;
    align-items: center;
    &.standard {
        box-sizing: content-box;
    }
}
/* Border example */
.border {
    border-width: thin medium thick 10px;
    border-style: solid dashed dotted double;
    border-color: crimson lightcoral deepskyblue forestgreen;
    width: 200px;
    aspect-ratio: 1;
}
/* Flexbox */
.flex,
.flex2,
.no-flex {
    border: var(--border);
    border-radius: .5rem;
    padding: var(--gutter-1);
    margin: var(--gutter-1) 0;
}
.no-flex > div:not(:last-child) {
    margin-bottom: var(--gutter-1);
}
.flex {
    display: flex;
    gap: var(--gutter-1);
}
@media (max-width: 650px) {
    .flex {
        flex-wrap: wrap;
    }
}
.flex > div,
.flex2 > div,
.no-flex > div {
    background-color: khaki;
    padding: var(--gutter-1);
}
.flex2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}
.flex2 > div {
    flex: 0 0 calc(33.33% - 1.5rem);
}
.examplefooter {
    height: 600px;
    border: var(--border);
    display: flex;
    flex-direction: column;
}
.examplefooter > div {
    padding: var(--gutter-1);
}
.examplefooter .header {
    background-color: bisque;
}
.examplefooter .footer {
    background-color: coral;
}
.flex4 .footer {
    margin-top: auto;
}
.zentriert {
    height: 400px;
    border: var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
}
.zentriert > div {
    background-color: #3a6dc7;
    color: white;
    width: fit-content;
    padding: 2rem;
}
/* Grid */
.examplegrid {
    border: var(--border);
    padding: var(--gutter-1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gutter-1);
}
.examplegrid > div {
    background-color: lavender;
    padding: var(--gutter-1);
}
.grid-overlap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    .overlap {
        grid-column: 1;
        grid-row: 1;
        background-color: rgba(255, 255, 255, .4);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: all ease-in-out .6s;
        .h2 {
            font-size: 3rem;
        }
    }
    .background {
        grid-column: 1;
        grid-row: 1;
        img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
    }
    &:hover {
        .overlap {
            opacity: 1;
        }
    }
}
.grid-overlap-partial {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 50px 1fr 50px;
    .overlap2 {
        grid-row: 2;
        grid-column: 2 / 5;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
            padding: 4rem;
            background-color: #ededed;
            border-radius: 48% 52% 67% 33% / 30% 43% 57% 70%;
        }
    }
    .background2 {
        grid-row: 1 / 4;
        grid-column: 4 / 8;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
/* Container Queries */
.examplequery {
    height: 600px;
    padding: var(--gutter-1);
    margin-bottom: 2rem;;
    border: var(--border);
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}
.examplequery .side {
    background-color: aquamarine;
}
.examplequery .main {
    background-color: blanchedalmond;
    padding: var(--gutter-1);
}
.boxes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gutter-1);
}
.box {
    background-color: lightgrey;
    padding: var(--gutter-1);
    height: 200px;
}
@media (min-width: 500px) {
    .query2,
    .query3 {
        width: 70%;
    }
}
.query2 .boxes {
    grid-template-columns: 1fr 1fr;
}
.main {
    container-type: inline-size;
    container-name: main;
}
@container main (min-width: 400px) {
    .boxes {
        grid-template-columns: 1fr 1fr;
    }
}
.query4 {
    width: 50%;
}
.examplequery.query4 {
    grid-template-columns: 1fr;
}
/* Subgrid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 220px auto 1fr;
    grid-auto-flow: dense;
    gap: var(--gutter-1);
    margin-bottom: 3rem;
}
.blog-grid__item {
    grid-column: span 2;
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px;
    background-color: rgb(255, 255, 255);
    border-radius: 0.5rem;
    overflow: hidden;
}
.blog-grid__item h2 {
    font-size: calc(1.1rem + .5vw);
    margin: .5rem 0;
}
.blog-item__content {
    display: flex;
    flex-direction: column;
}
.blog-item__content .article-info {
    margin-top: auto;
}
.blog-grid__item .item-image img {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-grid__item .item-image {
    margin-bottom: .5rem;
    grid-row: 1;
}
.blog-grid__item > :not(.item-image) {
    padding: 0 var(--gutter-1);
}
@media (min-width: 996px) {
    .blog-grid .blog-grid__item.item-featured {
        grid-column: span 4;
        grid-template-columns: subgrid;

        > * {
            grid-column: 1 / -1;
        }
    }
}
/* Buttons */
.buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-block-end: 2rem;;
}

.btn {
    text-decoration: none;
    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border: 1px solid var(--btn-border-color);
    border-radius: .5rem;
    padding: var(--btn-gutter, 2rem);
    font-size: var(--btn-size, inherit);
    &:hover {
        color: var(--btn-hover-color);
        background-color: var(--btn-hover-bg-color);
    }
}
.btn-primary {
    --btn-color: #fff;
    --btn-bg-color: #ac0420;
    --btn-hover-color: #ac0420;
    --btn-hover-bg-color: #fff;
    --btn-border-color: #ac0420;
}
.btn-secondary {
    --btn-color: #000;
    --btn-bg-color: #bddf01;
    --btn-hover-color: #bddf01;
    --btn-hover-bg-color: #000;
    --btn-border-color: #bddf01;
}
.btn-small {
    --btn-gutter: 1rem;
    --btn-size: .9rem;
}
.btn-medium {
    --btn-gutter: 3rem;
    --btn-size: 1.5rem;
}
/* logical properties */
.lp {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    margin-block-end: 2rem;
}
.side1 {
    padding: 2rem;
    background-color: #c3acc0;
    span {
        margin-right: 3rem;
        padding: .5rem;
        border: 1px solid #000;
    }
}
.side2 {
    padding: 2rem;
    direction: rtl;
    background-color: #c3acc0;
    span {
        margin-right: 3rem;
        padding: .5rem;
        border: 1px solid #000;
    }
}
.lp.rl {
    .side1 span {
        margin-inline-end: 3rem;
    }
    .side2 span {
        margin-inline-end: 3rem;
        margin-right: unset;
    }
}
.borders {
    width: fit-content;
    aspect-ratio: 1;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-block: 3px solid crimson;
    border-inline: 3px dashed blue;
}
/* not */
.not {
    padding: 2rem;
    background-color: #ededed;
    width: fit-content;
    display: flex;
    gap: 3rem;
}
.not a:not([class]) {
    color: darkslategrey;
    text-decoration-color: gold;
    text-decoration-thickness: .2em;
    text-underline-offset: 6px;
    transition: all ease-in-out .2s;
    &:hover {
        text-decoration-thickness: .4em;
        text-underline-offset: 4px;
    }
}
/* focus */
.focus {
    padding: 2rem;
    background-color: #ededed;
    width: 80%;
    display: flex;
    gap: 3rem;
    button {
        padding: .5rem;
    }
    form {
        display: flex;
        gap: 3rem;
        flex-direction: column;
    }
}
.wf:focus {
    outline: none;
}
.fv:focus-visible {
    outline: 3px dotted crimson;
    outline-offset: .1rem;
}
/* has */
.caption {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    div {
        padding-inline: 2rem;
    }
    figure {
        max-width: 400px;
    }
}
.has {
    display: inline-block;
    img {
        border-radius: 8px;
    }
}
.has:has(figcaption) {
    padding: .5rem;
    background-color: #fff;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
.gridflex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.gridflex:has(> :last-child:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}
.gridflex > div {
    background-color: #ccc;
    padding: 1rem;
}
/* calc */
.h1 {
    font-size: calc(1.375rem + 1.5vw);
    color: crimson
}
/* clamp */
.display-1 {
    font-size: clamp(2rem, 0.3881rem + 7.1642vw, 8rem);
}
/* Nesting */
.card-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}

.card {
    padding: .5rem;
    border: 2px solid grey;
    border-radius: .5rem;
    & h2 {
        /* entspricht .card h2 */
        color: teal;
        .featured & {
        /* äquivalent zu `:is(.card h2):is(.featured h2)` */
        color: crimson;
        }
    }
}

.palette {
    display: flex;
}
.square {
    aspect-ratio: 1;
    width: min(25%, 5rem);
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Basis Farbe */
.bg-1 {
    background-color: teal;
    color: white;
}
/* 50% teal, 50% white */
.bg-2 {
    background-color: color-mix(in srgb, teal, white);
}
/* 25% teal, 75% white */
.bg-3 {
    background-color: color-mix(in srgb, teal, white 75%);
}
/* 50% teal, 50% black */
.bg-4 {
    background-color: color-mix(in srgb, teal, black);
    color: white;
}
/* 25% teal, 75% black */
.bg-5 {
    background-color: color-mix(in srgb, teal, black 75%);
    color: white;
}
/* Relative Colors */
.rc {
    --base-color: rgb(255, 30, 0);
    color: #fff;
}
.rc-1 {
    background-color: var(--base-color);
}
.rc-2 {
    background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
     /* 76.5 is 30% of 255 */
}
.rc-3 {
    background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
    /* 153 is 60% of 255 */
}
/* Prefers */
.color-scheme-a {
    padding: 3rem;
    background: #c3acc0;
    color: #671a54;
    width: fit-content;
}
@media (prefers-color-scheme: dark) {
    .color-scheme-a {
      background: #671a54;
      color: #c3acc0;
  }
}
/* Light-Dark */
.lightdark {
    color-scheme: light dark;
    padding: 3rem;
    color: light-dark(#004040, #efedea);
    background-color: light-dark(#efedea, #004040);
    width: fit-content;
}
.contrast {
    width: 100px;
    height: 100px;
    outline: 2px dashed #540297;
}
.contrast.high {
    outline: 3px solid #540297;
}
@media (prefers-contrast: more) {
    .contrast {
      outline: 2px solid #540297;
    }
}
.mask {
    mask: url(images/joomla.svg) no-repeat 50% 50%;
    img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
}
.animation {
    text-align: center;
}
svg {
    font-family: 'Anton SC', sans-serif;
    width: 100%;
    height: 100%;
}
svg text {
    text-transform: uppercase;
    animation: stroke 5s infinite alternate;
    stroke-width: 2;
    stroke: rgb(220, 20, 60);
    font-size: 100px;
}
@keyframes stroke {
    0% {
        fill: rgba(72,138,20,0);
        stroke: rgba(220, 20, 60,1);
        stroke-dashoffset: 25%;
        stroke-dasharray: 0 50%;
        stroke-width: 2;
    }
    70% {
        fill: rgba(72,138,20,0);
        stroke: rgba(220, 20, 60,1);
    }
    80% {fill: rgba(72,138,20,0);
        stroke: rgba(220, 20, 60,1);
        stroke-width: 3;
    }
    100% {
        fill: rgb(226, 108, 131, 1);
        stroke: rgba(54,95,160,0);
        stroke-dashoffset: -25%;
        stroke-dasharray: 50% 0;
        stroke-width: 0;
    }
}
