/*
    IK Baseline/Resets

    inspired by Bonn Process, which is partially inspired by "A Modern CSS Reset" (https://piccalil.li/blog/a-modern-css-reset/)
 */

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
   ol[role='list'] {
       list-style: none;
}

/* Reset margin and padding on lists */
ul,
ol {
   margin-top: 0;
   margin-bottom: 0;
   padding-left: 0;
}

ul:not([class]),
ol:not([class]) {
     padding-left: 1.25em;
}


/* Set core root defaults */
html:focus-within {
   scroll-behavior: smooth;
}

/* Set core body defaults */
body {
   min-height: 100vh;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
   img,
   picture {
       display: block;
       max-width: 100%;
       height: auto;
   }

/* Inherit fonts for inputs and buttons */
   input,
   button,
   textarea,
   select {
       font: inherit;
   }

/* Sensible table basics */
table {
   width: 100%;
   border: 0;
   border-collapse: collapse;
   border-spacing: 0;
}

/* Hidden means hidden */
[hidden] {
   display: none !important;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Ende Baseline Resets */

/* Fluid type scale (Utopia) */
/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1500,22,1.2,3,2,1100&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
    --step--2: clamp(0.69rem, calc(0.62rem + 0.35vw), 0.96rem);
    --step--1: clamp(0.83rem, calc(0.75rem + 0.42vw), 1.15rem);
    --step-0: clamp(1.00rem, calc(0.90rem + 0.51vw), 1.38rem);
    --step-1: clamp(1.20rem, calc(1.08rem + 0.61vw), 1.65rem);
    --step-2: clamp(1.44rem, calc(1.29rem + 0.73vw), 1.98rem);
    --step-3: clamp(1.73rem, calc(1.55rem + 0.88vw), 2.38rem);
}

/* Fluid space scale (Utopia)*/
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1500,22,1.2,3,2,1100&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {
    --space-3xs: clamp(0.25rem, calc(0.22rem + 0.17vw), 0.38rem);
    --space-2xs: clamp(0.50rem, calc(0.45rem + 0.25vw), 0.69rem);
    --space-xs: clamp(0.75rem, calc(0.67rem + 0.42vw), 1.06rem);
    --space-s: clamp(1.00rem, calc(0.90rem + 0.51vw), 1.38rem);
    --space-m: clamp(1.50rem, calc(1.35rem + 0.76vw), 2.06rem);
    --space-l: clamp(2.00rem, calc(1.80rem + 1.02vw), 2.75rem);
    --space-xl: clamp(3.00rem, calc(2.69rem + 1.53vw), 4.13rem);
    --space-2xl: clamp(4.00rem, calc(3.59rem + 2.03vw), 5.50rem);
    --space-3xl: clamp(6.00rem, calc(5.39rem + 3.05vw), 8.25rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.59vw), 0.69rem);
    --space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 1.06rem);
    --space-xs-s: clamp(0.75rem, calc(0.58rem + 0.85vw), 1.38rem);
    --space-s-m: clamp(1.00rem, calc(0.71rem + 1.44vw), 2.06rem);
    --space-m-l: clamp(1.50rem, calc(1.16rem + 1.69vw), 2.75rem);
    --space-l-xl: clamp(2.00rem, calc(1.42rem + 2.88vw), 4.13rem);
    --space-xl-2xl: clamp(3.00rem, calc(2.32rem + 3.39vw), 5.50rem);
    --space-2xl-3xl: clamp(4.00rem, calc(2.85rem + 5.76vw), 8.25rem);

    /* Custom pairs */
    --space-s-l: clamp(1.00rem, calc(0.53rem + 2.37vw), 2.75rem);
}

/* Isis' Stile */
body {
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #58585b;
    max-width: 1366px;
    margin: 0 auto;
    font-size: var(--step-0);
}

blockquote p {
    font-size: var(--step-2);
    line-height: 120%;
    color: #d6236a;
}

address {
    font-style: normal;
}

figcaption, .quelle {
    text-align:right;
}

a {
    color: #d6236a;
    text-decoration-thickness: from-font;
}

h1, h2 {
    text-align:center;
    font-weight:600;
    color: #d6236a;
}

strong {
    font-weight:600;
}

h1, h2, h3 {
    line-height: 120%;
}

h1 {
    font-size: var(--step-2)
}

h2 {
    font-size: var(--step-1);
}

h3 {
    font-size: var(--step-0);
}

h1, h2, h3, h4, h5, h6, p, ul {
    margin-bottom: var(--space-s);
}

p + h2, ul + h2 {
    margin-top: var(--space-l);
}

p, li {
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 150%;
}

.ik-page-header__header {
    background-color: white;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-s-m) 0;
}

