/* ============================================================
   ELENA · PORTFOLIO — Mediamatikerin EFZ
   Design: Apple-clean · minimalistisches Glassmorphism
   Zwei Akzentfarben (Pink + Orange) auf Cremeweiss · keine Verläufe
   Fonts: Archivo (fett/Display) · Playwrite GB J (Script-Akzent) · Inter (Text)
   ============================================================ */

:root{
  /* Flächen */
  --cream:   #FBF8F2;
  --cream-2: #F3EEE4;
  --ink:     #14110D;
  --ink-soft:#5c554b;

  /* Die ZWEI Akzentfarben */
  --pink:    #ff007f;
  --orange:  #ff6f00;

  /* Glas */
  --glass-bg:     rgba(255,255,255,.55);
  --glass-bg-2:   rgba(255,255,255,.42);
  --glass-border: rgba(255,255,255,.75);
  --glass-shadow: 0 10px 40px rgba(20,17,13,.07);
  --glass-blur:   blur(18px) saturate(150%);

  --radius:   24px;
  --radius-s: 16px;
  --maxw:     1180px;
  --ease:     cubic-bezier(.22,1,.36,1);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-script:  "Bodoni Moda", Georgia, serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; width:100%; height:100%; object-fit:cover; }
::selection{ background:var(--pink); color:#fff; }

/* gemeinsamer Script-Akzent */
.script-accent{ font-family:var(--font-script); font-size:clamp(1.2rem,3vw,1.8rem); color:var(--pink); }

/* ============ LOADING SCREEN ============ */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink); display:grid; place-items:center;
  transition:transform .8s var(--ease);
}
.loader.is-done{ transform:translateY(-100%); }
.loader__inner{ text-align:center; color:var(--cream); padding:24px; }
.loader__hello{
  font-family:var(--font-script); font-size:clamp(1.4rem,5vw,2.4rem); color:var(--orange);
  opacity:0; transform:translateY(14px); animation:loadUp .6s var(--ease) .1s forwards;
}
.loader__welcome{
  font-family:var(--font-display); font-weight:900; font-size:clamp(2rem,9vw,5rem);
  letter-spacing:-.02em; line-height:1; margin:.2em 0 1.1em;
  opacity:0; transform:translateY(20px); animation:loadUp .7s var(--ease) .25s forwards;
}
.loader__bar{ width:min(260px,70vw); height:3px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; margin:0 auto; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--pink); border-radius:99px; }
@keyframes loadUp{ to{ opacity:1; transform:none; } }
body.loading{ overflow:hidden; height:100vh; }

