@charset "UTF-8";
/* CSS Document */


/* ======================================================
   1. ROOT
====================================================== */
  :root{
      --primary:#546425;
      --secondary:#FCF7F4;
      --dark:#363636;
      --olive: #879366;
      --olive-dark: #546425;
      --ink: #333;
      --soft: #fcf7f4;
      --stone: #d3cac0;
	  --white: #fff;
      --line: rgba(135, 147, 102, .75);
      --futura100: system-ui, -apple-system, "futura-100", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --futura100-book: system-ui, -apple-system, "futura-100-book", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --absolute-beauty: system-ui, -apple-system, "absolute-beauty", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --radius:999px;
      --shadow:0 18px 45px rgba(0,0,0,.12);
  }

/* ======================================================
   2. RESET
====================================================== */
  * {box-sizing: border-box;}

  html {scroll-behavior: smooth; scroll-padding-top: 100px;}

  body {
          font-family: "futura-100-book", "Century Gothic", Arial, sans-serif;
          color: var(--ink);
          background: var(--soft);
          letter-spacing: 1px;
          line-height: 1.25;
          font-weight: 400;
        }

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

  a {
      color: var(--olive-dark); 
      text-decoration: none;
  }

  a:hover, a:active, a:focus, a:target {
      color: var(--olive); 
      text-decoration: underline; 
      text-decoration-skip:ink
  }


/* ======================================================
   3. BUTTONS
====================================================== */
  .primary-btn, .secondary-btn{
      min-width: 30%;
      border-radius: var(--radius);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px 30px;
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform .2s ease, background-color .2s ease, color .2s ease;
  }

  .primary-btn {
      border: 2px solid var(--olive-dark);
      color: var(--white);
      background: var(--olive-dark);
  }

  .secondary-btn {
      border: 2px solid var(--olive-dark);
      color: var(--olive-dark);
      margin-left: 20px;
      background:rgba(252,247,244,0.25)
  }

  .primary-btn:hover,
  .primary-btn:focus {
      color: #fff; 
      background: var(--olive);
      border: 2px solid var(--olive);
      text-decoration: none;
  }

  .secondary-btn:hover,
  .secondary-btn:focus {
      color: var(--olive-dark);
      border: 2px solid var(--olive);
      text-decoration: none;
  }

/* ======================================================
   4. NAVBAR
====================================================== */
  .navbar {
      inset: 0;
      z-index: 5;
      background: transparent;
      height: 100px;
      position: fixed;
  }

  .navbar-collapse {
      font-weight: 400;
      font-size: 1.25em;
      text-shadow: 0 1px 0px rgba(0, 0, 0, .25);
      justify-content: flex-end;
      align-content: center;
  }

  .navbar-nav {gap: 40px;}

  .nav-link {
      text-decoration: none;
	  text-shadow: rgba(0,0,0,0.9), 0,0,0,
  }

  .nav-link:hover, .nav-link:active,.nav-link:target,
  .nav-link:visited {
      text-decoration: underline;
      text-decoration-color: var(--olive-dark);
      text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      text-decoration-skip:ink
  }

  /* ======== Logo ======== */

  .navbar-brand {
      width: 10%;	 
      padding: 0;
      margin: 0;
  }

  /* ======== Navbar Scrolling ======== */
  /* Diese Klasse wird per JavaScript hinzugefügt */

  #navbar.scrolled {
      background-color: var(--soft);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      color: var(--ink)!important; 
  }

/* ======================================================
   5. HERO
====================================================== */
  main {
      position: relative;
      top: 650px;
      background: var(--soft);
      box-shadow: 0 1px 10px rgba(0, 0, 0, .25);
  }

  .hero {
	  background: linear-gradient(90deg, rgba(246, 241, 238, .96) 0%, rgba(246, 241, 238, .9) 39%, rgba(246, 241, 238, .08) 70%), url("../images/hero-bg.jpg") top right /cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: fixed;
      width: 100%;
      height: 650px;
      }

  .hero-fact {max-width: 600px; margin: 70px 40px 0;}

  .hero-fact .title {margin:20px 0}

  .hero p {margin-bottom: 58px;}

  .svg-title {
	  width: 100%;
      height: auto;
      margin-left: -56px;
  }

