* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family:Segoe UI, sans-serif;
  text-decoration: none;
  list-style: none;
color:#111111;





}


@font-face {
  font-family:'segoe ui';
  src: url('assets/fonts/Segoe UI.ttf')format('truetype'); 
}



.text-smaller {font-size: clamp(0.878rem, 0.9055rem + -0.0879vw, 0.8rem);}
.text-bigger {font-size: clamp(1rem, 0.8018rem + 0.6344vw, 1.563rem);}
.intro-text{letter-spacing:10%;color:#888888;}


h1 {font-size: clamp(1.476rem, 0.4992rem + 3.1256vw, 4.25rem)}
h2 {font-size: clamp(1.383rem, 0.7953rem + 1.8806vw, 3.052rem)}
h3 {font-size: clamp(1.296rem, 0.8928rem + 1.2901vw, 2.441rem)}
h4 {font-size: clamp(1.215rem, 0.9551rem + 0.8315vw, 1.953rem)}
h5 {font-size: clamp(1.138rem, 0.9884rem + 0.4789vw, 1.563rem)}
h6 {font-size: clamp(1.067rem, 1.0026rem + 0.2062vw, 1.25rem)}


a{color:#FF69B4;}
a:hover{color:#8739fa;}

h1, h2, h3  {font-family:'Segoe UI.ttf',sans-serif;
letter-spacing: 10%;  font-weight: 300; color:#FF69B4;
}


h1, h2 {padding-top:1rem;padding-bottom:1rem}


hr {border: 0;
    height: 1px;
	height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

.pfeil {display: flex;
  justify-content: center;
  align-items: center;

font-size:2rem; color:#FF69B4;}
a.pfeil:link{color:#FF69B4;}
a.pfeil:hover{color:#8739fa;}


.header {
  position: sticky;
  top: 0;
  width: 100%;

  box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
  background-color: #ffffff;
  z-index: 10;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

.frame {
 display: block; 
 width: 100%;
 height: auto;

 border: 6px double #e7e7e7;
 
 background:red;
 padding: 6px;
}

.mediaobject{
    border: 3px dotted #FF1493; padding:1em;
}

figure {
  margin: 0;
}


p {
  line-height: 1.4;
  margin-bottom: 0;
}


.container {
  position: relative;
}

.grid {
  padding: 40px 0;
  
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: [start] minmax(20px, 1fr) [wrapper-start] repeat(12, minmax(0, 70px)) [wrapper-end] minmax(20px, 1fr) [end];
    grid-gap: 20px;
  }
}

.grid__media {
  grid-column: var(--mediaStart, wrapper-start) / var(--mediaEnd, 8);
}

.grid__text {
  grid-column: var(--textStart, 8) / span var(--textSpan, 6);
  padding: 20px;
  
  @media (min-width: 768px) {
    padding: 0;
  }
}

.grid__media,
.grid__text {
  grid-row: 1; // We want to keep our items on the same row
}

.grid--2,
.grid--4 {
  --mediaStart: 8;
  --mediaEnd: 14;
  --textStart: wrapper-start;
}


@media(min-width: 960px) {
  .grid {
    --mediaStart: wrapper-start;
    --mediaEnd: 9;
    --textStart: 10;
    --textSpan: 4;
  }
  
  .grid--2 {
    --mediaStart: 9;
    --mediaEnd: end;
    --textStart: wrapper-start;
  }

  .grid--2,
  .grid--4 {
    --mediaStart: 8;
  }

  .grid--3 {
    --mediaStart: start;
  }

  .grid--4 {
    --mediaEnd: wrapper-end;
    --textStart: 3;
  }
}


.grid--bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  div {
    background-color: #ECEFF1;
  }
}


.it-card-container {
    --it-card-padding: 1.5rem;
    --it-card-border-radius: 12px;
    --it-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

    background: #ffffff;
    border-radius: var(--it-card-border-radius);
    overflow: hidden;
    box-shadow: var(--it-card-shadow);
    transition: transform 0.2s ease-in-out;
margin-bottom:10px;
}