/* General Styles */
/* Allgemeiner Fließtext */
body {
  font-family: 'Roboto', sans-serif;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

#cookie-banner {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 15px 10px; /* Reduziertes Padding für kleinere Bildschirme */
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
  line-height: 1.5;
  z-index: 9999; /* Höchste Z-Index-Ebene, damit der Banner über allem liegt */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column; /* Inhalte vertikal anordnen */
  align-items: center; /* Inhalte zentrieren */
  justify-content: center; /* Vertikale Zentrierung */
}

#cookie-banner p {
  margin: 0 0 10px; /* Abstand zum Button */
}

#cookie-banner button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
}

#cookie-banner button:hover {
  background-color: #2980b9;
}


/* Überschriften */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #222;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}

h2 {
  font-size: 1.8em;
  margin-bottom: 15px;
}

h3 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Listenpunkte */
ul {
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  color: #555;
  line-height: 1.6;
}

/* Wrapper Layout */
.wrapper {
  height: 100%;
}

.left {
  background-color: #F1EBE5; 
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  height: 100%;
  position: fixed;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile {
  text-align: center;
  width: 85%;
}

.profile-photo {
  width: 300px; /* Größe des Fotos */
  height: 300px;
  border-radius: 50%; /* Rundes Profilbild */
  margin-bottom: 20px;
  border: 10px solid #ffffff; /* Weißer Rand */
}

.profile h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8em; /* Größer für besseren Fokus */
  color: #C22521;
  text-transform: uppercase;
}

.profile p {
  font-family: 'Roboto', sans-serif;
  font-size: 0.95em; /* Einheitlicher Fließtext */
  color: #000000;
}


.buttons {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.buttons .btn {
  display: flex; /* Flexbox für einfache Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  background: #C22521; /* Hintergrundfarbe */
  color: #FFFFFF; /* Textfarbe */
  padding: 10px; /* Innenabstand */
  border-radius: 5px; /* Abgerundete Ecken */
  text-decoration: none; /* Keine Unterstreichung */
  font-size: 1em; /* Einheitliche Schriftgröße */
  text-align: center; /* Zentrierter Text */
  line-height: 1; /* Verhindert ungewollte Zeilenhöhe */
  height: auto; /* Passt sich dynamisch an den Inhalt an */
  min-height: 45px; /* Optional: Einheitliche Mindesthöhe für Buttons */
  text-transform: uppercase;
}

.buttons .btn:hover {
  background: #4D4D4D;
  color: #FFFFFF;
}

.social-media {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-media img {
  width: 40px; /* Größe der Icons */
  height: 40px;
  border-radius: 0; /* Keine Rundungen */
  transition: transform 0.2s ease;
}

.social-media img:hover {
  transform: scale(1.15); /* Vergrößerung beim Hover */
}

.qr-code {
  margin-top: 20px;
  text-align: center;
  padding: 20px;
  background-color: #4D4D4D; 
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qr-code img {
  width: 180px; /* Größerer QR-Code */
  height: 180px;
  border-radius: 0; /* Keine Rundungen */
  margin-bottom: 10px;
}

.qr-code p {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 1);
}

/* Right Section */
.right {
  float: right;
  height: 100%;
  position: relative;
  width: 66.66%;
}

.inner {
  margin: 0 auto;
  max-width: 975px;
  padding: 3em;
}

/* Über Mich Section */
#about {
  background: #FAF6F4;
  Color: #000000;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 1200px;
  text-align: left;
}

.about-container {
  display: flex;
  align-items: flex-start; /* Text und Bild am oberen Rand ausrichten */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px; /* Horizontaler und vertikaler Abstand zwischen den Elementen */
}

.about-photo {
  flex: 1;
  max-width: 40%;
  text-align: center;
  margin-right: 20px; /* Abstand rechts vom Bild */
}

.about-photo img {
  width: 100%;
  max-width: 300px;
  border-radius: 10px;
  filter: grayscale(100%);
}

.cta-text {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em; /* Gleiche Schriftgröße wie die kleinste im linken Frame */
  color: #9D9490;
  margin-top: 15px;
  line-height: 1.5;
}

.cta-text a {
  color: #C22521;
  text-decoration: none;
}

.cta-text a:hover {
  text-decoration: underline;
}

.about-text {
  flex: 2;
  max-width: 60%;
}

.about-text h1 {
  font-size: 2em;
  margin-bottom: 20px;
  Color: #C22521;
  text-transform: uppercase;
}

.about-text p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.mission-block {
  background: #E6DCD5; 
  Color: #000000; 
  padding: 15px;
  border-radius: 10px;
  font-size: 1.1em;
  line-height: 1.6;
}

.about-text H3{
  Color: #000000; 
  text-transform: uppercase;
}

#work-experience {
  margin: 50px 0;
}

#work-experience h1 {
  Color: #B6AEAA;
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 20px;
}

.job {
  margin-bottom: 40px;
}

.job h2 {
  font-size: 1.5em;
  color: #4D4D4D;
  margin-bottom: 10px;
}

.job p {
  font-size: 1em;
  color: #555;
  margin-bottom: 10px;
}

.job ul {
  margin: 0;
  padding: 0 20px;
  list-style-type: disc;
}

