/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg: black;
  --color-text: white;
  --color-primary: #0c7500;
  --font-family: "Avenir", "Gill Sans", sans-serif;
}

html,
body {
  height: 100%;
  background-size: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
}

/* Link-Farbe anpassen */
a {
  color: var(--color-primary);
}

/* Text-Auswahl farblich anpassen */
::selection {
  background: var(--color-primary);
  color: white;
}

/* Menü Buttons */
.home-icon {
  /* Rechteck unten rechts */
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-bg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.home-icon:hover {
  background-color: rgba(12, 117, 0, 0.1);
  border-color: var(--color-primary);
}
.scroll-to-top {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.scroll-to-top:hover {
  background-color: rgba(12, 117, 0, 0.1);
  border-color: var(--color-primary);
}

/* --------------------------------- */
/* Section 1, Hi i'm Sina */
/* --------------------------------- */

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding-left: 20%;
}

.hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 2rem;
  width: 50%;
}

.hero-heading-wrapper {
  overflow: hidden;
  height: 12vw; /* oder z. B. 130px, je nach Design */
  display: inline-block;
  z-index: 1000;
}

.hero-heading {
  transform: translateY(120%);
  transition: transform 1s ease-out;
  display: inline-block;
}

.hero-heading.animate-in {
  transform: translateY(0%);
}

.hero-heading-wrapper h1 {
  font-size: clamp(12vw, 12vw, 20vw); /* (min, preferred, max) */
  font-weight: 800;
  line-height: 1.2;
}

.hero-content h2 {
  font-size: clamp(7vw, 7vw, 10vw); /* (min, preferred, max) */
  font-weight: 800;
  line-height: 1.2;
}

.hero-content h2 .dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--color-primary);
  margin-left: 12px;
}

.hero-content p {
  font-family: var(--font-family);
  font-size: 1.5rem;
  margin-top: 2vw;
  color: var(--color-text);
  line-height: 1.6;
}

/*
Responsives Design sowohl in Breite und Höhe skalierbar. Bild bleibt immer rechts und in Viewport höhe, der Text H1 und H2 wird bis tabletgröße Proportional angepasst, ab tabletgröße gibts neue Werte für die proportionale (clamp) Anpassung. Außerdem ändert sich dort die Breite vom Hero-Content container, damit die Textumbrüche vom p absatz ohne <br> funktionieren und die Schriftgröße vom p. Der Text ist außerdem nach unten versetzt, damit er nicht über meinem Gesicht klebt.
*/

@media screen and (max-width: 768px) {
  .hero-heading-wrapper {
    height: 20vw;
  }

  .hero-content {
    padding-left: 2%;
    padding-right: 2%;
    width: 80%;
    padding-top: clamp(40vh, 40vh, 50vh);
  }

  .hero-content h1 {
    font-size: clamp(20vw, 20vw, 30vw); /* (min, preferred, max) */
    line-height: clamp(1.2, 1.2, 1.2); /* (min, preferred, max) */
  }

  .hero-content h2 {
    font-size: clamp(10vw, 10vw, 14vw);
  }

  .hero-content p {
    font-size: 1rem;
  }
}

/* Green Cursor and Blinking Dot, used in script.js */

.cursor-container {
  display: inline-flex;
  align-items: baseline; /* statt center */
  gap: 6px;
  margin-left: 8px;
}

.cursor-dot {
  width: 15px;
  height: 15px;
  background-color: var(--color-primary);
  display: inline-block;
}

