body   		{font-family: Arial; background-color: #232324; color: white}
p      		{color: #ffff; font-size: 16px; }
a         { color:#a5e2fa; }
a:hover   { color: #2ea1ff; }
h1, h2 		{color: #a5e2fa; text-align: center;}
h1     		{font-size: 30px;}
h2     		{font-size: 25px;}
h4, h3 {margin-bottom: 5px;}

#box {
    margin-left: auto;
    margin-right: auto;
    width: 700px;
}

.site-header {
  width: 100%;
  overflow: hidden;
}

.header-img {
  width: 100%;       /* volle Breite */
  height: auto;      /* Höhe passt sich proportional an */
  max-height: 350px; /* maximale Höhe für Desktop */
  object-fit: cover; /* füllt den Bereich ohne Verzerrung */
}

.circle-list {
  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: circle;
  list-style-position: inside; /* Punkt direkt neben dem Text */
}

#Praxiserfahrungen {
  text-align: center;
  list-style-position: inside;
  background-color: rgba(255, 255, 255, 0.03);
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 30px;
  box-shadow: 10px 10px 10px #121212;
  width: 560px; height: 212px;
  margin-left: auto; margin-right: auto;
  border: 4px solid #343969;
}

#praxis {
  margin-bottom: 10px; margin-top: 15px;
}

#profil {
margin: 20px ;
font-size: 50px;
font-family: 'Licorice', cursive;
margin-top: 25px; 
margin-bottom: 0px;
}

.fa-brands fa-linkedin-in {
  color: #fff;
}

#Stärken {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center;     /* Vertikal zentrieren */
  text-align: center;      /* Text innerhalb zentrieren */
  flex-direction: column;  /* Titel über der Liste */
  background-color: rgba(255, 255, 255, 0.03); width: 560px; height: 330px; 
  border-radius: 30px;
  margin-left: auto; margin-right: auto; 
  box-shadow: 10px 10px 10px #121212;
  margin-left: auto; margin-right: auto;
  border: 4px solid #343969;
}

#lebenslauf {
margin-top: 30px;
margin-bottom: -20px;
}

.kenntnisse {
margin-bottom: 10px;
margin-top: -10px;


}

#center {
    text-align: center;
    margin-bottom: 15px;
}

p#center {
  text-decoration: none;
  color: #fff;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 650px;
  margin: 50px auto;
}

p {
  font-weight: 300;
  line-height: 1.5;
  font-size: 14px;
  opacity: 0.8;
  color: #fff;
}


.timeline {
  position: relative;
  padding-left: 4rem;
  margin: 0 0 0 30px;
  color: white;

  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    width: 4px;
    height: 70%;
    background: #343969;
}

  .timeline-container {
    position: relative;
    margin-bottom: 2.5rem;
    box-shadow: 10px 10px 10px #121212;

    .timeline-icon {
      position: absolute;
      left: -88px;
      top: 4px;
      width: 50px;
      height: 50px;
      text-align: center;
      font-size: 13px;

      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .timeline-body {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 3px;
      padding: 20px 20px 15px;
      box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.1);

      &:before {
        content: "";
        background: inherit;
        background: rgba(255, 255, 255, 0.03);
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: -10px;
        transform: rotate(45deg);
        border-radius: 0 0 0 2px;
        background:  #2C2F2E;
      }

      .timeline-title {
        margin-bottom: 1.4rem;

        .badge {
          background: #343969;
          padding: 4px 8px;
          border-radius: 10px;
          font-size: 12px;
          font-weight: bold;
        }
      }

      .timeline-subtitle {
        font-weight: 300;
        font-style: italic;
        opacity: 0.4;
        margin-top: 16px;
        font-size: 11px;
      }
    }
  }
}
.social-links {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 85px;
    margin-top: 30px;
}
.social-links a {
    font-size: 18px;
    display: inline-block;
    background: #2375fa;  /* LinkedIn-Blau */
    color: #fff;
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
    
}

.social-links a i {
    font-size: 21px;
    line-height: -20px; /* vertikal zentriert */
    color: #fff;
    
}


.author {
  font-family: inherit;
  padding: 3em;
  text-align: center;
  width: 100%;
  color: white;

  a:link,
  a:visited {
    color: white;
    &:hover {
      text-decoration: none;
    }
  }
  .btn:link,
  .btn:visited {
    margin-top: 1em;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
    font-weight: 100;
    color: white;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: black;
    padding: 1.5em 2rem;
    border-radius: 1em;
    transition: 0.5s all;
    &:hover,
    &:focus,
    &:active {
    background-color: lighten(black, 10%);
    }
  }
}

.download-btn { 
  display: inline-block; 
  padding: 10px 20px; 
  background-color: #7079c9; 
  color: white; 
  border-radius: 30px; 
  text-decoration: none; 
  font-weight: bold; 
  border: none; 
  text-align: center; 
} 

.download-btn:hover { 
  background-color: #343969; 
} 

#button { 
  text-align: center; 
  margin-top: 40px; 
  margin-top: 10px; 
}

.social-links {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -30px;
  padding-top: 10px;
}

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700|Oswald:400,300,700");

body {
  background: #252827;
  font-size: 16px;  
}

strong {
  font-weight: 600; 
}


#content {
  margin-top: 50px;
  text-align: center; 
}

.Ptimeline {
  border-left: 4px solid #343969;
  border-top-right-radius: 30px;    /* oben rechts gerundet */
  border-bottom-right-radius: 30px; /* unten rechts gerundet */
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Source Sans Pro', sans-serif;  
  margin: 50px auto;  
  letter-spacing: 0.5px;   
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;   
  padding: 50px;   
  list-style: none;
  text-align: left;  
  font-weight: 100; 
  width: 560px;
  box-shadow: 10px 10px 10px #121212;
}


.Ptimeline .event {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 25px;
  margin-bottom: 50px;  
  position: relative;
}

.Ptimeline .event:last-of-type { 
  padding-bottom: 0;
  margin-bottom: 0; 
  border: none;      
}

.Ptimeline .event::before,
.Ptimeline .event::after {
  position: absolute;
  display: block;
  top: 0;
}

.Ptimeline .event::before {
  left: -240px;    
  color: rgba(255, 255, 255, 0.4);    
  content: attr(data-date);
  text-align: right;
  font-weight: 100;    
  font-size: 0.9em;
  min-width: 120px;
}

.Ptimeline .event::after {
  box-shadow: 0 0 0 4px #343969;    
  left: -57px;        
  background: #2a2d2c;    
  border-radius: 50%;  
  height: 11px;
  width: 11px;
  content: "";
  top: 5px;
}

.titleP {
  font-size: 30px;
  margin-top: -10px;
  margin-bottom: -40px;
}

.unterüberschrift {
  margin-bottom: 10px;
  font-size: 30px;
}

#MZP {
margin-bottom: 50px;
font-size: 14;
}

#footer {
  background-color: #343969;
  padding: 20px
}

#impressumH1 {
  font-family: 'Licorice', cursive;
  font-size: 50px;
}

#IMPÜ1 {
  font-size: 15px;
  margin-bottom: 10px;
}

#IMPÜ {
  font-size: 15px;
  margin-bottom: 30px;
}

#textI {
font-size: 15px;
text-align: center;
}

#PIE {
 margin-top: 10px;
 margin-bottom: 10px;
}

#Copyright {
  margin-top: 10px;
}