/* ======================================================
   6. ABOUT
====================================================== */
  .about {
      display: flex;
      align-items:center;
      justify-content: center;
      padding: 50px 0 0;
  }

  .hey-container {width: 40%}

  .text-container {width: 49%;text-align: center;}

  .svg-hey {width: 100%;height: auto;}

  .divider-line {
        display: flex;
        align-items: center;
        gap: 32px;
        color: var(--olive);
        text-transform: uppercase;
        font-size: 1.2rem;
        justify-content: center;
        padding: 30px 0 50px ;
      }

  .divider-line::before,
  .divider-line::after {
      content: "";
      height: 2px;
      flex: 1;
      background: var(--line);
  }

  .divider-dot {
      color: var(--olive);
      font-weight: 700;
  }


/* ======================================================
   7. PROJECTS
====================================================== */

  /* ======== GALLERY ======== */

  .project-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-auto-rows: 130px;
      border-top: 1px solid rgba(255, 255, 255, .75);
      min-height: 780px;
  }

  .project-card {
      position: relative;
      overflow: hidden;
      min-height: 130px;
      border: 2px solid rgba(255, 255, 255, .82);
      background: var(--soft);
      color: var(--ink);
      isolation: isolate;
  }

  .project-card.myProjects {
      background: transparent;
      border: 0;
      padding:20px;
      width:100%;
      border-top: 2px solid rgba(255, 255, 255, .82);
  }

  .project-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease; 
  }

  .project-card.myProjects img {
      object-fit: contain;
      transition: none; 
  }

  .lastSpanRow {margin-right:-2px; border-right: 4px solid rgba(255, 255, 255, .82)!important;}

  .project-card.text-card {
      background: var(--soft);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 22px;  
  }

  .text-card button {
      border: 0;
      background: transparent;
      color: var(--ink);
      padding: 0;
      text-transform: uppercase;
      font-variant: small-caps;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      line-height: 1.1;
  }

  .text-card button span {
      display: block;
      color: var(--ink);
      font-size: 22px;
      margin-top: 12px;
      padding-top: 9px;
      border-top: 2px solid var(--olive);
  }
    
  .span-2 {grid-column: span 2;}

  .span-3 {grid-column: span 3;}

  .span-4 {grid-column: span 4;}

  .row-2 {grid-row: span 2;}

  .row-3 {grid-row: span 3;}

  .row-4 { grid-row: span 4;}

  .row-5 {grid-row: span 5;}

  .row-6 {grid-row: span 6;}


  .slideshow {
	display: flex;
	justify-content: flex-start;
	align-items: end;
  }

  /* ======== OVERLAY ======== */

  .project-overlay {
      padding:0;
      background: linear-gradient(180deg, rgba(252,247,244,.97), rgba(255,255,255,.93));
      backdrop-filter:blur(8px);
      width: 200px;
  }

  .project-details {
      display: block;
      margin: 30px;
      writing-mode: sideways-lr;
      margin: 50% 30px;
  }

  .project-info h3 {
        color: var(--olive-dark);
        text-transform: uppercase;
        font-size: 3rem;
        font-weight: 300;
        margin: 0 10px 0 20px;
    }

  #projectOverlay .primary-btn {
      width: 100%;
      height:80px;
      border-radius: 0;
      font-size: 1.5rem;
  }