/* ============ NAV (frosted glass) ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled{
  background:rgba(251,248,242,.72);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  padding-top:11px; padding-bottom:11px;
  box-shadow:0 1px 0 rgba(20,17,13,.06);
}
.nav__brand{ font-family:var(--font-script); font-size:1.7rem; color:var(--ink); text-decoration:none; line-height:1; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav__links a{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:.82rem; color:var(--ink); text-decoration:none;
  position:relative; padding:4px 0;
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--pink); transition:width .3s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  background:var(--ink); color:var(--cream)!important; padding:9px 18px!important; border-radius:99px;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.nav__cta:hover{ background:var(--pink); transform:translateY(-2px); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__burger span{ width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; font-size:.85rem; text-decoration:none;
  padding:14px 26px; border-radius:99px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--cream); }
.btn--solid:hover{ background:var(--pink); transform:translateY(-3px); box-shadow:0 12px 30px rgba(255,0,127,.30); }
.btn--glass{
  background:var(--glass-bg); color:var(--ink);
  border-color:var(--glass-border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.btn--glass:hover{ background:#fff; transform:translateY(-3px); box-shadow:var(--glass-shadow); }
.btn--lg{ padding:18px 34px; font-size:.95rem; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:116px clamp(20px,5vw,56px) 118px;
  max-width:980px; margin:0 auto;
}
.hero__inner{ position:relative; z-index:1; }
.badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.74rem; color:var(--ink);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:9px 16px; border-radius:99px; margin-bottom:28px; box-shadow:var(--glass-shadow);
}
.badge__dot{ width:9px; height:9px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 0 rgba(255,0,127,.5); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,0,127,.5);} 70%{ box-shadow:0 0 0 9px rgba(255,0,127,0);} 100%{ box-shadow:0 0 0 0 rgba(255,0,127,0);} }
.hero__title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.8rem,11vw,7.5rem); line-height:.92; letter-spacing:-.035em;
  text-transform:uppercase; margin-bottom:30px;
}
.hero__title--accent{
  font-family:var(--font-script); font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--pink); font-size:.4em; display:inline-block; padding-top:.3em;
}
.reveal-mask{ display:block; overflow:hidden; }
.reveal-mask__in{ display:inline-block; transform:translateY(110%); animation:maskUp .9s var(--ease) forwards; }
.reveal-mask:nth-child(1) .reveal-mask__in{ animation-delay:.1s; }
.reveal-mask:nth-child(2) .reveal-mask__in{ animation-delay:.22s; }
.reveal-mask:nth-child(3) .reveal-mask__in{ animation-delay:.34s; }
@keyframes maskUp{ to{ transform:translateY(0); } }
.hero__lede{ font-size:clamp(1.05rem,1.7vw,1.25rem); color:var(--ink-soft); max-width:620px; margin:0 auto 32px; }
.hero__lede strong{ color:var(--ink); }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero__scroll{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; font-size:.7rem; color:var(--ink-soft); text-decoration:none;
}
.hero__scroll-line{ width:1.5px; height:26px; background:var(--ink); animation:scrollPulse 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ============ SECTION SHELL ============ */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vw,150px) clamp(20px,5vw,56px); }
.section__head{ margin-bottom:clamp(44px,6vw,72px); text-align:center; max-width:680px; margin-inline:auto; }
.tag{
  display:inline-block; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; padding:7px 15px; border-radius:99px; margin-bottom:18px; color:#fff;
}
.tag--pink{ background:var(--pink); }
.tag--orange{ background:var(--orange); }
.section__title{
  font-family:var(--font-display); font-weight:900; font-size:clamp(2.4rem,8vw,5.2rem);
  line-height:.96; letter-spacing:-.03em; text-transform:uppercase;
}
.section__title em{ font-family:var(--font-script); font-weight:400; font-style:normal; text-transform:none; color:var(--pink); }
.section__sub{ margin:16px auto 0; font-size:1.1rem; color:var(--ink-soft); max-width:560px; }

/* Highlights (Text-Marker) */
.hl{ font-weight:600; box-shadow:inset 0 -.5em 0 rgba(255,0,127,.16); padding:0 .08em; }
.hl--pink{ box-shadow:inset 0 -.5em 0 rgba(255,0,127,.18); }
.hl--orange{ box-shadow:inset 0 -.5em 0 rgba(255,111,0,.20); }

/* Glas-Karte (Basis) */
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
}

/* ============ ÜBER MICH ============ */
.about .section__head{ text-align:left; margin-inline:0; max-width:none; }
.about__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:center; }
.about__photo{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px rgba(20,17,13,.14); }
.about__photo img{ transition:transform .7s var(--ease); }
.about__photo:hover img{ transform:scale(1.05); }
.about__photo-cap{
  position:absolute; left:14px; bottom:14px; right:14px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:12px 16px; border-radius:var(--radius-s);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem;
}
.about__photo-cap span{ display:block; font-weight:600; text-transform:none; color:var(--ink-soft); font-size:.78rem; }
.about__big{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.18; margin-bottom:22px; letter-spacing:-.01em; }
.about__text > p{ color:var(--ink-soft); margin-bottom:16px; }
.about__text > p strong{ color:var(--ink); font-weight:700; }
.about__facts{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.about__facts li{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  padding:14px 16px; border-radius:var(--radius-s); font-size:.95rem;
}
.about__facts strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pink); margin-bottom:2px; }

