:root{ --bg:#fff; --text:#0b0b0b; --muted:#6b7280; --card:#f8fafc; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.08); --max:1100px; --space:clamp(16px,2vw,24px); }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:Inter,system-ui,Arial; color:var(--text); background:var(--bg); line-height:1.55 }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--space) }
header {position: static; background: transparent; border: none;}
.nav {height: auto; padding: 250px 0 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;}
.brand {font-weight: 800; text-align: center; font-size: clamp(40px, 6vw, 64px); line-height: 1.1;}
.role {text-align: center; font-size: 25px; margin-top: 8px;}
.links {display: flex;justify-content: center;align-items: center;gap: clamp(32px, 8vw, 140px); padding-top: 28px;}
.links a {font-weight: 450; font-size: 18px; padding: 14px 8px; border-radius: 10px;}
.links a:hover  {opacity:.8; transform:translateY(-1px);  background: #f3f4f6;}
.hero { padding: 0; }
h2 {  font-size: clamp(28px, 3vw, 50px);  margin: 0 0 24px;  text-align: center;  font-weight: 700;  line-height: 1.2;}

@media (max-width: 640px) {  .links { gap: 28px; flex-wrap: wrap; }}   

/* Über mich */
.grid{ display:grid; grid-template-columns:1fr; gap:14px ; padding-bottom: 120px;}
    .about-photo{ border-radius:var(--radius); overflow:hidden;  }
    .about-card{ background:#fff; padding:28px; border-radius:var(--radius); }
    .about-card p{ margin:0 0 12px }

    @media(min-width:900px){
      .grid{ grid-template-columns:1fr 1.2fr; align-items:start }
      .carousel img{ height:600px }
    }

/* Kontakt */

#contact {  
  text-align: center; 
  padding-bottom: 120px;
}

.contact {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  gap: 14px;
}

.email {
  font-weight: 600;
  font-size: 16px;
  margin-top: 14px;
  display: inline-block;  
  padding: 6px 10px;      
  border-radius: 10px;
}

.email:hover {
  opacity: .85;
  background: #f3f4f6;
  transform: translateY(-1px);
}

.icons {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
}

.icons a {
  display: inline-flex;     
  padding: 6px;             
  border-radius: 10px;
  transition: .2s ease;
}

.icons a:hover {
  opacity: .85;
  background: #f3f4f6;
  transform: translateY(-1px);
}

.icons img {
  width: 28px;
  height: 28px;
}

/* Portfolio */

:root{ --pf-maxh: 600px; }

.pf-carousel{ position:relative; overflow:hidden; max-width:100%; }
.pf-carousel figure{ margin:0; }

.pf-track{
  display:flex;
  transition: transform .45s ease;
  will-change: transform;
}

.pf-slide{
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px; 
}

.pf-media{
  position: relative;
  display: block;
  border-radius: 12px;      
  overflow: hidden;         
  background: transparent;  
  box-shadow: none;         
}

.pf-media img,
.pf-media video{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--pf-maxh, 800px);
  object-fit: contain;
  display: block;
  border-radius: 0;  
  box-shadow: none;
  filter: none;    
}

.pf-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:12px;
}

.pf-prev, .pf-next{
  background:none; border:0; padding:4px;
  display:flex; align-items:center; justify-content:center;
  color:#111; cursor:pointer;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0.0);
}
.pf-prev svg, .pf-next svg{ width:26px; height:26px; }

.pf-prev:focus-visible, .pf-next:focus-visible{
  outline:2px solid #111; outline-offset:2px;
}

.pf-prev:hover,
.pf-next:hover {
  opacity: 0.8;
  transform: translateY(-1px);
  background: #f3f4f6;       
  border-radius: 10px;        
}

.pf-dots{ display:flex; gap:6px; }
.pf-dots button{
  width:6px; height:6px; border-radius:999px; border:0;
  background:#dadada; cursor:pointer;
  transition:background .2s ease, width .2s ease;
}
.pf-dots button[aria-selected="true"]{
  width:18px; background:#111;
}

.video-slide{ position:relative; }
.pf-link{ position:absolute; inset:0; z-index:1; }
.pf-mute{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; cursor:pointer;
}
.pf-mute:hover{ background:rgba(0,0,0,.8); }

#portfolio{ padding-bottom:120px; }

@media (max-width: 640px) {

  #portfolio {
    padding-top: 32px;
    padding-bottom: 60px;
  }

  .pf-controls {
    margin-top: 6px;
    gap: 12px;
  }
  
  .pf-slide {
    padding: 6px 0;
  }

  :root {
    --pf-maxh: 480px; 
  }
}