h1 {font-size: 2rem;margin-bottom: 2rem;}
h2 {font-size: 1.5rem;margin-bottom: 1.5rem;}
h3 {font-size: 1.2rem;margin-bottom: 1.2rem;}
p {font-size: 1rem; margin-bottom: 1rem;}
.bg {background-color: burlywood; color: beige;}

/* BASIC LAYOUT */
.content-grid {
    --padding_inline: 2rem;
    --content_max_width: 70ch;
    --breakout_max_width: 85ch;

    --breakout_size: calc((var(--breakout_max_width) - var(--content_max_width)) / 2);    
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding_inline), 1fr) [breakout-start] minmax(0, var(--breakout_size)) [content-start] min(100% - (var(--padding_inline) * 2), var(--content_max_width)) [content-end] minmax(0, var(--breakout_size)) [breakout-end] minmax(var(--padding_inline), 1fr) [full-width-end];
    
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
    grid-column: content;
}
.content-grid > .breakout {
    grid-column: breakout;
}
.content-grid > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
}

/* POSITIONING WITH GRID */
.overlap-sample {
    border: 1px solid #ccc;
}
.overlap-sample > * {
    margin: 0;
    padding: 0;
}
.overlap-sample h1 {
    font-size: 3rem;
    color: cornflowerblue;
}
.overlap-sample img {
    width: 20rem;
    filter: drop-shadow(0 0 1rem black);
}

.overlap-sample {
    display: grid;
    grid-template-areas: "title" "text" "image";
    gap: 1rem;
    position: relative;
}
.overlap-sample h1 {
    grid-area: title;
     /*z-index: 1; holt die HL ohne position nach vorne */
}
.overlap-sample p {
    grid-area: text;
}
.overlap-sample img {
    grid-area: image;
}
.overlap-sample svg {
    position: absolute; /* parent muss pos relative haben */
    grid-column: text-start;
    grid-row: text-start;
    justify-self: flex-end;
    width: 9rem;
}


@media (min-width: 540px) {
    .overlap-sample {
        grid-template-areas: revert;
        grid-template-columns: [title-start text-start] 1fr [text-end image-start] 1fr [title-end image-end];
        grid-template-rows: [title-start] auto [image-start] 50px [title-end text-start] auto [image-end text-end];
    }

    
}