:root{
    --orange-1:#e8791f;
    --accent:#F49400;
    --accent-2:#f0940f;
    --text-cream:#f6ead6;
    --text-dim:#d8c9b3;
    --cream-1:#E1C5A8;
    --text-light:#E5E1E9;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    margin:0;
    font-family:'Montserrat',sans-serif;
    font-weight:300;
    color:var(--text-cream);
    background:#051221;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Playfair Display',serif;
    font-weight:400;
    margin:0;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{
    max-width:1694px;
    margin:0 auto;
    padding:0 40px;
  }
  .wrap.contentpage {
    max-width: 1300px;
  }
  @media(max-width:900px){.wrap{padding:0 28px;}}
  @media(max-width:600px){.wrap{padding:0 20px;}}

  /* NAV */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:flex-end;
    padding:calc(26px + env(safe-area-inset-top,0px)) 40px 26px;
    background:transparent;
  }
  @media(max-width:900px){header.nav{padding:calc(20px + env(safe-area-inset-top,0px)) 28px 20px;}}
  @media(max-width:600px){header.nav{padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px; flex-wrap:wrap; gap:12px;}}
  nav.links{display:flex; gap:14px;}
  @media(max-width:700px){nav.links{width:100%; justify-content:flex-start; flex-wrap:wrap;}}
  .btn{
    font-family:'Montserrat',sans-serif;
    font-size:1rem;
    font-weight:400;
    padding:14px 28px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,0.35);
    background:transparent;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .btn:hover{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.6);}
  .btn.solid{
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    border:none;
    color:#2b1503;
    font-weight:500;
  }
  .btn.solid:hover{filter:brightness(1.06);}
  .btn.ghost{
    background:transparent;
    border: 1px solid rgb(243 148 3);
    color: #f39402;
}  }
  .btn.ghost:hover{background:rgba(255,255,255,0.08);}

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background: transparent linear-gradient(234deg, #222C5F 0%, #3C295B 5%, #B05025 41%, #B75222 45%, #BB5420 48%, #BF551E 51%, #D14E0C 75%, #cd490b 100%) 0% 0% no-repeat padding-box;
    background-size:cover;
    background-position:center;
    padding:48px 24px;
    text-align:center;
  }
  .hero-inner{
    padding-top:0;
  }
  .hero h1{
    font-size: clamp(3.4rem, 9vw, 6.5rem);
    color:var(--accent);
  }
  .hero .tagline{
    font-family:'Montserrat',sans-serif;
    font-weight:300;
    letter-spacing:0.22em;
    font-size:clamp(1.1rem, 1.8vw, 1.4rem);
    color:var(--text-cream);
  }
  .sun-dot{
    width:69px; height:auto;
    margin:70px auto 0;
    display:block;
  }

  /* GRADIENT WRAP BLOCKS */
  .gradient-block-1{
    background: linear-gradient(180deg, #4D2959 0%, #192040 4%, #051221 13%, #051221 49%, #2C174D 62%, #BF551E 88%, #E1C5A8 100%);
  }
  .gradient-block-2{
    background:linear-gradient(0deg, #051221 0%, #2C174D 19%, #BF551E 73%, #DDB797 95%, #E1C5A8 100%);
  }
  .gradient-block-3{
    background: linear-gradient(180deg, #051221 0%, #051221 20%, #2C174D 50%, #BF551E 76%, #E1C5A8 100%);
  }
  .gradient-block-4{
    background: linear-gradient(0deg, #051221 0%, #1C2245 72%, #31254d 100%);
  }


  /* SCROLLEFFEKT */
  .reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

  /* INTRO / PHOTO SECTION */
  .intro{
    padding:130px 0 50px;
  }
  .intro-grid{
    display:grid;
    grid-template-columns:6fr 4fr;
    gap:48px;
    align-items:center;
  }
  @media(max-width:860px){.intro-grid{grid-template-columns:1fr; gap:40px;}}
  .intro h2{font-size:50px; font-weight:400; color:var(--text-light);}
  .intro .lead{color:#F49400; font-family:'Montserrat',sans-serif; font-size:1.3rem; margin-top:18px; font-weight:300; padding-bottom: 15px;}
  .intro p, .timeline-item p{
    color:#B2A5C6;
    line-height:1.6;
    font-size:1.15rem;
    max-width:none;
    margin-top:20px;
  }
  .intro .cta-row{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
  .photo-frame{
    border-radius:6px;
    overflow:hidden;
    max-width:none;
    width:100%;
    margin:0;
  }
  .photo-frame img{width:100%; height:auto; display:block;}

  /* QUOTE */
  .quote{
    text-align:center;
    padding:75px 24px 160px;
  }
  .quote h2{
    font-size:60px;
    line-height:1.35;
    max-width:1694px;
    margin:40px auto 0;
    color:var(--text-cream);
    font-weight:400;
  }
  .quote .role{
    margin-top:30px;
    color:#F49400;
    font-family:'Montserrat',sans-serif;
    font-weight:300;
    font-size:23px;
  }
  .quote-line{white-space:nowrap;}
  @media(max-width:900px){.quote-line{white-space:normal;}}

  /* TWO COL / EXPERIENCE */
  .experience{
    padding: 250px 0 26px;
  }
  .exp-top{
    padding: 49px 0 100px;
  } 

  .exp-grid{
    display:grid;
    grid-template-columns: 0.62fr 1.1fr;
    gap:64px;
  }
    .leb-grid{
    display:grid;
    grid-template-columns: 0.72fr 1.1fr;
    gap:64px;
  }
  .leb-grid p {
    margin-top: 21px!important;
}
  @media(max-width:860px){.exp-grid, .leb-grid{grid-template-columns:1fr; gap:24px;}}
  .exp-grid h2, .leb-grid h2{
    font-size:60px;
    line-height:1.3;
    color:var(--text-cream);
    font-weight:400;
  }
  .exp-grid .subhead{color:var(--text-cream); margin-top:16px; font-size:1.15rem; font-weight: 400;}
  .exp-grid .body p{
    color:rgba(255,247,235,0.92);
    line-height:1.6;
    font-size:1.15rem;
    margin:0 0 20px;
  }
  .exp-grid .body{margin-top:2px;}

  /* REFERENZPROJEKTE */
  .referenzen{
    background:var(--cream-1);
    padding:10px 0 20px;
    color:#3a2412;
  }
  .referenzen .eyebrow, .skills-section .kicker{color:#BF551E; font-size:50px; font-weight:400; font-family:'Playfair Display',serif;}
  .referenzen .lead, .skills-section .lead{font-size:1.3rem; margin-top:18px; color:#051221; font-weight: 400; padding-bottom: 15px;}
  .referenzen p.desc, .skills-section > .wrap > p.desc{max-width:1694px; color:#051221; line-height:1.6; margin-top:20px; font-size:1.15rem; font-weight: 400; margin-bottom: 35px;}

  .project-card{
    margin-top: 52px;
    background: linear-gradient(180deg, #CE865B 0%, #B55121 21%, #7E3A33 44%, #391C48 68%, #091325 100%);
    border-radius: 14px;
    padding: 44px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 167px;
    align-items: center;
  }
  @media(max-width:860px){.project-card{grid-template-columns:1fr;}}
  .mockup{
    background:#fff;
    border-radius:6px;
    overflow:visible;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);
    position:relative;
  }
  .mockup .browser-frame{border-radius:6px; overflow:hidden;}
  .mockup .browser-bar{
    background:#2b2144;
    padding:8px 12px;
    display:flex; gap:6px;
  }
  .mockup .browser-bar span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); display:block;}
  .mockup .img-row{position:relative;}
  .mockup img{width:100%; display:block;}
  .phone-mockup{
    position: absolute;
    right: -11%;
    bottom: -14%;
    width: 34%;
    max-width: 209px;
    border-radius: 16px;
    overflow: hidden;
    border: 8px solid #2b2144;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
    background: #000;
  }
  @media(max-width:860px){.phone-mockup{right:4%; bottom:-10%;}}
  .phone-mockup img{width:100%; display:block;}
  .project-info .brand{
    background:#f4f0e6; color:#c1330f; font-family:'Playfair Display',serif; font-weight:600;
    display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:4px; font-size:1rem;
  }
  .project-info h3{color:#fff; font-size:1.9rem; margin-top:22px; font-weight:400;}
  .project-info p{color:rgba(255,255,255,0.85); font-size:1.05rem; line-height:1.6; margin-top:14px; max-width:40ch;}
  .tags{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
  .tag{
    border:1px solid rgba(255,255,255,0.5);
    color:#fff;
    font-size:0.78rem;
    padding:6px 12px;
    border-radius:16px;
  }
  .project-info .btn{margin-top:20px; display:inline-block;}

  /* SUNCHILD ORIGIN */
  .origin{
    padding: 275px 0px 45px;
  }
  .origin-grid{
    display:grid;
    grid-template-columns:0.72fr 1fr;
    gap:64px;
  }
  @media(max-width:860px){.origin-grid{grid-template-columns:1fr; gap:24px;}}
  .origin h2{font-size:60px; color:#fff; font-weight:400; line-height:1.25;}
  .origin .subhead{color:rgba(255,255,255,0.85); margin-top:16px; font-size:1.15rem; font-weight: 400;}
  .origin p, .leb-grid p{color:rgba(255,247,235,0.92); line-height:1.6; font-size:1.15rem; margin:0 0 20px;}

  /* CTA */
  .cta{
    text-align:center;
    padding:160px 24px 170px;
  }
  .cta h2{font-size:60px; font-weight:400; color:var(--text-cream);}
  .cta p{color:var(--text-dim); margin-top:20px; font-size:1.2rem; line-height:1.7;}
  .cta .btn{margin-top:32px; display:inline-block; padding:14px 30px; font-size:0.95rem;}

  footer.foot{
    background:#051221;
    text-align:center;
    padding:26px;
    font-size:0.8rem;
    color:rgba(246,234,214,0.45);
  }

  .slider{ position:relative; overflow:hidden;}
.slider-track{
  display:flex;
  transition:transform 0.5s ease;
   padding-bottom: 40px;
}
.slider-track .project-card{
  flex:0 0 100%;   /* jede Kachel volle Breite */
  margin-top:0;
}
.slider-arrow{
  position:absolute; top: calc(50% - 40px); transform:translateY(-50%);
  background:none;          /* Kreis-Hintergrund weg */
  border:none;
  width:44px; height:44px;
  padding:0;
  cursor:pointer;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.slider-arrow img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.slider-arrow:hover img{
    filter: drop-shadow(2px 4px 14px #351c45);
}

.slider-arrow.prev{ left:16px; }
.slider-arrow.next{ right:16px; }

.slider-dots{
  display:flex; justify-content:center; gap:8px; margin-top:20px;
}
.slider-dots button{
    width: 20%;
    height: 6px;
    border-radius: 0;
    border: none;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    padding: 0;
    background: #d3b198;
}
.slider-dots button.active{ 
    background: #b75525;
 }

.slider .btn.ghost {
    margin-left: 7px;
}

/* ===== SHARED SUBPAGE STYLES ===== */
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(26px + env(safe-area-inset-top,0px)) 40px 26px;

  position:relative; z-index:10;
}
.page-header .logo{
  font-family:'Playfair Display',serif;
  font-size:1.6rem;
  color:#F49400;
}
@media(max-width:900px){.page-header{padding:calc(20px + env(safe-area-inset-top,0px)) 28px 20px;}}
@media(max-width:600px){.page-header{padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px; flex-wrap:wrap; gap:12px;}}

/* Page intro (kicker + title + body, optional photo) */
.page-intro{padding:10px 0 30px;}
.page-intro .kicker, .timeline-item .kicker, .case-section .kicker{
    color: #F49400;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    margin-top: 18px;
    font-weight: 300;
    padding-bottom: 15px;
}
.timeline-item .kicker{
    padding-bottom: 0px;
}
.page-intro h1{
    font-size: 50px;
    font-weight: 400;
    color: var(--text-light);
}
.page-intro .lead-lg{font-size:1.4rem; color:var(--text-light); margin-top:20px; max-width:70ch; line-height:1.6;}
.page-intro p{color:#B2A5C6; line-height:1.6; font-size:1.15rem; margin-top:20px; max-width:none;}
.page-intro-grid{display:grid; grid-template-columns:6fr 4fr; gap:48px; align-items:center;}
@media(max-width:860px){.page-intro-grid{grid-template-columns:1fr; gap:32px;}}
.page-intro .cta-row{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}

/* Timeline (Mein Weg) */
.timeline-section{padding:100px 0;}
.timeline-grid{display:grid; grid-template-columns: 2fr 8fr; gap:48px;}
@media(max-width:860px){.timeline-grid{grid-template-columns:1fr; gap:20px;}}
.timeline-grid h2{font-size:50px; font-weight:400; color:var(--text-light);}
.timeline-list{display:flex; flex-direction:column; gap:15px;}
.timeline-item h3{font-family:'Playfair Display',serif; font-weight:400; font-size:1.5rem; color:#F49400; margin-bottom:12px;}

/* Skillset grid */
.skills-section{background:var(--cream-1); padding: 65px 0px 20px; color:#3a2412;}
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;}
@media(max-width:900px){.skills-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.skills-grid{grid-template-columns:1fr;}}
.skill-card{background: none;border-radius: 0px;padding: 28px;border: 2px solid #D8A985;}
.skill-card h3{font-family:'Playfair Display',serif; font-weight:400; font-size:1.55rem; color:#2f1c12;}
.skill-card p{color:#6b543c; font-size:0.95rem; line-height:1.6; margin-top:10px;}
.skill-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.skill-tag{border:1px solid #c6540f; color:#c6540f; font-size:0.78rem; padding:5px 12px; border-radius:14px;font-weight: 400;}

/* Case study article sections */
.case-section{padding:100px 0px 0px;}
.case-section .kicker{color:#F49400; font-family:'Montserrat',sans-serif; font-weight:300; font-size:1.15rem; margin-bottom:16px;}
.case-section .subhead{color:#F49400; font-family:'Montserrat',sans-serif; font-weight:300; font-size: 1.35rem; display:block; margin-bottom:20px;}
.case-section h2{font-size: 39px; font-weight:400; color:var(--text-light); margin-bottom:20px;}
.case-section p{color:#B2A5C6; line-height:1.6; font-size:1.15rem;}

/* Case study intro (two-column, top of page) */
.case-intro{padding: 110px 0 67px;}
.case-intro-grid{display:grid; grid-template-columns:5fr 5fr; gap:56px; align-items:start;}
@media(max-width:860px){.case-intro-grid{grid-template-columns:1fr; gap:28px;}}
.case-intro-grid h1{font-size:50px; font-weight:400; color:var(--text-light); line-height:1.3;}
.case-intro-grid .intro-desc{color:#B2A5C6; font-size:1.15rem; line-height:1.6; padding-top:6px;}
.case-hero-img.img-placeholder{aspect-ratio:auto; height:640px;}
@media(max-width:860px){.case-hero-img.img-placeholder{height:340px;}}

.case-hero-img{border-radius:8px; overflow:hidden; margin:56px 0; box-shadow:0 30px 70px rgba(0,0,0,0.4);}
.case-hero-img img{width:100%; display:block;}
.case-image-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px;}
@media(max-width:860px){.case-image-grid{grid-template-columns:1fr;}}
.case-image-grid img{width:100%; border-radius:8px; display:block; box-shadow:0 20px 50px rgba(0,0,0,0.35);}
.case-image-grid figcaption{color:var(--text-dim); font-size:0.9rem; margin-top:10px; text-align:center;}
.case-tags{display:flex; gap:8px; margin-top:40px; flex-wrap:wrap;}
.case-tag{border: 1px solid #B2A5C6;color: #B2A5C6; font-size:0.8rem; padding:6px 14px; border-radius:16px;}
.img-placeholder{
  background:linear-gradient(135deg,#d9c48a,#9fae7a);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  color:#2f1c12; font-family:'Playfair Display',serif; font-size:1.2rem;
  aspect-ratio:16/10; padding:20px; text-align:center;
}
img.white-bg {
    background-color: white;
}
/* Referenzen overview list */
.ref-list{padding: 110px 0 130px;}
.ref-list h1{font-size:50px; font-weight:400; color:var(--text-light); line-height:1.3; max-width:1400px;}
.ref-list .lead-lg, .case-intro-grid .kicker{color:#F49400; font-family:'Montserrat',sans-serif; font-weight:300; font-size:1.4rem; margin-top:20px;}
.ref-list .project-card{margin-top: 115px;background: transparent linear-gradient(0deg, #051221 0%, #251b35 38%, #833e19 100%);}
.ref-list .project-card:first-of-type{margin-top:64px;}