@font-face { font-family: 'Bariol_Bold'; src: url('Font/Bariol_Bold.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bariol_Regular'; src: url('Font/Bariol_Regular.otf') format('opentype'); font-weight: normal; font-style: normal; }

:root{
  --mk-pink:#ff0080;
  --mk-dark:#111;
  --mk-turquoise:#38c6c7;
}

html, body { margin: 0; padding: 0; background: #fff; color: #111; overflow-x: hidden; font-family: 'Bariol_Regular', Arial, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
body { animation: fadeIn 1s ease-in; }
h1,h2,h3,h4{margin:0;}
a{color:inherit;}
img{max-width:100%;}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#references, #Leistungen{
  display:block;
  height:1px;
  margin:40px 0;
}

.heroTitle,
.random-pop-block,
h1, h2, h3, h4 {
   font-family: 'Bariol_Bold', Arial, sans-serif;
  letter-spacing: 0.04em;
}

.heroText{
  font-family: 'Bariol_Bold', Arial, sans-serif;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.heroText.special-spacing{
  font-family: 'Bariol_Regular', Arial, sans-serif !important;
  letter-spacing: 0.14em !important;
}

body,
.mengentext,
.projekt-content,
.mengenzitat,
.poptext-zitatinfo,
p,
li{
  font-family: 'Bariol_Regular', Arial, sans-serif;
}

.mk-topnav{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
}

.mk-topnav a{
  text-decoration:none;
  font-family:'Bariol_Bold',Arial,sans-serif;
  font-size:16.5px;
  padding:12px 18px;
  border-radius:999px;
  color:#111;
  background:rgba(0,0,0,.04);
  transition: background .16s ease, transform .16s ease, color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}

.mk-topnav a:hover{
  background:#ff0080;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}

.mk-topnav a.is-active{ background:#111; color:#fff; }

.hero-section{
  padding-top:100px;
  position:relative;
  width:100vw;
  height:66vh;
  min-height:380px;
  background:#191919;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.hero-video-bg{
  position:absolute;
  top:0;
  left:0;
  width:100vw;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition:opacity .8s cubic-bezier(.6,.16,.29,.95);
  background:#000;
}

.hero-video-bg.visible{ opacity:1; }

.background-container{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transition:opacity .7s, transform .3s;
  z-index:1;
}
.background-container.fade-in{ opacity:1; }
.background-container.fade-out{ opacity:0; }

.hero{
  position:absolute;
  bottom:4%;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  max-width:900px;
  width:94%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.text-background{
  display:flex;
  flex-direction:column;
  align-items:center;
}

h1.heroTitle,
h2.heroText{
  padding:14px 28px;
  margin-bottom:12px;
  font-weight:700;
  border-radius:18px;
  display:inline-block;
  background:#FF0080;
  color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.2,1.8,.44,.86), background .25s ease, box-shadow .25s ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1.heroTitle{ font-size:2.6rem; line-height:1.1; }
h2.heroText{ font-size:2.05rem; max-width:760px; white-space:normal; text-wrap:balance; }

.hero-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:35;
  display:inline-flex;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(17,17,17,.35);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

.hero-dot{
  width:5px;
  height:5px;
  padding:0;
  margin:0;
  border:0;
  outline:none;
  min-width:0;
  min-height:0;
  line-height:0;
  border-radius:999px;
  background:rgba(255,255,255,0.55);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
  opacity:.85;
}
.hero-dot:hover { transform:scale(1.2); opacity:1; }
.hero-dot.active { background:#fff; opacity:1; transform:scale(1.35); }

.logo-hero-container { position:absolute; bottom:25px; left:40px; width:170px; z-index:10; }
.logo-hero-container img { width:100%; height:auto; border-radius:10px; }

#service-pop{
  position:absolute;
  left:190px;
  bottom:38px;
  min-width:180px;
  background:linear-gradient(90deg,#FF0080 60%,#FAFF00 120%,#00F0FF 240%);
  color:#fff;
  padding:17px 22px;
  border-radius:22px 14px 22px 18px/24px 14px 28px 14px;
  font-size:1.10rem;
  font-weight:bold;
  box-shadow:0 8px 30px #0005;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
  transform:scale(0.93) rotate(-3deg);
  z-index:99999;
  border:3px solid #fff;
  text-shadow:1px 2px 12px #000a;
  filter:saturate(1.18) brightness(1.05);
}
.logo-hero-container:hover + #service-pop, .logo-hero-container:focus-within + #service-pop, #service-pop.show { opacity:1; pointer-events:auto; transform:scale(1.04) rotate(-1.5deg); animation:bubblePop 0.45s cubic-bezier(.26,1.36,.44,.88); }
@keyframes bubblePop { 0% { transform: scale(0.7) rotate(-5deg);} 60% { transform: scale(1.08) rotate(-2deg);} 100%{ transform: scale(1.04) rotate(-1.5deg);} }

.feedback-carousel { position:absolute; top:11%; right:5%; width:290px; z-index:3; font-size:21px; color:#fff; text-align:left; line-height:1.6; pointer-events:none; }
.feedback-carousel span { display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(20px); animation:fadeSlide 8s infinite; }
.feedback-carousel span::before { content:"\2605"; font-size:18px; color:gold; }
.feedback-carousel span:nth-child(1) { animation-delay:0s; }
.feedback-carousel span:nth-child(2) { animation-delay:2s; }
.feedback-carousel span:nth-child(3) { animation-delay:4s; }
.feedback-carousel span:nth-child(4) { animation-delay:6s; }
@keyframes fadeSlide { 0% { opacity:0; transform:translateY(20px); } 10% { opacity:1; transform:translateY(0); } 30% { opacity:1; transform:translateY(0); } 40% { opacity:0; transform:translateY(-20px); } 100% { opacity:0; } }

.thumbnails { margin:0 auto; background:#fff; padding:13px 0 11px 0; border-radius:0 0 22px 22px; box-shadow:0 4px 18px 0 rgba(0,0,0,0.07); z-index:12; position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:1000px; overflow:hidden; scrollbar-width:auto; scrollbar-color:#FF0080 #f0f0f0; }
.thumbnails img { width:60px; height:60px; object-fit:cover; border-radius:8px; border:2px solid transparent; flex-shrink:0; background:#fff; transition:transform 0.3s, opacity 0.3s; cursor:pointer; }
.thumbnails img.active { border:2px solid #ffd600; }
.thumbnails img:hover { transform:scale(1.08); opacity:0.85; }

.projekt-info { width:100%; background:#fff; color:#111; padding:35px 0 30px; font-size:1.15rem; display:flex; justify-content:center; }
.projekt-content { max-width:1000px; width:96%; line-height:1.65; }
.mengenzitat blockquote { font-size:1.80rem; font-weight:500; color:#111; margin-bottom:20px; }
.mengenzitat { max-width:900px; margin:45px auto 32px; padding:0 20px; text-align:right; background:transparent; }
.mengentext.secondary, .mengentext.secondary blockquote, .mengentext.secondary p { color:#222; font-size:1.4rem; line-height:1.7; margin:32px auto; max-width:900px; padding:0 20px; text-align:left; }
.zitatinfo { font-size:14px; color:crimson; text-decoration:none; font-weight:500; display:inline-block; margin-top:10px; }
.project-big-title { font-family:'Bariol_Bold', Arial, sans-serif; font-size:3.4rem; font-weight:normal; line-height:1.1; letter-spacing:-0.02em; text-align:center; margin:50px auto; max-width:1000px; }

.visit-counter{
  position:fixed;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  z-index:9999;
  background:none;
  color:#fff;
  border:none;
  padding:0;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:Arial, sans-serif;
  letter-spacing:.04em;
  user-select:none;
  pointer-events:none;
}
.visit-counter .vc-label { font-size:12px; opacity:.9; }
.visit-counter .vc-value { font-size:18px; line-height:1; margin-top:8px; font-variant-numeric:tabular-nums; }
.visit-counter.total { top:calc(50% - 80px); color:#ff0080; }

.float-stage{ position:relative; width:min(1100px, 94vw); height:clamp(360px, 52vw, 520px); margin:10px auto 30px; background:transparent; overflow:visible; }
.float-card{ position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); transform:translate(-50%, -50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0px) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transform-origin:center; width:clamp(150px, 18vw, 210px); height:clamp(150px, 18vw, 210px); border-radius:22px; box-shadow:0 16px 44px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06); display:grid; grid-template-rows:auto 1fr auto; padding:16px 16px 14px; user-select:none; will-change:transform; z-index:var(--z, 1); }
.float-card.is-dark{ border:1px solid rgba(255,255,255,.12); box-shadow:0 16px 44px rgba(0,0,0,.28); }
.float-top{ font-family:'Bariol_Bold', Arial, sans-serif; letter-spacing:0.03em; font-size:1.15rem; line-height:1.1; }
.float-mid{ display:flex; align-items:center; justify-content:center; }
.float-percent{ font-family:'Bariol_Bold', Arial, sans-serif; font-size:clamp(54px, 6vw, 92px); line-height:1; letter-spacing:-0.02em; }
.float-percent small{ font-size:.35em; margin-left:2px; vertical-align:baseline; }
.float-foot{ font-family:'Bariol_Regular', Arial, sans-serif; font-size:.95rem; opacity:.9; display:flex; justify-content:space-between; gap:8px; }
.float-foot span:last-child{ opacity:.8; font-size:.85rem; }

.bottom-arrows{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:99999;
  height:84px;
  padding-bottom:env(safe-area-inset-bottom);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.bottom-arrows.show{ opacity:1; transform:translateY(0); }
.bottom-arrows .inner{ width:100%; height:84px; position:relative; pointer-events:none; }
.bottom-arrows button{ pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); border:0; outline:none; cursor:pointer; width:54px; height:54px; border-radius:999px; background:rgba(140,140,140,.40); color:#fff; font-size:22px; box-shadow:0 12px 34px rgba(0,0,0,.18); backdrop-filter:blur(8px); transition:transform .16s ease, background .16s ease, box-shadow .16s ease; }
#bottomPrev{ left:18px; }
#bottomNext{ right:18px; }
.bottom-arrows button:hover{ transform:translateY(-50%) translateY(-2px) scale(1.02); background:rgba(255,0,128,.80); box-shadow:0 16px 44px rgba(0,0,0,.22); }
.bottom-arrows button:active{ transform:translateY(-50%) scale(.98); }
.bottom-arrows button:focus-visible{ box-shadow:0 0 0 3px rgba(255,214,0,.9), 0 12px 34px rgba(0,0,0,.18); }

.mk-footer2{ width:100%; background:#f3f3f3; border-top:1px solid rgba(0,0,0,.08); font-family:'Bariol_Regular', Arial, sans-serif; color:#111; }
.mk-footer2-inner{ max-width:1200px; margin:0 auto; padding:38px 26px; display:grid; grid-template-columns:240px 1fr 1fr 1.2fr; gap:54px; align-items:start; }
.mkf-brand{ display:flex; align-items:flex-start; justify-content:flex-start; }
.mkf-logo{ width:220px; max-width:100%; height:auto; display:block; }
.mkf-head{ font-family:'Bariol_Bold', Arial, sans-serif; font-size:0.92rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0,0,0,.55); margin:6px 0 14px; }
.mkf-head-lite{ text-transform:none; letter-spacing:.08em; opacity:.85; }
.mkf-text{ font-size:0.98rem; line-height:1.75; color:rgba(0,0,0,.72); }
.mkf-muted{ opacity:.9; }
.mkf-col{ min-width:0; }
.mk-footer-links{ margin-top:10px; }

.mk-fullbleed{ width:100vw; margin-left:calc(50% - 50vw); }
.mk-simple-slider{ padding:10px 0 34px; }
.mk-simple-slider .mk-slider-track{ display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 14vw; }
.mk-simple-slider .mk-slider-track::-webkit-scrollbar{ height:0; }
.mk-simple-slider .mk-slide{ flex:0 0 clamp(420px, 70vw, 980px); scroll-snap-align:center; border-radius:14px; overflow:hidden; background:#eee; box-shadow:0 10px 28px rgba(0,0,0,.16); aspect-ratio:16 / 9; height:auto; }
.mk-simple-slider .mk-slide img,
.mk-simple-slider .mk-slide video{ width:100%; height:100%; display:block; object-fit:cover; }
.mk-simple-slider .mk-slide .mk-video{ margin:0; border-radius:0; overflow:hidden; width:100%; height:100%; aspect-ratio:auto; max-width:none; }
.mk-simple-slider .mk-slide .mk-video video{ width:100%; height:100%; object-fit:cover; }
.mk-simple-slider .mk-slider-nav{ display:inline-flex; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(0,0,0,.06); margin-left:14vw; margin-top:12px; align-items:center; user-select:none; }
.mk-simple-slider .mk-slider-btn{ width:44px; height:34px; border-radius:999px; border:0; cursor:pointer; background:rgba(0,0,0,.10); color:#111; font-size:18px; display:inline-flex; align-items:center; justify-content:center; transition:transform .14s ease, background .14s ease, opacity .14s ease; }
.mk-simple-slider .mk-slider-btn:hover{ transform:translateY(-1px); background:rgba(255,0,128,.18); }
.mk-simple-slider .mk-slider-btn:active{ transform:translateY(0); }
.mk-simple-slider .mk-slider-btn[disabled]{ opacity:.35; cursor:default; transform:none; }

.mk-video { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; margin:20px 0; }
.mk-video video { width:100%; height:100%; object-fit:cover; display:block; }
.mk-video .sound-btn { position:absolute; right:12px; bottom:12px; border:none; border-radius:999px; padding:10px 14px; font-size:14px; background:rgba(17,17,17,.75); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; backdrop-filter:blur(4px); }
.mk-video .sound-btn[aria-pressed="true"] { background:rgba(255,0,128,.9); }
.mk-video[data-orientation="portrait"]{ aspect-ratio:9 / 16; max-width:520px; margin:20px auto; background:#000; }
.mk-video[data-orientation="portrait"] video{ object-fit:contain; background:#000; }

.mosaic-section{ width:min(760px, 88vw); margin:28px auto 18px; }
.mosaic-head{ font-family:'Bariol_Bold', Arial, sans-serif; font-size:clamp(1.6rem, 1.2vw + 1.2rem, 2.4rem); letter-spacing:.04em; margin:0 0 14px; text-align:center; }
.mosaic-wrap{ position:relative; overflow:visible; touch-action:none; }
.mosaic-clip{ border-radius:18px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.14); border:1px solid rgba(0,0,0,.06); background:#f5f5f5; }
.mosaic-grid{ display:grid; width:100%; aspect-ratio:1 / 1; user-select:none; -webkit-user-select:none; }
.mosaic-tile{ background-image:var(--mosaic-img); background-size:calc(var(--cols) * 100%) calc(var(--rows) * 100%); background-position:calc(var(--col) * (100% / (var(--cols) - 1))) calc(var(--row) * (100% / (var(--rows) - 1))); filter:saturate(1.02) contrast(1.02); transform:scale(1); transition:transform .18s ease, filter .18s ease, opacity .18s ease; will-change:transform; }
.mosaic-lens{ position:absolute; inset:auto; width:clamp(320px, 42vw, 520px); height:clamp(320px, 42vw, 520px); border-radius:999px; pointer-events:none; opacity:0; transform:translate3d(-50%,-50%,0) scale(.96); transition:opacity .14s ease, transform .14s ease; box-shadow:0 22px 60px rgba(0,0,0,.22); border:2px solid rgba(255,255,255,.75); background-image:var(--mosaic-img); background-repeat:no-repeat; background-size:var(--lens-bg-size, 100% 100%); background-position:var(--lens-bg-pos, 0px 0px); }
.mosaic-wrap.is-active .mosaic-lens{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }

.mk-awards{ width:min(980px, 96%); margin:18px auto 10px; display:grid; gap:18px; align-items:center; justify-items:center; grid-auto-flow:row; }
.mk-award{ appearance:none; border:0; background:transparent; padding:0; cursor:pointer; border-radius:14px; position:relative; transform:translateZ(0); }
.mk-award img{ width:100%; max-width:320px; height:auto; display:block; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:transform .18s ease, box-shadow .18s ease; }
.mk-award:hover img, .mk-award:focus-visible img{ transform:translateY(-2px) scale(1.01); box-shadow:0 3px 8px rgba(0,0,0,.06); }
.mk-award:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,214,0,.9); }

.mk-proof-pop{ position:fixed; z-index:999999; width:min(340px, 72vw); border-radius:16px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); box-shadow:0 18px 60px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.08); overflow:hidden; transform:translate3d(0,0,0) scale(.98); opacity:0; pointer-events:none; transition:opacity .12s ease, transform .12s ease; }
.mk-proof-pop.show{ opacity:1; transform:translate3d(0,0,0) scale(1); }
.mk-proof-head{ height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; border:0 !important; }
.mk-proof-body{ padding:10px 12px 12px; }
.mk-proof-body img{ width:100%; height:auto; display:block; border-radius:12px; }
.mk-proof-body .mk-proof-pdf{ display:block; padding:10px 12px; border-radius:12px; background:#111; color:#fff; text-decoration:none; font-family:'Bariol_Bold',Arial,sans-serif; text-align:center; }

.mk-confetti-wrap{ position:fixed; inset:0; pointer-events:none; z-index:999998; }
.mk-confetti{ position:fixed; width:6px; height:10px; border-radius:2px; will-change:transform, opacity; opacity:0; animation:mkConfettiFly 520ms ease-out forwards; }
@keyframes mkConfettiFly{ 0% { transform:translate3d(var(--x0), var(--y0), 0) rotate(0deg); opacity:1; } 100% { transform:translate3d(var(--x1), var(--y1), 0) rotate(var(--r)); opacity:0; } }

.mk-reviews{ width:min(1000px, 96%); margin:34px auto 10px; }
.mk-review-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.mk-review{ border-radius:18px; background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%); border:1px solid rgba(0,0,0,.07); box-shadow:0 12px 34px rgba(0,0,0,.08); padding:22px 24px 24px; text-align:left; position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mk-review::before{ content:"“"; position:absolute; top:10px; right:16px; font-size:68px; line-height:1; color:rgba(0,0,0,.06); font-family:Georgia, serif; pointer-events:none; }
.mk-review::after{ content:""; position:absolute; left:-20%; right:-20%; bottom:-60%; height:140%; background:radial-gradient(circle at 30% 30%, rgba(255,0,128,.14), rgba(17,211,255,.08), rgba(255,214,0,.10), rgba(0,0,0,0)); filter:blur(22px); opacity:.65; pointer-events:none; }
.mk-review:hover{ transform:translateY(-3px); border-color:rgba(0,0,0,.10); box-shadow:0 18px 46px rgba(0,0,0,.14); }
.mk-review-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; position:relative; z-index:1; }
.mk-review-name{ font-family:'Bariol_Bold',Arial,sans-serif; font-size:1.08rem; margin:0; line-height:1.15; }
.mk-review-meta{ font-size:.86rem; opacity:.62; margin-top:3px; }
.mk-stars{ font-size:.95rem; letter-spacing:2px; white-space:nowrap; color:#f4b400; text-shadow:0 1px 0 rgba(0,0,0,.06); margin-top:2px; }
.mk-review-text{ font-family:'Bariol_Regular',Arial,sans-serif; font-size:1.02rem; line-height:1.62; margin:10px 0 0; color:rgba(0,0,0,.84); position:relative; z-index:1; }
.mk-review-cta{ margin-top:36px; display:flex; justify-content:center; grid-column:1 / -1; }
.mk-review-cta a{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; font-family:'Bariol_Bold', Arial, sans-serif; font-size:1.05rem; text-decoration:none; color:#111; background:linear-gradient(135deg, #ffffff 0%, #f6f6f6 100%); border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 26px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease; }
.mk-review-cta a::before{ content:"★★★★★"; letter-spacing:2px; color:#f4b400; font-size:.95em; }
.mk-review-cta a:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.18); }
.mk-review-cta a:active{ transform:translateY(0); }

.older-projects{ max-width:1000px; margin:0 auto; }
.older-title{ text-align:center; font-family:'Bariol_Bold',Arial,sans-serif; font-size:2rem; margin:24px 0 10px; }
.older-projects img{ width:100%; height:auto; display:block; margin-top:20px; border-radius:10px; }

iframe{ max-width:100%; border:0; border-radius:10px; margin-top:20px; }
.cta-call-link{ text-decoration:none; }
.cta-call-icon{ display:inline-block; margin-right:6px; }

@media (min-width: 821px){
  .mk-awards{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .mk-awards > .mk-award{ grid-column:span 2; }
  .mk-awards > .mk-award:nth-last-child(2){ grid-column:2 / span 2; }
  .mk-awards > .mk-award:last-child{ grid-column:4 / span 2; }
}

@media (max-width: 980px){
  .mk-footer2-inner{ grid-template-columns:200px 1fr 1fr; gap:36px; }
  .mkf-impressum{ grid-column:1 / -1; }
}

@media (max-width: 900px){
  .mk-simple-slider .mk-slider-track{ padding:0 10vw; }
  .mk-simple-slider .mk-slider-nav{ margin-left:10vw; }
}

@media (max-width: 880px){
  .mk-review-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px){
  .mk-awards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  .mk-topnav{ top:10px; padding:8px 8px; gap:6px; max-width:calc(100vw - 18px); overflow-x:auto; }
  .mk-topnav::-webkit-scrollbar{ height:0; }
  .mk-topnav a{ font-size:12px; padding:7px 10px; }
}

@media (max-width: 700px) {
  .hero-section { padding-top:0 !important; }
  .hero-dots{ bottom:10px; gap:8px; padding:8px 12px; }
  .hero-dot{ width:6px; height:6px; }
  .hero .heroText{ font-size:1.15rem !important; letter-spacing:0.06em !important; line-height:1.25; padding:14px 18px; max-width:92vw; white-space:normal; text-wrap:balance; }
  .logo-hero-container { bottom:8px; left:8px; width:110px; }
  #service-pop { left:108px; bottom:6px; min-width:98px; font-size:0.85rem; padding:7px 11px; }
  .hero { bottom:25px; }
  h1.heroTitle { font-size:1.20rem; }
  h2.heroText { font-size:2.05rem; }
  .feedback-carousel { width:95vw; right:2vw; top:7%; font-size:18px; }
  .thumbnails { padding:9px 0 7px 0; border-radius:0 0 18px 18px; max-width:99vw; }
  .thumbnails img { width:54px; height:54px; }
  .projekt-info { padding:15px 0 14px; font-size:0.95rem; }
  .mengenzitat { margin:16px auto 12px; }
  .mengentext.secondary, .mengentext.secondary blockquote, .mengentext.secondary p { font-size:1.1rem; margin:14px auto; }
  .float-stage{ height:520px; }
  .float-card{ width:168px; height:168px; border-radius:20px; }
  .mosaic-lens{ width:72vw; height:72vw; max-width:360px; max-height:360px; }
}

@media (max-width: 640px){
  .mk-footer2-inner{ grid-template-columns:1fr; gap:24px; padding:28px 18px; }
  .mkf-logo{ width:200px; }
}

@media (max-width: 560px){
  .bottom-arrows{ height:76px; }
  .bottom-arrows .inner{ height:76px; }
  .bottom-arrows button{ width:50px; height:50px; font-size:20px; }
  #bottomPrev{ left:12px; }
  #bottomNext{ right:12px; }
  .mk-simple-slider .mk-slider-track{ padding:0 6vw; gap:14px; }
  .mk-simple-slider .mk-slide{ flex-basis:88vw; }
  .mk-simple-slider .mk-slider-nav{ margin-left:6vw; }
  .mk-simple-slider .mk-slider-btn{ width:42px; height:32px; }
  .mk-review-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .mk-awards{ grid-template-columns:1fr; }
}

@media (max-width: 480px){
  .visit-counter{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .float-card,
  .mosaic-tile,
  .mosaic-lens,
  .mk-proof-pop,
  .mk-confetti,
  .mk-review,
  .mk-review-cta a{
    transition:none !important;
    animation:none !important;
  }
  .mk-confetti{ display:none !important; }
}


/* ============================
   THUMBNAIL SMOOTH INTRO
============================ */

.thumbnail-intro {
  will-change: transform, opacity, filter;
  transform-origin: center;
}

.thumbnails img {
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    opacity .4s ease,
    filter .4s ease;
}

/* Hover schöner */
.thumbnails img:hover {
  transform: scale(1.12) rotate(1deg);
  filter: brightness(1.05);
}


/* ============================
   PREMIUM THUMB FX
============================ */

.thumbnails img {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.thumbnails {
  perspective: 1000px;
}

/* Smooth GPU Boost */
.thumbnails img {
  will-change: transform;
}

/* Glow Effekt */
.thumbnails img:hover {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    0 0 20px rgba(255,0,128,0.25);
}