/* ======== SLIDESHOW ======== */

  .project-carousel.d-none {display:none;}

  .project-carousel.show {display:block;}

  .project-carousel.hide { display:none;}

  .project-carousel{
      inset:0;
      background: var(--soft);
      width: 90%;	
  }

  .carousel-item img{
        object-fit: contain;
        border-radius:0;
        box-shadow: 0 25px 55px rgba(0,0,0,.18);
        animation:zoomImage .8s ease;
  }

  .carousel-item img {filter:drop-shadow(0 15px 30px rgba(0,0,0,.15));}

  /* ======== THUMBNAILS ======== */

  .carousel-indicators{
      position:absolute;
      bottom:20px;
      left:50%;
      transform:translateX(-50%);
      display:flex;
      justify-content:center;
      align-items:center;
      gap:12px;
      margin:0;
      padding:0;
  }

  .carousel-indicators [data-bs-target]{
      width:90px;
      height:65px;
      border:none;
      opacity:.45;
      overflow:hidden;
      border-radius:8px;
      transition:.3s;
      background:transparent;
  }

  .carousel-indicators img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:.35s;
  }

  .carousel-indicators .active{opacity:1;}

  .carousel-indicators .active img{border:3px solid #546425;}

  .carousel-indicators img:hover{transform:scale(1.08);}

  /* ======== NAVIGATION ======== */

  .carousel-control-prev,
  .carousel-control-next{
      width:70px;
      opacity:1;
      transition:.35s;
  }

  .carousel-control-prev{left:25px;}

  .carousel-control-next{right:25px;}

  .carousel-control-prev-icon,
  .carousel-control-next-icon{
      width:65px;
      height:65px;
      border-radius:50%;
      backdrop-filter:blur(12px);
      background-color:rgba(84,100,37,.70);
      border:2px solid rgba(255,255,255,.35);
      background-size:32%;
      transition:.35s;
      box-shadow:0 10px 30px rgba(0,0,0,.20);
  }

  .carousel-control-prev:hover .carousel-control-prev-icon,
  .carousel-control-next:hover .carousel-control-next-icon{
      transform:scale(1.12);
      background-color:#546425;
      box-shadow:0 18px 45px rgba(0,0,0,.30);
  }

  .carousel:hover .carousel-control-prev{left:40px;}

  .carousel:hover .carousel-control-next{right:40px;}

/* ======================================
   9. SKILLS
====================================== */
  .competence-section {padding: 50px 0;}

  .competence-box {position:relative; padding:20px 35px;}

  .more-content .container {width: 100%}

  .more-content .divider-line {padding: 30px 0px}

  .more-content a:hover {text-decoration: none}

  .progress-bar {
      background-color: var(--olive-dark);
      color: rgba( 211, 202 ,192 ,0.5);
      }

  #skills .row {padding: 0px 140px;}

  #more .col-4 {padding: 20px;}

  .progress {background: var(--stone);}

	
/* ======================================================
   10. CONTACT
====================================================== */

.contact-section{
    position:relative;
    overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(45deg, #fcf7f4, #aea69f);
}

.contact-container {width:100%; display: flex}

.contact-container-subtitle {
	font-family:"absolute-beauty", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: clamp(2rem, 7vw, 4.8rem);
    line-height:1.1;
    color:var(--olive);
    display:block;
	transform: rotate(-5deg);
	margin: 50px;
}

/* ======== DATEN ======== */

.contact {
	position: relative;
	z-index: 3;
	display: flex;
	background:rgba(255,255,255,.2);
    backdrop-filter:blur(18px);
    border-radius:25px;
    padding:35px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
	width:100%;
}

.contact-info {
    display:flex;
    flex-direction:column;
    gap:25px;
	width: 50%
}

.portrait-image{box-shadow:0 25px 70px rgba(0,0,0,.18);margin: 0 20px;}

.contact-subtitle {display: block; width:100%;margin: 0 20px}

.contact-item {
    display:flex;
    align-items:center;
}

.contact-item i {
    width:35px;
    height:35px;
    border-radius:50%;
	color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
    background: linear-gradient(135deg, #6A7A3A, #8DA65B);
}

#link:hover {
    transform:scale(1.1);
    background:#546425;
}

.contact-item span .icon {color:#fff; font-size:30px;}

/* ======== PORTRAIT ======== */






/* ======== HINTERGRUND ======== */

.floating-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(8px);
    opacity:.25;
    pointer-events:none;
    animation:float 12s ease-in-out infinite;
}

.contact-section::before{
    content:"";
    position:absolute;
    left:-150px;
    bottom:-120px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
    radial-gradient(rgba(255,255,255,.55),transparent);
}

.contact-section::after{
    content:"";
    position:absolute;
    right:-100px;
    top:-120px;
    width:380px;
    height:380px;
    border-radius:50%;
    background:
    radial-gradient(rgba(230,220,205,.45), transparent);
}

.shape-one{
    width:280px;
    height:280px;
    background:#d9ccb7;
    top:120px;
    left:-120px;
}

.shape-two{
    width:180px;
    height:180px;
    background:#9CAB6A;
    right:-70px;
    top:300px;
    animation-delay:3s;
}

.shape-three{
    width:120px;
    height:120px;
    background:#ebe2d4;
    bottom:60px;
    left:45%;
    animation-delay:6s;
}



@keyframes float{
	0%{transform:translateY(0px);}
	50%{transform:translateY(-25px);}
	100%{transform:translateY(0px);}
}

/* ======================================================
   11. FOOTER
====================================================== */

  footer {
      padding: 30px;
      border-top: 1px solid rgba(83, 107, 35, .35);
      text-align: center;
  }