.cursor-blink {
  color: var(--color-primary);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.typewriter-start {
  visibility: hidden;
}

.typing-active {
  visibility: visible;
}

/* ------------------------- */
/* PROJECTS */
/* ------------------------- */

.projects {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5%;
  flex-wrap: wrap;
}

.projects-bg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

/* Skaliert das Hintergrundbild auf kleinen Bildschirmen nach oben neben die Überschrift */
@media screen and (max-width: 768px) {
  .projects-bg {
    width: 100%;
    height: auto;
    top: 0;
    transform: none;
  }
}

.projects-content {
  position: relative;
  z-index: 2;
  padding: 5rem 2rem 0 2rem;
}

.project-card {
  flex: 0 0 20rem;
  aspect-ratio: 1 / 1;
  border: 2px solid #ffffff;
  color: white;
  background-color: #00000080;
  padding: 1rem;
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
}

.project-img {
  width: 100%;
  height: 50%;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.project-info h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.project-info p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.project-btn {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.project-btn:hover {
  color: var(--color-primary);
}

.project-grid {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* view all projects button */
.all-btn {
  display: inline-block;
  right: 0;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.all-btn:hover {
  color: var(--color-primary);
}


/* ------------------------- */
/* Experience & Education */
/* ------------------------- */

.experience {
  position: relative;
  width: 100%;
  text-align: left;
  padding-left: 5rem;
  padding-top: 10%;
  padding-right: 0rem;

}
.experience-content {
  display: flex;
  align-items: flex-start;
  flex: 2;
}

.experience-item {
  width: 100%;
}

@media screen and (max-width: 400px) {
  .experience-education-wrapper {
    width: 100%;
  }

  .experience-content {
    max-width: 100%;
  }

}


/* Timeline */
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 0rem 2rem;
  list-style: none;
  max-width: 900px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px; /* Passe das ggf. an je nach Padding/Position */
  width: 3px;
  height: 0%;
  background-color: var(--color-primary);
  transition: height 0.3s ease-out;
  height: var(--timeline-progress, 0%);
}


.timeline .event {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 0px;
  display: flex;
  align-items: center; /* ✨ zentriert Bild+Text zum Marker */
  gap: 2rem;
}

/* 📅 Datum von */
.timeline .event::before {
  content: attr(data-date-from);
  position: absolute;
  left: -7.5rem;
  transform: translateY(-50%);
  transform: rotate(-90deg);
  font-size: 1rem;
  color: rgb(255, 255, 255);
  line-height: 1.2;
}

/* 📅 Datum bis (neu) */
.timeline .event .date-to {
  position: absolute;
  left: -6rem;
  transform: translateY(-50%);
  transform: rotate(-90deg);
  font-size: 1rem;
  color: rgb(255, 255, 255);
  line-height: 1.2;
}

.timeline .event > div {
    min-width: 0; /* Damit der Text bei flex-shrink nicht überläuft */
}

/* Sicherheitshalber auch die größeren Flex-Container */
.experience-content,
.experience-education-wrapper,
.timeline {
  min-width: 0;
}

/* 🟩 Rechteck (wird jetzt nicht mehr überschrieben!) */
.timeline .event::after {
  content: "";
  position: absolute;
  left: -40px;
  width: 15px;
  height: 15px;
  background-color: var(--color-primary);
}


/* 🖼️ Bild */
.timeline .event img {
  max-width: 80px;
  max-height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  /* transform: translateY(-50%) entfällt – jetzt per Flex zentriert */
}


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

  /* Timeline Logo über Text */ 
  .timeline .event {
    flex-direction: column;
    align-items: flex-start; /* linksbündig */
    gap: 1rem;
  }

  /* Experience Education wrap */ 
  .experience-education-wrapper {
    flex-direction: column;
    gap: 2rem;
  }
  
  
}

/* Timeline bleibt links wie bisher */

.education-content {
  flex: 1;
  max-width: 30%;
  padding-top: 5rem;
  margin-right: 1rem;
}


.education-item {
  margin-bottom: 6rem; /* Abstand zwischen den Items vergrößert */
  padding-left: 1rem;
  border-left: 3px solid var(--color-primary);
}

@media screen and (max-width: 768px) {
  .education-item {
    margin-bottom: 3rem;
    padding-left: 2rem;
  }
  
}

.education-item h3 {
  font-weight: 800;
  margin-bottom: 1rem;
}

.education-item p, .experience-item p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin-bottom: 0;
}

.experience-education-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  flex-wrap: wrap;
  width: 100%;
}

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

  .education-content {
    width: 100%;
    flex-direction: column;
    max-width: 100%;
    padding: 0;
    margin: 0;

  }
  
}