.job ul li {
  margin-bottom: 10px;
  font-size: 1em;
  line-height: 1.5;
}


#qualifications, #publications, #personal-interests {
  font-family: 'Roboto', sans-serif;
  color: #333;
}

.qualifications-list li strong,
.publication-list li a {
  color: #3498db; /* Einheitliche Farbakzente */
  font-weight: 600;
}

#qualifications {
  margin: 50px 0;
  padding: 20px;
  background: #FAF6F4;
  border-radius: 10px;
}

#qualifications h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2em;
  margin-bottom: 20px;
  Color: #666666; 
  text-transform: uppercase;
}

.qualifications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.qualifications-list li {
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: #555;
}

.qualifications-list li strong {
  font-weight: 600;
  color: #333;
}

.qualifications-list li span {
  display: block;
  margin-top: 5px;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}

#skills {
  margin: 50px 0;
  padding: 20px;
  background-color: #4D4D4D;  
  border-radius: 10px;
  text-align: center;
}

#skills h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2em;
    Color: #F0F0F0;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.skill-set {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.skill-set li {
  background: #F0F0F0;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 5px;
  text-align: center;
text-transform: uppercase;
  transition: transform 0.2s ease, background 0.2s ease;
}

.skill-set li:hover {
  background: #FAF6F4; 
  color: #FFFFFF;
  transform: scale(1.05); 
}

#publications {
  margin: 50px 0;
  padding: 20px;
  background: #FAF6F4;
  border-radius: 10px;
}

#publications h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2em;
  Color: #666666; 
  text-transform: uppercase;
  margin-bottom: 20px;
}

.publication-list {
  list-style-type: disc;
  margin: 0;
  padding: 0 20px;
  font-family: 'Roboto', sans-serif;
}

.publication-list li {
  margin-bottom: 15px;
  font-size: 1em;
  line-height: 1.6;
  color: #555;
}

.publication-list li a {
  color: #3498db;
  text-decoration: none;
}

.publication-list li a:hover {
  text-decoration: underline;
}

#personal-interests {
  margin: 50px 0;
  padding: 20px;
  background: #FAF6F4;
  border-radius: 10px;
  text-align: left;
}

#personal-interests h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2em;
  Color: #666666; 
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

.interests-list {
  list-style-type: disc;
  margin: 0;
  padding: 0 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: #555;
}

.interests-list li {
  margin-bottom: 10px;
}

.interests-list li strong {
  color: #3498db;
  font-weight: 600;
}

footer {
  background-color: #E6DCD5;
  color: #555;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.8em;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}

footer a {
  color: #C22521;
  text-decoration: none;
  margin: 0 5px;
}

footer a:hover {
  text-decoration: underline;
}

#impressum, #datenschutz {
  padding: 50px 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin: 50px auto;
  max-width: 800px;
  font-size: 0.9em;
  line-height: 1.6;
}

#impressum h1, #datenschutz h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8em;
  color: #222;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {

#cookie-banner {
    padding: 10px;
  }

  #cookie-banner p {
    font-size: 0.8em; /* Kleinere Schriftgröße für den Text */
  }

  #cookie-banner button {
    font-size: 0.9em; /* Leicht kleinere Button-Schrift */
    padding: 10px 15px;
  }

  /* Linker Frame wird oben dargestellt */
  .left {
    position: relative;
    width: 100%; /* Vollbreite für den linken Frame */
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Horizontaler Rahmen */
    padding: 20px;
  }

  /* Rechter Frame folgt direkt unter dem linken Frame */
  .right {
    position: relative;
    width: 100%; /* Vollbreite */
    padding: 20px;
    margin-top: 20px; /* Abstand zwischen linkem und rechtem Frame */
    display: block; /* Sicherstellen, dass der Inhalt sichtbar ist */
  }

  .inner {
    max-width: 100%; /* Volle Breite nutzen */
    padding: 20px;
  }

  /* Inhalte im rechten Frame */
#about {
    width: 125%; /* Block geht über die volle Breite */
    padding: 0px; /* Innenabstand für den Block */
    margin: 0 auto; /* Zentriert den Block */
    background: #FAF6F4; /* Hintergrundfarbe bleibt */
    border-radius: 10px; /* Einheitliches Design */
  }

  .about-container {
    width: 125%; /* Container geht über die volle Breite */
    display: flex;
    flex-direction: column; /* Inhalte untereinander anordnen */
    align-items: center; /* Zentriert Bild und Text */
    gap: 20px; /* Abstand zwischen Bild und Text */
  }

  .about-photo img {
    width: 100%; /* Bild geht über die volle Breite */
    max-width: 300px; /* Maximale Breite */
    border-radius: 10px; /* Einheitliches Design */
  }

  .about-text {
    width: 100%; /* Textcontainer geht über die volle Breite */
    /* max-width: 300px;  Maximale Breite */
    /* text-align: center; Text zentriert */
  }

  .mission-block {
    width: 100%; /* Mission-Block ebenfalls über die volle Breite */
    /* max-width: 300px;  Maximale Breite */
    margin-top: 20px;
    /* text-align: center; Text zentriert */
  }

  #work-experience {
    padding: 0 20px; /* Innenabstand links und rechts */
    margin-top: 20px; /* Abstand nach oben */
  }


}