/* =======================  styles.css  ======================== */
:root {
  /* ==== Farbpalette ==== */
  --c-bg: #f1eeea;           /* Body-Hintergrund: Alabaster        */   /* NEW */
  --c-fg: #333333;           /* Text & Headlines: Space Cadet      */   /* NEW */
  --c-accent: #8BA794;       /* Buttons aktiv, Skill-Balken: Cambr.*/   /* NEW */
  --c-muted: #BAC6B8;        /* Ash Gray: Sektionen, leere Bars    */   /* NEW */
  --c-nav: #2F3456;          /* Navigation BG: Space Cadet         */   /* NEW */
  --c-nav-text: #E9E4DC;     /* Navigation Text: Alabaster         */   /* NEW */
  --c-card: #E9E4DC;         /* Card-BG: Alabaster                 */   /* NEW */
  --c-card-shadow: #5D6E75;  /* Card-Border/Shadow: Payne’s Gray   */   /* NEW */
  --c-meta: #5D6E75;         /* Meta: Payne’s Gray                 */   /* NEW */
  --s-container: min(65ch, 90%);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:"Roboto Mono",monospace;line-height:1.55;color:var(--c-fg);background:var(--c-bg);}
img{max-width:100%;display:block;}
section{padding:5rem 0;scroll-margin-top:6rem;}
h1,h2,h3{line-height:1.2;margin:0 0 1rem;}
.skip-link{position:absolute;left:-999px;top:auto;background:#000;color:#fff;padding:.5rem 1rem;z-index:1000;}
.skip-link:focus{left:0;}


/* =================  NAVIGATION  ================= */
.nav{position:fixed;top:0;left:0;width:100%;background:var(--c-nav);color:#fff;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;z-index:1000;}
.nav__brand{font-weight:700;text-decoration:none;color:#fff;margin-right:auto;}
.nav__toggle{background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;}
.nav__toggle:hover,.nav__toggle:focus{color:var(--c-accent);}
.lang-switch{list-style:none;display:flex;gap:.5rem;margin:0;}
.lang-switch button{background:none;border:none;color:var(--c-nav-text);font-weight:600;cursor:pointer;}
.lang-switch button[aria-pressed="true"]{color:var(--c-accent);}

/* -------- collapsible list -------- */
.nav__list{list-style:none;margin:0;padding:1rem;gap:1rem;position:absolute;top:100%;left:0;right:0;background:var(--c-nav);flex-direction:column;transform:translateY(-200%);transition:transform .3s ease;display:none; /* NEW */}
.nav__list.is-open{display:flex;transform:translateY(0);} /* NEW */
.nav__link{text-decoration:none;color:#fff;font-weight:600;}
.nav__link:hover,.nav__link:focus,.nav__link.is-active{color:var(--c-accent);}

/* =================  HERO‐SLIDER  ================= */
.hero{min-height:100dvh;display:grid;place-items:center;text-align:center;background:#a8e6cf;color:var(--c-fg);}
.hero-swiper{padding-inline:0;background:none;overflow:hidden; /* NEW */}
.hero__inner{max-width:65ch;margin-inline:auto;}
.hero__title{font-size:clamp(2rem,6vw,4rem);margin-bottom:1rem;}
.hero__btn{display:inline-block;background:var(--c-accent);color:#fff;padding:.75rem 1.5rem;border-radius:.375rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;}
.hero-swiper .swiper-slide{min-height:100dvh;background-size:cover;background-position:center;display:grid;place-items:center;position:relative;}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.swiper-pagination-bullet{background:var(--c-accent);}

/* =================  CONTAINER / LAYOUTS  ================= */
.container{width:var(--s-container);margin-inline:auto;}
.container--full{width:100%;max-width:100%;padding-inline:0;}
.about__grid{display:grid;gap:2rem;align-items:center;}
@media(min-width:900px){.about__grid{grid-template-columns:1fr 1fr;}}

/* =================  ABOUT / SKILLS  ================= */
.skill-list{
  display:grid;
  gap:1rem;
  max-width:600px;
  margin:2rem auto 0;
  padding:0 1.25rem;                          /* NEW – Seiten-Padding */
}
.skill{display:flex;align-items:center;gap:1rem;}
.skill__icon{                                 /* bekommt <img class="skill__icon"> */
  width:32px; height:32px; flex:0 0 32px;     /* NEW – feste Icon-Größe */
  object-fit:contain;                         /* NEW – korrekt skalieren */
}
.skill__bar{
  flex:1; background:#c7c7c7; border-radius:6px;
  height:10px; position:relative;
}
.skill__bar span{display:block;height:100%;background:var(--c-accent);border-radius:inherit;}
.skill__percent{min-width:3ch;text-align:right;font-weight:600;}

/* Collapsible */

.skill-collapse{position:relative;}                                   /* NEW – macht summary absolut */
.skill-collapse summary{                                              /* NEW – Button immer zentriert */
  width:100%;
  cursor:pointer;
  padding:.75rem 0;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  list-style:none;
}
.chevron{                                                             /* unverändert – Pfeil ▼ */
  width:22px;height:22px;
  border-bottom:3px solid var(--c-fg);
  border-right:3px solid var(--c-fg);
  transform:rotate(45deg);
  transition:transform .25s ease;
}

/* ----------  Position wechseln, wenn aufgeklappt ---------- */
.skill-collapse[open] summary{                                        /* NEW – Button ans Ende setzen  */
  position:absolute;
  bottom:-32px;           /* Pfeil steht 32 px unterhalb der Liste */
  left:50%; transform:translateX(-50%);
}
.skill-collapse[open] .chevron{transform:rotate(225deg);}             /* NEW – Pfeil ▲ */

/* etwas Luft, damit der absolute Button nicht überlappt */
.skill-collapse[open] ul{padding-bottom:3.5rem;} 

/* ======================  PROJECTS  ====================== */
.projects{background:#f4f4f4;}
#projects-title{text-align:center;}
.projects__filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem;padding-inline:1rem;}
.filter-btn{background:var(--c-nav);color:var(--c-nav-text);border:none;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer;font:inherit;}
.filter-btn[aria-pressed="true"],.filter-btn:hover{background:var(--c-accent);}
.projects__grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-inline:1rem;}
@media(min-width:700px){.projects__grid{grid-template-columns:repeat(3,1fr);}}
.card{
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 2px 6px rgb(0 0 0 / .05);
  padding:1rem;
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;}
.card:hover{transform:translateY(-2px);transition:transform .2s;}
.card__img, .card__video {
  aspect-ratio:4/3;
  background:#ddd;
  border-radius:.375rem;
  margin-bottom:1rem;
  background-size:cover;        /* NEW – Bild füllt Container   */
  background-position:center;   /* NEW – zentriert das Bild     */
}
.card h3{margin:0 0 .5rem;font-size:1.25rem;}

.card__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: .375rem;
}

/* ===================  CONTACT & FOOTER  =================== */
.contact{background:#fafafa;text-align:center;}
.contact .container{max-width:600px;}
.contact__form{display:flex;flex-direction:column;gap:1rem;}
.contact__form label{display:flex;flex-direction:column;text-align:left;font-weight:600;gap:.25rem;}
.contact__form input,.contact__form textarea{width:100%;padding:.75rem;font:inherit;border:1px solid #ccc;border-radius:.375rem;}
.contact__form textarea{resize:vertical;min-height:8rem;}
.contact__form button{align-self:center;margin-top:1rem;}
footer{background:var(--c-nav);color:var(--c-nav-text);text-align:center;padding:1rem;}
.form-status{margin-top:1rem;font-weight:600;}          /* NEW */
.form-status.ok{color:var(--c-accent);}                 /* NEW */
.form-status.error{color:#c00;}

/* ----------  PROJECT PAGE  ---------- */
.project-hero{position:relative;isolation:isolate;max-height:70vh;overflow:hidden;}
.project-hero img{width:100%;height:100%;object-fit:cover;}
.project-hero__inner{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:2rem 1rem;color:#fff;background:rgb(0 0 0 /.35);backdrop-filter:blur(2px);}
.project-hero h1{font-size:clamp(2rem,6vw,4rem);margin:0 0 .5rem;}
.project-meta{background:#f6f6f6;padding:2rem 0;}
.meta-list{display:flex;flex-wrap:wrap;gap:1.5rem clamp(2rem,5vw,4rem);margin:0;padding:0;list-style:none;font-weight:600;}
.meta-list span{font-weight:400;}
.project-gallery{padding:4rem 0;}
.swiper-slide img{width:100%;display:block;border-radius:.5rem;}
.swiper-button-prev,.swiper-button-next{color:var(--c-accent);}
.project-content{padding-block:4rem;}
.project-content h2,.project-content h3{margin-top:3rem;}
.wide{margin-inline:calc(-50vw + 50%);}
.image-grid{display:grid;gap:1rem;margin-block:2rem;}
.image-grid img{width:100%;border-radius:.5rem;}
@media(min-width:700px){.image-grid{grid-template-columns:repeat(3,1fr);}}
.back-to-projects{padding:4rem 0 6rem;text-align:center;background:#fafafa;}

#loader {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s cubic-bezier(.66,0,.42,1);
}
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #e55745;
  border-top: 6px solid #111;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 2rem;
}
@keyframes spin {
  to { transform: rotate(360deg);}
}
#loader[hidden] {
  opacity: 0;
  pointer-events: none;
}