.cursor-container {
  display: inline-flex;
  align-items: baseline; /* statt center */
  gap: 6px;
  margin-left: 8px;
}


.cursor-dot {
  width: 15px;
  height: 15px;
  background-color: var(--color-primary);
  display: inline-block;
}

.cursor-blink {
  color: var(--color-primary);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.typewriter-start {
  visibility: hidden;
}

.typing-active {
  visibility: visible;
}


/* ----------------- */
/* About me – Layout */
/* ----------------- */

:root {
  /* Feintuning */
  --img-col-desktop: clamp(300px, 34vw, 520px); /* schmaler = weniger Abstand */
  --img-col-tablet: clamp(260px, 38vw, 480px);
  --gap: clamp(12px, 1.8vw, 24px);              /* Abstand Bild–Text */
  --content-max: 70ch;
  --gutter: clamp(16px, 4vw, 56px);
}

.aboutme-hl {
  text-align: right;
  padding-right: 7%;
    padding-bottom: 5%;

}

/* Section-Grid */
.aboutme {
  position: relative;
  display: flex;
  padding-right: 7%;
  width: 100vw;
}


.aboutme .aboutme-content {
  max-width: 60%;;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: none;                      /* Sicherheit */
  padding-bottom: 2rem;
  padding-left: 2rem;
}

/* Absätze */
.aboutme .aboutme-content p {
  margin-bottom: 1.5rem;
  width: 100%;
}

/* ----------------- */
/* Bild links        */
/* ----------------- */

.aboutme-bg {
  width: 40%;
  object-fit: cover;
    position: sticky;              /* „Pin“ beim Scrollen */
  object-position: right bottom;  /* Desktop-Anschnitt schön links/unten */
  bottom: 0;
  align-self: end;
  z-index: 0;
  display: block;
  background: none;              /* verhindert „schwarze Fläche“ */
  box-shadow: none;
}



blockquote {
  width: 70%;
  font-weight: 100;
  font-size: 2rem;
  line-height: 1.4;
  margin: 0 0 1rem 2rem;
  text-align: right;
  position: relative;
  z-index: 1;
  margin-right: 15%;
}

cite {
  font-size: 1rem;
  line-height: 1.6;
  text-align: right;
  display: block;
  margin-bottom: 3rem;
  margin-right: 15%;

}

/* Deko-Quotes (wie gehabt) + Hover-Animation */
blockquote::before,
blockquote::after {
  font-family: 'Special Elite';
  color: rgba(255, 255, 255, 0.2);
  position: absolute;
  font-size: 8rem;
  width: 4rem; height: 4rem;
  z-index: -1;
  transition: transform 300ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}

blockquote::before { content: '“'; left: -5rem; top: -3rem; }
blockquote::after  { content: '”'; right: -4rem; bottom: 1.5rem; }

blockquote:hover::before {
  transform: translate(-0.25rem,-0.25rem) rotate(-4deg) scale(1.06);
  opacity: 0.9;
}
blockquote:hover::after {
  transform: translate(0.25rem,0.25rem) rotate(4deg) scale(1.06);
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  blockquote::before,
  blockquote::after { transition: none; }
  blockquote:hover::before,
  blockquote:hover::after { transform: none; opacity: 1; }
}

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

  .aboutme {
    flex-direction: column;
    padding: 2rem;
    align-items: center;

  }

  .aboutme-hl {
    text-align: center;
    padding-bottom: 0;

  }

  .aboutme-bg {
    width: 100%;
    height: auto;
    position: relative;  /* kein sticky mehr */
    object-position: center top;
    margin-bottom: var(--gap);
   

  }



  .aboutme .aboutme-content {
    max-width: var(--content-max);
    padding: 0 var(--gutter);
    align-items: flex-start;

  }

  blockquote, cite {
    text-align: right;
    margin-right: 0;
    margin-left: 2rem;
    width: 80%;
  }

  
}