/* Persönlich */
.personal{ margin-top:clamp(60px,9vw,110px); }
.personal__head{ text-align:center; margin-bottom:46px; }
.personal__title{ font-family:var(--font-display); font-weight:900; font-size:clamp(2rem,6vw,3.4rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1; }
.personal__title em{ font-family:var(--font-script); font-weight:400; font-style:normal; text-transform:none; color:var(--orange); }
.personal__intro{ margin:16px auto 0; max-width:540px; color:var(--ink-soft); font-size:1.08rem; }
.personal__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pcard{
  border-radius:var(--radius); padding:0; overflow:hidden;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pcard:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(20,17,13,.12); }
.pcard__img{ aspect-ratio:4/3; overflow:hidden; background:var(--cream-2); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.pcard:hover .pcard__img img{ transform:scale(1.06); }
.pcard__body{ padding:24px 28px 30px; }
.pcard__icon{ font-size:1.9rem; display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--cream); box-shadow:var(--glass-shadow); margin:-28px 0 14px; position:relative; z-index:1; }
.pcard h4{ font-family:var(--font-display); font-weight:900; font-size:1.35rem; margin-bottom:10px; text-transform:uppercase; letter-spacing:-.01em; }
.pcard p{ font-size:.98rem; color:var(--ink-soft); text-align:left; hyphens:auto; -webkit-hyphens:auto; text-wrap:pretty; }

/* Fun Facts */
.funfacts{ margin-top:clamp(40px,6vw,64px); text-align:center; }
.funfacts__label{ display:block; margin-bottom:24px; }
.funfacts__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.funfact{
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:20px 22px; border-radius:var(--radius-s);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
}
.funfact__icon{ font-size:1.7rem; flex:0 0 auto; width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:var(--cream-2); }
.funfact p{ font-size:.96rem; color:var(--ink-soft); line-height:1.5; }
.funfact strong{ color:var(--ink); font-weight:700; }

/* Stimmen aus dem Team (Testimonials) */
.testimonials{ margin-top:clamp(60px,9vw,110px); }
.testimonials__head{ text-align:center; margin-bottom:46px; }
/* Swipe-Carousel */
.testimonials__carousel{ position:relative; display:flex; align-items:center; gap:10px; }
.testimonials__track{
  position:relative; display:flex; align-items:stretch; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:6px 4px; flex:1; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab;
}
.testimonials__track::-webkit-scrollbar{ display:none; }
.testimonials__track.is-dragging{ cursor:grabbing; scroll-behavior:auto; }
/* eine Karte = volle Breite → immer nur ein Zitat sichtbar */
.testimonials__carousel .quote-card{ flex:0 0 100%; scroll-snap-align:center; }
.testimonials__carousel .quote-card blockquote,
.testimonials__carousel .quote-card figcaption{ max-width:760px; margin-inline:auto; }
.tcar__nav{
  flex:0 0 auto; display:none; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  color:var(--ink); font-size:1.7rem; line-height:1; cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease);
}
.tcar__nav:hover{ background:var(--pink); color:#fff; transform:scale(1.08); }
.tcar__nav:disabled{ opacity:.3; cursor:default; transform:none; background:var(--glass-bg); color:var(--ink); }
.testimonials__carousel.has-overflow .tcar__nav{ display:grid; }
@media (max-width:680px){ .testimonials__carousel.has-overflow .tcar__nav{ display:none; } }

.quote-card{
  position:relative; border-radius:var(--radius); padding:clamp(30px,4vw,44px) clamp(26px,4vw,40px) clamp(26px,3vw,34px);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  display:flex; flex-direction:column; gap:22px;
}
.quote-card::before{
  content:"\201C"; position:absolute; top:6px; left:22px;
  font-family:var(--font-script); font-size:5rem; line-height:1; color:var(--pink); opacity:.85;
}
.quote-card blockquote{ position:relative; z-index:1; margin-top:14px; font-size:1.04rem; line-height:1.65; color:var(--ink-soft); }
.quote-card figcaption{ display:flex; flex-direction:column; gap:3px; padding-top:18px; border-top:1px solid rgba(20,17,13,.1); }
.quote-card__name{ font-family:var(--font-display); font-weight:900; font-size:1.1rem; color:var(--ink); }
.quote-card__role{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; color:var(--orange); }

/* ============ FÄHIGKEITEN ============ */
.skills__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.skill{
  border-radius:var(--radius); padding:32px 28px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.skill:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(20,17,13,.12); }
.skill__icon{ font-size:1.8rem; display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--cream-2); margin-bottom:16px; }
.skill h3{ font-family:var(--font-display); font-weight:900; font-size:1.4rem; text-transform:uppercase; letter-spacing:-.01em; margin-bottom:8px; }
.skill p{ color:var(--ink-soft); font-size:.96rem; margin-bottom:18px; }
.skill__bar{ height:7px; border-radius:99px; background:rgba(20,17,13,.08); overflow:hidden; }
.skill__bar span{ display:block; height:100%; width:0; border-radius:99px; background:var(--pink); transition:width 1.1s var(--ease); }
.skill:nth-child(even) .skill__bar span{ background:var(--orange); }
.skill.is-in .skill__bar span{ width:var(--lvl); }