.ik-main-nav-toggle {
    width: var(--space-xl);
    height: var(--space-xl);
    border: 0 none;
    background-color: transparent;
    background-image: url("/img/icons/burger.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--space-m) var(--space-m);
}

.main-nav-is-open {
    overflow: hidden;
}

.main-nav-is-open .ik-main-nav-toggle {
    background-image: url("/img/icons/close.svg");
}

.ik-main-nav-toggle-sibling {
    width: var(--space-xl);
    height: var(--space-xl);
}

.ik-page-header__nav {
    display: none;
}

.ik-main-nav__item, .ik-footer-nav__item {
    display: inline;
    font-size: var(--step--1);
}

.ik-main-nav {
    margin: var(--space-s-m);
    text-align: center;
}

.ik-main-nav__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.ik-footer-nav__item:not(:first-child)::before {
    content: ' | ';
}


.ik-footer-partnerlogos {
    display:flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    margin-top: var(--space-l);
    column-gap: var(--space-m);
}

@media(max-width: 1050px) {
    .main-nav-is-open .ik-page-header__nav {
        display: block;
    }

    .main-nav-is-open .ik-page-header {
        top: 0;
        bottom: 0;
        height: 100vh;
        overflow-y: scroll;
    }

    .ik-main-nav__item {
        font-size: var(--step-3);
        line-height: 200%;
    }
}

.logo {
    height: auto;
    width: 150px;
}

.home-intro {
    width: 100%;
    position: relative;
    color: black;
    text-shadow: 0 0 20px #D2D0CA;
    overflow-x: hidden; /* für Störer */
}

.home-intro h1 {
    text-align: left;
    text-transform: none;
    font-size: var(--step-2);
    font-weight: 300;
    color: black;
    text-shadow: 0 0 20px #D2D0CA, 0 0 5px #D2D0CA;
}

.home-intro h1 a {
    font-weight: 600;
}

.home-intro__bild {
    width: 100vw;
    height: 100vw;
    object-fit: cover;
}

.home-intro__text {
    position:absolute;
    top:0;
    left: 0;
    width: auto;
    padding: var(--space-s-l);
}

.home-intro__stoerer {
    transform: rotate(-6deg);
    max-width: 40ch;
    background-color: #d6236a;
    color: white;
    padding: var(--space-s);
    padding-right: var(--space-xs);
    margin-left: calc((var(--space-m-l) + var(--space-3xs))*-1);
    padding-left: calc(var(--space-s-l) + var(--space-3xs));
    margin-top: var(--space-l);
    p {
        margin-bottom: 0;
    }
}

.intro {
    font-weight: 600;
}

.leistung {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.leistung__text {
    padding: 0 var(--space-s-l);
}

.twocol-only {
    display: none;
}

.onecol-only {
    display: inherit;
}

.leistung__bilder img {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-2xs);
}

.leistung__coverimage {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-l);
}

.abschnitt {
    width: 100%;
    padding: var(--space-l) 0;
}

.content-container {
    margin: 0 auto;
    padding: 0 var(--space-s);
}

.content-container img {
    width: 80%;
    height: auto;
    margin: 0 10%;
}

.hintergrund-heller {
    background-color: rgb(250, 236, 246);
}

.hintergrund-dunkler {
    background-color: rgb(245, 186, 215);
}

footer {
    text-align: center;
    background-color: white;
    padding: var(--space-xl);
}

summary {
    font-size: var(--step-2);
    line-height: 120%;
    color: #d6236a;
    margin-bottom: var(--space-s);
    margin-top: var(--space-l);
    list-style-position:outside;
    &::after {
         content: ' → weiter lesen';
         font-size: var(--step-0);
    }
    [open] &::after {
        content: '';
    }

    &::marker {
        color:transparent;
    }
    &::-webkit-details-marker {
        width: 0.1px;
        height: 0.1px;
        margin-right: 0;
        color: transparent;
    }
}

@media (min-width: 800px) {
    .leistung {
        flex-direction: row;
    }

    .column--half {
        width: 50%;
        padding: 0;
    }

    .twocol-only {
        display: inherit;
    }

    .onecol-only {
        display: none;
    }

    .content-container {
        width: 50%;
    }

    .home-intro__bild {
        width: 100%;
        height: auto;
    }

    .home-intro h1 {
        font-size: var(--step-3);
    }
}

@media (min-width: 1050px) {
    .logo {
        width: 180px;
    }

    .ik-main-nav-toggle, .ik-main-nav-toggle-sibling {
        display: none;
    }

    .ik-page-header__header {
        justify-content: center;
    }

    .ik-page-header__nav {
        display: block;
    }

    .ik-main-nav__list {
        display: inline;
    }

    .ik-main-nav__item:not(:first-child)::before {
        content: ' | ';
    }
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}