/* ============ GALERIE ============ */
.gallery__filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; justify-content:center; }
.chip{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem;
  padding:10px 20px; border-radius:99px; border:1.5px solid rgba(20,17,13,.18);
  background:var(--glass-bg); color:var(--ink); cursor:pointer;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:.25s var(--ease);
}
.chip:hover{ transform:translateY(-2px); border-color:var(--pink); }
.chip.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.gallery__grid{ columns:3; column-gap:18px; }
.gitem{ position:relative; break-inside:avoid; margin-bottom:18px; border-radius:var(--radius-s); overflow:hidden; cursor:pointer; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.gitem.is-hidden{ display:none; }
.gitem img{ transition:transform .6s var(--ease); }
.gitem:hover img{ transform:scale(1.08); }
.gitem figcaption{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; color:#fff;
  background:linear-gradient(to top, rgba(15,12,8,.82) 0%, rgba(15,12,8,.08) 55%, transparent 100%);
  opacity:0; transform:translateY(12px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gitem:hover figcaption{ opacity:1; transform:none; }
.gitem figcaption h4{ font-family:var(--font-display); font-weight:900; font-size:1.3rem; text-transform:uppercase; letter-spacing:-.01em; }
.gitem figcaption span{ font-family:var(--font-script); font-size:1rem; color:var(--orange); }
.gallery__empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.gallery__more{ text-align:center; margin-top:36px; }
.gallery__more:empty{ margin-top:0; }

/* ============ WERDEGANG / TIMELINE ============ */
.timeline{ position:relative; padding-left:clamp(28px,6vw,70px); max-width:760px; margin:0 auto; }
.timeline__line{ position:absolute; left:clamp(8px,2.4vw,28px); top:6px; bottom:6px; width:3px; background:var(--cream-2); border-radius:99px; overflow:hidden; }
.timeline__line span{ position:absolute; top:0; left:0; right:0; height:0; background:var(--pink); border-radius:99px; transition:height .15s linear; }
.tl-item{ position:relative; margin-bottom:clamp(30px,5vw,52px); }
.tl-item:last-child{ margin-bottom:0; }
.tl-item__dot{ position:absolute; left:calc(-1 * clamp(28px,6vw,70px) + clamp(2px,2vw,21px)); top:8px; width:16px; height:16px; border-radius:50%; background:var(--cream); border:3px solid var(--pink); transition:transform .4s var(--ease), background .4s var(--ease); }
.tl-item.is-in .tl-item__dot{ background:var(--pink); transform:scale(1.25); }
.tl-item__card{
  border-radius:var(--radius); padding:26px 30px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tl-item__card:hover{ transform:translateX(8px); box-shadow:0 18px 40px rgba(20,17,13,.1); }
.tl-item__year{ display:inline-block; font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; color:var(--orange); margin-bottom:8px; }
.tl-item__card h3{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.2rem,2.6vw,1.6rem); margin-bottom:8px; letter-spacing:-.01em; }
.tl-item__card p{ color:var(--ink-soft); font-size:1rem; }

/* ============ MOTIVATION ============ */
.motivation__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(30px,5vw,56px); align-items:center; }
.motivation__quote{ background:var(--ink); color:var(--cream); border-radius:var(--radius); padding:clamp(34px,5vw,56px); }
.motivation__quote p{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.32; letter-spacing:-.01em; }
.motivation__quote .hl{ box-shadow:inset 0 -.5em 0 rgba(255,0,127,.4); }
.motivation__quote cite{ display:block; margin-top:22px; font-family:var(--font-script); font-style:normal; font-size:1.4rem; color:var(--orange); }
.motivation__side{ display:flex; flex-direction:column; gap:24px; }
.motivation__lead{ font-size:1.08rem; color:var(--ink-soft); }
.motivation__lead strong{ color:var(--ink); }
.motivation__tags{ display:flex; flex-wrap:wrap; gap:12px; }
.motivation__tags span{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:.86rem;
  padding:10px 17px; border-radius:99px; border:1.5px solid rgba(20,17,13,.22); cursor:default; transition:.3s var(--ease);
}
.motivation__tags span:nth-child(2n){ border-color:var(--orange); color:var(--orange); }
.motivation__tags span:nth-child(2n+1){ border-color:var(--pink); color:var(--pink); }
.motivation__tags span:hover{ background:var(--ink); color:var(--cream)!important; border-color:var(--ink); transform:translateY(-3px); }

/* ============ KONTAKT ============ */
.contact{ text-align:center; }
.contact__inner{
  background:var(--pink); border-radius:clamp(24px,4vw,40px);
  padding:clamp(54px,8vw,100px) clamp(24px,5vw,60px); color:#fff;
}
.contact__inner .script-accent{ color:#fff; }
.contact__title{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.2rem,7vw,4.6rem); line-height:.98; letter-spacing:-.03em; text-transform:uppercase; margin:10px 0 18px; }
.contact__title em{ font-family:var(--font-script); font-weight:400; font-style:normal; text-transform:none; }
.contact__lede{ font-size:1.15rem; max-width:480px; margin:0 auto 36px; opacity:.95; }
.contact__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.contact .btn--solid{ background:#fff; color:var(--ink); }
.contact .btn--solid:hover{ background:var(--ink); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.contact .btn--glass{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); color:#fff; }
.contact .btn--glass:hover{ background:#fff; color:var(--pink); }

/* Kontaktdaten (gleiche Grösse wie der Lebenslauf-Button) */
.contact__details{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:14px; }
.contact__details .btn{ text-transform:none; letter-spacing:0; }
.contact__details .btn svg{ flex:0 0 auto; }

/* Referenzen */
.contact__refs{ margin-top:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,.28); }
.contact__refs-title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:.9rem; }
.contact__refs-note{ font-size:.98rem; opacity:.9; margin-top:6px; margin-bottom:22px; }
.contact__refs-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.ref{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.45); border-radius:var(--radius-s);
  padding:16px 24px; min-width:200px; display:flex; flex-direction:column; gap:4px;
}
.ref__name{ font-family:var(--font-display); font-weight:900; font-size:1.05rem; }
.ref__tel{ color:#fff; text-decoration:none; font-weight:600; opacity:.95; transition:opacity .2s var(--ease); }
.ref__tel:hover{ text-decoration:underline; }

/* ============ FOOTER ============ */
.footer{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; padding:34px clamp(20px,5vw,56px) 50px;
}
.footer__brand{ font-family:var(--font-script); font-size:1.6rem; }
.footer__meta{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; color:var(--ink-soft); }

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,28px); padding:clamp(16px,4vw,48px);
  background:rgba(18,14,10,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ max-width:min(1000px,92vw); max-height:86vh; display:flex; flex-direction:column; }
.lightbox__stage img{ width:auto; height:auto; max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--radius-s); box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.96); transition:transform .35s var(--ease); }
.lightbox.is-open .lightbox__stage img{ transform:scale(1); }
.lightbox__stage figcaption{ text-align:center; color:var(--cream); padding-top:16px; }
.lightbox__stage figcaption h4{ font-family:var(--font-display); font-weight:900; font-size:1.3rem; text-transform:uppercase; letter-spacing:-.01em; }
.lightbox__stage figcaption span{ font-family:var(--font-script); font-size:1.05rem; color:var(--orange); }
.lightbox__close,
.lightbox__nav{
  flex:0 0 auto; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:var(--cream); border:0; cursor:pointer; border-radius:50%;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.lightbox__close{ position:absolute; top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:48px; height:48px; font-size:2rem; line-height:1; }
.lightbox__nav{ width:54px; height:54px; font-size:2.2rem; line-height:1; }
.lightbox__close:hover,
.lightbox__nav:hover{ background:var(--pink); transform:scale(1.08); }
@media (max-width:640px){
  .lightbox__nav{ position:absolute; bottom:clamp(14px,5vw,28px); width:48px; height:48px; }
  .lightbox__nav--prev{ left:24px; }
  .lightbox__nav--next{ right:24px; }
}

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:880px){
  .nav__links{
    position:fixed; inset:0 0 auto; top:0; padding:100px 32px 40px;
    flex-direction:column; align-items:flex-start; gap:22px;
    background:rgba(251,248,242,.92); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    height:100vh; transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ font-size:1.4rem; }
  .nav__burger{ display:flex; z-index:101; }
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:420px; }
  .personal__cards{ grid-template-columns:repeat(2,1fr); }
  .funfacts__row{ grid-template-columns:1fr; }
  .skills__grid{ grid-template-columns:1fr 1fr; }
  .motivation__grid{ grid-template-columns:1fr; }
  .gallery__grid{ columns:2; }
}
@media (max-width:560px){
  .skills__grid{ grid-template-columns:1fr; }
  .personal__cards{ grid-template-columns:1fr; }
  .about__facts{ grid-template-columns:1fr; }
  .gallery__grid{ columns:1; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s!important; transition-duration:.001s!important; }
  .reveal{ opacity:1; transform:none; }
}